Javascript「この」イベントが呼び出されるときに変更されます。

Question

var myObject = { 
    myFunction : function(){ 
     var randomizer = Math.random() * 10; 

     if(randomizer > 5){ 
      this.myGreaterThanFunction(); 
     }else{ 
      this.myLesserThanFunction(); 
     } 
    }, 

    myGreaterThanFunction: function(){ 
     document.getElementById("result").innerHTML = "randomizer number is greater than 5"; 
    }, 

    myLesserThanFunction: function(){ 
     document.getElementById("result").innerHTML = "randomizer number is less than 5"; 
    } 
}; 

myObject.myFunction（）; //この場合、 "this"はmyObject.henceを指します。 "this"はここで期待通りに動作します。

のdocument.getElementById（ "ボタン2"）のonclick = myObject.myFunction.bind（myObjectという）。 //この場合、myObjectをmyFunctionにバインドするとき、「this」はmyObjectを指し示し、「this」は期待どおりに機能します。

document.getElementById（ "button1"）。onclick = myObject.myFunction; //この場合、「this」はmyObjectを指しているはずです。しかし、これは未定義です。なぜですか？

Answer 1

イベントリスナーは要素にバインドされるため（イベントリスナー内のthisはイベントを発生させた要素を参照します）。もちろん、イベントリスナーがをと明示的に別のものにバインドしない限り、.bindを使用します。