JavaScript関数の詳細な説明これを指す問題

1.関数内のこの方向

これらの this の参照は、関数が呼び出されたときに決定されます。 呼び出し方法によって、これが指す場所が決定されますが、通常は呼び出し元を指します。
それでは詳しく見てみましょう！

1. 通常の機能

関数fn(){
            console.log('通常の関数 this:' + this);
        }
        関数()

印刷結果は次のとおりです。

通常の関数が呼び出されると、これはウィンドウを指していることがわかります。

2. コンストラクター

関数スター(){
            console.log('コンストラクタの this:' + this);
        }
        新しいスター()

印刷結果は次のとおりです。

オブジェクト メソッドが呼び出されると、this はメソッドのインスタンス オブジェクトを指していることがわかります。

3. オブジェクトメソッド

 var o = {
            印刷: 関数(){
                console.log('オブジェクトメソッドの this:'+this);
            }
        }
        o.print()

印刷結果は次のとおりです。

オブジェクト メソッドが呼び出されると、this はメソッドが属するオブジェクトを指していることがわかります。

4. イベントバインディング方式

ボタンにバインディング イベントを追加すると、その this はどのようにポイントされるのでしょうか?

たとえば、現在ボタンがあり、次のようにクリック イベントを追加します。

<本文>
    <button>ボタン</button>
    <スクリプト> 
	var btn = document.querySelector('ボタン');
	btn.onclick = 関数(){
    	console.log('バインディングイベントのthis:'+this);
	}
    </スクリプト>
</本文>

ボタンをクリックすると、次のようになります。

バインディング イベントが呼び出されると、this がバインディング イベント オブジェクトを指していることがわかります。

5. タイマー機能

タイマー関数を記述し、1 秒後に呼び出します。

window.setTimeout(関数(){
            console.log('タイマーのこれ:'+これ);
        },1000)

印刷結果は次のとおりです。

タイマー関数が呼び出されると、これがウィンドウを指していることがわかります。

6. 関数をすぐに実行する

すぐに実行される関数を定義します。

（関数（）{
            console.log('this:'+すぐに実行する関数のthis);
        })();

印刷結果は次のとおりです。

関数呼び出しがすぐに実行されると、this が wi​​ndow を指していることがわかります。

要約すると、次のようになります。

2.関数内のthisポインタを変更する

ただし、関数内では、 this ポインターは静的ではありません。いくつかの方法、主に次の方法を使用して、 this ポインターを変更できます。先ほど、プロトタイプ オブジェクト内で this が指す場所の問題をまとめる際に、call メソッドと apply メソッドについて説明しました。ここではそれらを繰り返さず、例だけを示します。

1. 呼び出しメソッド

まずオブジェクトと関数を定義します。

 var o = {
            名前:'xl'
        }
        関数fn(){
            console.log(これを);
        }

現時点では、 this は通常の関数内にあります。 前述のように、通常の関数の this は windiw を指します。 ここで、 this を o オブジェクトにポイントしたい場合は、次のようにします。

fn.call(o)

印刷された結果は次のとおりです。

これは変更が成功したことを示しています。

2. 適用方法

上記と同じ方法です。

var o = {
            名前:'xl'
        }
        関数fn(){
            console.log(これを);
        }
        fn.apply(o);

印刷結果は次のとおりです。

3. バインドメソッド

bind() メソッドは関数を呼び出しません。しかし、関数内で this ポインターを変更することは可能です。

文法：

fun.bind(thisArg、arg1、arg2、...) を実行します。 

thisArg: fun関数の実行時に指定されたthis値 arg1、arg2: 渡されたその他のパラメータ 指定されたthis値と初期化パラメータによって変換された元の関数のコピーを返します

したがって、this ポインターを変更するだけで関数を呼び出したくない場合は、bind を使用できます。

以下のように（上記の例を引き続き使用します）：

 var o = {
            名前:'xl'
        }
        関数fn(){
            console.log(これを);
        }
        var f = fn.bind(o);
       関数f();

印刷結果は次のとおりです。

ここで注意すべき点は、bind() メソッドは関数を呼び出さないため、this ポインターを変更した後、新しい関数が返され、この新しい関数を f に割り当てて、f を通じて呼び出すことができるということです。

3. 呼び出し適用バインドサマリー

1. 類似点

関数内で this ポインターを変更できます。

2. 相違点

• callとapply関数を呼び出し、関数内の this ポインターを変更します。
  
• - -callとapplyで渡されるパラメータは異なります。call は aru1、aru2... の形式でパラメータを渡しますが、apply は配列形式 [arg] で渡す必要があります。
• bind関数を呼び出さないが、関数内の this ポインターを変更できます。

3. 適用シナリオ

• call継承を頻繁に行います。
• apply配列と関連付けられることが多いです。たとえば、数学オブジェクトを使用して配列の最大値と最小値を実現できます。
• bind関数を呼び出しませんが、それでも this ポインターを変更する必要があります。たとえば、タイマー内の this ポインターを変更します。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。