なぜこのオブジェクトを独自のメソッドにバインドする必要がありますか？

Question

は、私が実行した場合：

var dog = { 
    sound: "woof", 
    talk: function(){ 
     console.log(this.sound) 
    } 
} 
document.addEventListener("click",dog.talk) 

未定義記録されます。私はその犬をその機能に結びつけるときにのみ - document.addEventListener("click",dog.talk.bind(dog)) - それは動作するのですか？

なぜ犬をそのメソッドにバインドする必要がありますか？

イベントデータがパラメータとして渡されている場合にのみ、この関数は通常のようにdogで呼び出されていませんか？

Answer 1

thisで次のように読むことをお勧めします。 http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

明らかに、thisは、オブジェクトがキーワードthisを使用する関数を呼び出す時点でのみ定義されます。そして、その時点で、thisが関数を呼び出したオブジェクトとして定義されています。したがって、あなたのケースでは、thisがドキュメントオブジェクトにバインドされていたでしょう。あなたの関数では、thisは、定義されていないdocument.soundを参照しています。

つまり、this.soundのように見える犬オブジェクトの内部では、ローカルサウンド変数を参照する必要がありますが、関数が呼び出された時点ではありません。

Answer 2

console.log(this.sound)のはdocumentの要素であり、dogのオブジェクトではありません。

var dog = { 
 
    sound: "woof", 
 
    talk: function(){ 
 
    \t console.log(this) 
 
     console.log(this.sound) 
 
    } 
 
}; 
 

 
document.addEventListener("click",dog.talk)

スナップショット：

あなたはthisdog内部のオブジェクトを使用したい場合。あなたは、イベントを編集することができます。これは、呼び出し元のオブジェクトではなく、犬のオブジェクトを参照しますので、

var dog = { 
 
    sound: "woof", 
 
    talk: function(){ 
 
     console.log(this) 
 
     \t console.log(this.sound) 
 
    } 
 
}; 
 

 
document.onclick = function() { 
 
\t dog.talk(); 
 
};