類型調用成員方法時出現錯誤

我在寫一個使用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

類型調用成員方法時出現錯誤

回答

相關問題