我一直聽說箭頭函式this從它們的Lexical Environment繼承了 的值。
考慮這個例子：
let para = document.getElementById("para");
let article = document.getElementById("article");
article.addEventListener("click", () => {
console.log("I’m a <span> tag!", this);
event.stopImmediatePropagation();
});
para.addEventListener("click", () => console.log("I’m a <p> tag!", this));<p id="para">
<span id="article">Click Me!</span>
</p>為什么this箭頭回呼函式內部的值是undefined（或在非嚴格模式下：）window？如果回呼函式使用this來自其詞法環境的值，詞法環境不應該是addEventListener？
uj5u.com熱心網友回復：
當你呼叫一個函式作為func(a, b)，那么首先，a評估，然后b進行評估，然后 func被呼叫的價值觀a和b。
a并且b不在“內部” func。
您使用以下哪個代碼片段無關緊要 - 它們是等效的：
const a = () => console.log(this);
addEventListener("click", a);
addEventListener("click", () => console.log(this));
addEventListener 確實嘗試將其this設定為事件的呼叫其第二個引數currentTarget，但如檔案和其他各種問答中所述，箭頭函式不能被反彈：
"use strict";
(() => console.log(this)).call({ "my": "object" }); // Logs `undefined`.
我不太確定您所說的“詞匯環境不應該是addEventListener什么？”是什么意思？. 箭頭函式的詞法作用域是它被創建的那個。當一個箭頭函式被創建時，它的作用域和一個特殊的“詞法-this”標志被用來創建一個函式物件。當被呼叫時，請注意嘗試執行 OrdinaryCallBindThis 抽象操作，通常設定this，對箭頭函式沒有任何作用。相反，函式體在其原始背景關系中按原樣執行。
再次查看您的原始代碼，請注意每一個this都是同一個詞法環境的一部分——事實上this，在這段代碼中，無論你把它放在哪里，都是一樣的。請特別注意，函式引數不會創建新的詞法環境。
"use strict";
this; // `undefined`.
let para = document.getElementById("para", this); // Ignored argument, but is `undefined`.
let article = document.getElementById("article");
article.addEventListener("click", () => {
console.log(this); // Logs `undefined`.
event.stopImmediatePropagation();
});
para.addEventListener("click", (this, () => console.log(this))); // Logs `undefined`. Preceded by comma operator with discarded value `this`, but would be `undefined`.
相比之下，一個function函式會創建一個新的詞法環境，也可以被反彈：
article.addEventListener("click", function(){
console.log(this); // Logs `article`.
});
請參閱“this”關鍵字如何作業？以獲得更詳細的解釋。
uj5u.com熱心網友回復：
我認為您應該查看MDN 上的箭頭函式，他們充分解釋了箭頭函式是什么，并將傳統函式與箭頭函式進行了比較。
根據 MDN：
箭頭函式沒有自己的 this 或 super 系結，不應用作方法。
因此，在你的情況下，箭頭函式不會重新定義this，這意味著this是window物件
傳統的函式是this根據函式的呼叫重新定義的。
para.addEventListener("click", function () {
console.log(this); // print p node elemnt
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358403.html
標籤：javascript 打回来 这个 箭头函数 词法范围
上一篇：頁面加載時單擊觸發器（）不起作用