类型调用成员方法时出现错误

我在写一个使用ES2016的类，我不明白为什么，控制台向我抛出这个错误。类型调用成员方法时出现错误

我环顾四周，一个可能的原因，但：

它不能在函数名称的拼写错误，我已经一次又一次地检查和函数声明，我要用到的函数名调用它匹配;
highlightSelected未与任何预先存在的属性共享其名称;
我在highlightSelected函数内执行的所有操作都在作为参数传递的变量类型上被允许。

那么是怎么回事？为什么这不起作用？

Uncaught TypeError: this.highlightSelected is not a function 
    at HTMLAnchorElement.<anonymous> (app.js:40)

window.document.addEventListener('DOMContentLoaded', function() { 
 
    new Filter("nf"); 
 
}); 
 

 
class Filter { 
 
    constructor(category) { 
 
    this.products = [...document.querySelectorAll('.product')]; 
 
    this.filterButtons = [...document.querySelectorAll('a.filter')]; 
 
    this.lastClicked = null; 
 
    this.registerListeners(); 
 
    console.log(this.filterProducts(category)); 
 
    } 
 

 
    filterProducts(category) { 
 
    let filtered = this.products.filter(function(item) { 
 
     return (item.dataset[category] === "true"); 
 
    }); 
 

 
    return filtered; 
 
    } 
 

 
    registerListeners() { 
 
    this.filterButtons.map(function(button) { 
 
     button.addEventListener("click", function(event) { 
 
     console.log(event.target.dataset.cat + " has been clicked!"); 
 
     if (this.lastClicked !== event.target.dataset.cat) { 
 
      this.highlightSelected(event.target) 
 
      this.lastClicked = event.target; 
 
     } 
 
     }); 
 
    }); 
 
    } 
 

 
    highlightSelected(clickedButton) { 
 
    if ((this.lastClicked !== undefined) && (this.lastClicked !== null)) { 
 
     if (this.lastClicked.classList.contains('currently-selected')) { 
 
     this.lastClicked.classList.remove('currently-selected'); 
 
     } 
 

 
     if (!clickedButton.classList.contains('currently-selected')) { 
 
     clickedButton.classList.add('currently-selected'); 
 
     } 
 
    } 
 
    } 
 
}

html { 
 
    font-size: 16px; 
 
} 
 

 
.container { 
 
    width: 85%; 
 
    margin: 4% auto; 
 
} 
 

 
#button-area { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 4rem; 
 
} 
 

 
#button-area a { 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    background-color: mistyrose; 
 
    color: #000; 
 
    padding: .8rem 2rem; 
 
} 
 

 
#button-area a.currently-selected { 
 
    background-color: purple; 
 
    color: white; 
 
} 
 

 
#product-area { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.product { 
 
    font-family: sans-serif; 
 
    font-size: 1rem; 
 
    background-color: goldenrod; 
 
    padding: .8rem 2rem; 
 
}

<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title>Query Selector</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 

 
    <div id="button-area"> 
 
     <a class="filter" href="#" data-cat="ef"> Cat E </a> 
 
     <a class="filter" href="#" data-cat="lf"> Cat L </a> 
 
     <a class="filter" href="#" data-cat="gf"> Cat G </a> 
 
     <a class="filter" href="#" data-cat="nf"> Cat N </a> 
 
    </div> 
 

 
    <div id="product-area"> 
 
     <div class="product" data-ef="true" data-lf="true" data-nf="true" data-gf="true"> 
 
     <p> Car </p> 
 
     </div> 
 
     <!-- /. product --> 
 

 
     <div class="product" data-ef="false" data-lf="false" data-nf="false" data-gf="false"> 
 
     <p> Airplane </p> 
 
     </div> 
 
     <!-- /. product --> 
 

 
     <div class="product" data-ef="true" data-lf="false" data-nf="false" data-gf="true"> 
 
     <p> Pizza </p> 
 
     </div> 
 
     <!-- /. product --> 
 

 
     <div class="product" data-ef="true" data-lf="false" data-nf="false" data-gf="true"> 
 
     <p> Ficus </p> 
 
     </div> 
 
     <!-- /. product --> 
 

 
     <div class="product" data-ef="false" data-lf="false" data-nf="true" data-gf="true"> 
 
     <p> Keyboard </p> 
 
     </div> 
 
     <!-- /. product --> 
 

 
     <div class="product" data-ef="true" data-lf="false" data-nf="false" data-gf="false"> 
 
     <p> Shirt </p> 
 
     </div> 
 
     <!-- /. product --> 
 

 
     <div class="product" data-ef="true" data-lf="false" data-nf="true" data-gf="true"> 
 
     <p> Vanilla </p> 
 
     </div> 
 
     <!-- /. product --> 
 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
<script src="app.js"></script> 
 

 
</html>

来源

2017-10-10 haunted85

您需要将您的事件回调与类绑定。 –

由于这是ES6的标签，因此您应该使用'for ... of'而不是'map'，而使用箭头函数（unbound！）'function'表达式。 – Bergi

你的问题就出在这一块的代码：

registerListeners() { 
    this.filterButtons.map(function(button) { 
    button.addEventListener("click", function(event) { 
     console.log(event.target.dataset.cat + " has been clicked!"); 
     if (this.lastClicked !== event.target.dataset.cat) { 
     this.highlightSelected(event.target) 
     this.lastClicked = event.target; 
     } 
    }); 
    }); 
}

的问题是，JavaScript使用函数的范围，所以this的map和addEventListener里面是不是Filter的实例。有几种方法可以解决这个问题，但对于您来说，最简单的方法是使用arrow functions，因为它们保留相同的词汇this。

registerListeners() { 
    this.filterButtons.map((button) => { 
    button.addEventListener("click", (event) => { 
     console.log(event.target.dataset.cat + " has been clicked!"); 
     if (this.lastClicked !== event.target.dataset.cat) { 
     this.highlightSelected(event.target) 
     this.lastClicked = event.target; 
     } 
    }); 
    }); 
}

关于此更深入的信息，请查看How to access the correct this inside a callback?

来源

2017-10-10 16:32:38

在绑定方法的事件，this不再是类。为了保护你的背景，你可以使用一个中间变量：

这个例子说明了什么问题？

window.setTimeout(this.showText, 50);

的showText方法将被正确调用，但该方法中的任何使用，这将下降。 ..修正：

let _this = this; 
window.setTimeout(function() { _this.showText(); }, 50);

你也可以使用bind，apply，或者箭头功能相同的效果。这是一种可以以多种方式剥皮的猫。 Arrow功能对ECMAScript类具有类似的浏览器支持，因此您不会丢失任何浏览器。

来源

2017-10-10 16:34:50 Fenton

类型调用成员方法时出现错误

回答

相关问题