聚合物2.0：爲什麼我們需要一個匿名函數時勢在必行添加的偵聽

Question

在新文檔的聚合物2.0（https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners），它提供了以下例子：

ready() { 
    super.ready(); 
    this.addEventListener('click', e => this._myClickListener(e)); 
} 

命令式添加事件偵聽器。如果你想刪除一個監聽器，我們就必須做到以下幾點（按文檔）：

constructor() { 
    super(); 
    this._boundListener = this._myLocationListener.bind(this); 
} 

connectedCallback() { 
    super.connectedCallback(); 
    window.addEventListener('hashchange', this._boundListener); 
} 

disconnectedCallback() { 
    super.disconnectedCallback(); 
    window.removeEventListener('hashchange', this._boundListener); 
} 

這個意義，我表面上;我們需要確保對該函數的相同引用同時傳遞給remove和add事件偵聽器，因爲這是它爲不同偵聽器建立索引的方式。

但是，爲什麼我們必須使用.bind（this）？我明白它會返回一個將函數綁定到「this」的新函數，因此對保存的函數進行新的引用會很有用，因此我們可以添加和刪除相同的函數引用。

但是爲什麼我們不能用第一個例子來做到這一點？第一段代碼中的this._myClickListener（e）是否也有一個唯一的函數引用，不會改變我們可以引用來添加和刪除偵聽器？爲什麼我們首先需要將其包裝在一個匿名函數中？我覺得這樣可以解決在代碼的第二部分中已經解決的問題，但顯然這樣做是出於某種原因。

感謝您的任何幫助或建議提前！

Answer 1

如果你想通過this._myClickListener回調，那麼它不會有你想要的this值調用，因爲它是DOM實現觸發調用它，它也不會知道你的this：this會只是全局對象（或嚴格模式下的undefined）。

然後，您可以說，好吧，我將綁定this與this._myClickListener.bind(this)，但現在您沒有對該功能的引用，該功能是在現場創建的。當試圖呼叫removeEventListener時，您不能通過this._myClickListener.bind(this)獲得對它的訪問權限，因爲它只是再次創建一個新函數，這不是您以前使用的函數。

那麼，還有比分配綁定功能給一個變量，並使用該變量在這兩個addEventListener和removeEventListener沒有其他辦法：這是爲了滿足在同一時間兩個條件的唯一途徑：

• 你有參考作用被綁定到正確的this

功能

Answer 2

當您將對象的方法作爲參數傳遞給函數/方法時，它超出了其自然上下文（this未附加到原始對象），這就是爲什麼仍然使用它，好像它是一個定期調用該對象上的方法，您使用bind明確地綁定上下文並返回綁定到該上下文的函數。