このキーワードは、関数式と矢印関数でどのように機能しますか？

Question

最近、私はJohn Resigの「The Secrets of JavaScript Ninja」を読んでいて、リスト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>

Answer 1

次のコードを実行できます。

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）」を使用すると正常に実行されます。