javascript - 入れ子関数でこのオブジェクトが指すオブジェクトはどのように変化しますか?

Question

マウスを移動すると長方形のブロックの長さが長くなり、高さが高くなるという機能のデモを書いたのですが、次のような問題が発生しました。ネスティング
リーリー
パラメータを渡すには that=this を使用する必要があります。そうでない場合、ブラウザは次のエラーを報告します

Uncaught TypeError: 'Window' で 'getComputedStyle' の実行に失敗しました: パラメータ 1 は 'Element' 型ではありません。

最後にコード全体を投稿しました。パラメータを渡すために that=this を使用すると問題が解決する理由を知りたいです。パラメーターが渡されない場合、これは誰を 2 回指すことになりますか?この値のすべての変更を監視して表示できる、Chrome と Firefox の優れたデバッグ方法はありますか?

htmlコード:

リーリー

CSSコード:

リーリー

jsコード:

リーリー

Answer 1

イベントを通じて呼び出される関数の this はイベントをトリガーした要素を指すため、op[0].onmouseover イベントによって呼び出される関数の this は op[0]; を指します

if (fn) { fn();} は関数を呼び出すウィンドウと同等であるため、changeStyle 関数によって渡されるコールバック関数の this はウィンドウを指します

コードの実行を追跡したい場合は、ブレークポイントのデバッグを使用して、操作中に各変数の割り当てを確認できます

Answer 2

これは、関数の実行時に自動的に生成される内部オブジェクトを表し、関数内でのみ使用できます。
この関数はさまざまな状況で使用されるため、この値は変化します。ただし、これは関数を呼び出すオブジェクトを参照するという一般原則があります。 Ruan Yifeng によるこの記事を読むことができると思います: http://www.ruanyifeng.com/blo...

Answer 3

ポインティングの心配は忘れて、(es6) アロー関数を使用してくださいthis

Answer 4

それに合格しない場合、変更関数が誰のスタイルを変更するか知っていますか?これを直接使用する場合、これはウィンドウを指します。1 階で説明したように、ブレイクするとすぐにブレークポイントがわかります。

Answer 5

that=this を使用して this を現在の字句スコープにバインドしない場合、this はグローバル オブジェクト ウィンドウを指します。これが this のデフォルトのバインディングです。