このキーワードは JavaScript では非常に強力ですが、その仕組みを知らないと使用するのが困難です。
function dosomething(){ this.style.color="#fff" }
上記のコードのこれは何を指しているのでしょうか?また、dosomething() を実行すると何が出力されますか?
JavaScript では、this は常に、現在実行されている関数、またはその関数をメソッドとして呼び出すオブジェクトを指します。ページ上で dosomething() メソッドを定義すると、this の所有者は現在のページになります。グローバルオブジェクトと言われています。
dosomething() 関数を実行すると、この関数はグローバル オブジェクト ウィンドウを指しており、ウィンドウ オブジェクトには style 属性がないため、エラーが発生します。
コピー:
element.onclick=dosomething;
dosomething() はメソッドとして onclick 属性に完全にコピーされるようになりました。そのため、このイベントが実行されると、これは HTML 要素を指し、dosomething がコピーされるたびに、対応する HTML 要素の色が変わります。イベント、このメソッドは現在このメソッドを実行している HTML 要素を指します。
引用:
<要素 onclick="dosomething()">
この時点では、このメソッドをコピーしていませんが、このメソッドを参照しています。onclick 属性には実際のメソッドが含まれていません。このメソッドを実行すると、これは再びグローバル ウィンドウ オブジェクトを指します。エラーが発生します。
上記はこの記事の全内容です。必要な方はよく読んでください。