此關鍵字如何用於函數表達式和箭頭函數？

最近，我一直在閱讀John Resig的「JavaScript的忍者的祕密」，我已經到達了清單4.10，即「綁定一個特定的上下文到一個函數」，其中的代碼是打算點擊按鈕時打印。作者顯示只有使用箭頭函數代替普通函數表達式時，代碼才能成功運行。爲什麼代碼不能在函數表達式中正常工作？這個關鍵字是如何工作的？此關鍵字如何用於函數表達式和箭頭函數？

這裏是函數表達式代碼：

function Button() { 
 
    this.clicked = false; 
 
    this.click = function() { 
 
    this.clicked = true; 
 
    if (button.clicked) { 
 
     "The button has been clicked" 
 
    }; 
 
    }; 
 
} 
 
var button = new Button(); 
 
var elem = document.getElementById("test"); 
 
elem.addEventListener("click", button.click);

<button id="test">Click Me!</button>

，這裏是用箭頭函數的代碼（這完美的作品）：

function Button() { 
 
    this.clicked = false; 
 
    this.click =() => { 
 
    this.clicked = true; 
 
    if (button.clicked) { 
 
     console.log("The button has been clicked"); 
 
    } 
 
    }; 
 
} 
 
var button = new Button(); 
 
var elem = document.getElementById("test"); 
 
elem.addEventListener("click", button.click);

<button id="test">Click Me!</button>

來源

2017-07-17 Karan Dhir

當使用箭頭表達式時，'this'保持它的當前範圍，而當使用常規函數表達式'this'時，它的範圍將改變其範圍以引用函數內部的範圍。 –

[「this」關鍵字如何工作？]（https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work） – abhishekkannojia

https://developer.mozilla.org/EN-US /文檔/網絡/的JavaScript /參考/函數/ Arrow_functions –

您可以運行以下代碼。

function Button1() { 
 
    this.clicked = false; 
 
    this.click = function() { 
 
    this.clicked = true; 
 
\t console.log('bt1',this); 
 
    if (button1.clicked) { 
 
     console.log("The button has been clicked 1"); \t 
 
    }; 
 
    }; 
 
} 
 
function Button2() { 
 
    this.clicked = false; 
 
    this.click =() => { 
 
    this.clicked = true; 
 
\t console.log('bt2',this); 
 
    if (button2.clicked) { 
 
     console.log("The button has been clicked 2"); 
 
    } 
 
    }; 
 
} 
 

 
var button1 = new Button1(); 
 
var button2 = new Button2(); 
 
var elem = document.getElementById("test"); 
 
elem.addEventListener("click", button1.click); 
 
elem.addEventListener("click", button2.click);

<button id="test">Click Me!</button>

'這個' 是僅在正常功能的HTML。

如果使用'button1.click.bind（button1）'，將會成功運行。

來源

2017-07-17 09:44:27 Whj

此關鍵字如何用於函數表達式和箭頭函數？

回答

相關問題