JavaScriptの関数この指摘の問題を説明

2022-01-13 09:23:42

I. 関数内で指差す

thisへのポインタは、関数が呼び出されたときに決定されます。thisの呼ばれ方は様々で、一般的には呼び出し元を指します。
では、具体的に説明しましょう。

1. 共通機能

function fn(){
            console.log('This for the normal function:'+this);
        }
        fn()

印刷結果は

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

2. コンストラクタ

function Star(){
            console.log('Constructor's this:'+this);
        }
        new Star()

印刷結果は

オブジェクトメソッドが呼び出されたとき、これがメソッドのインスタンスオブジェクトを指すことが知られています。

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

 var o = {
            print: function(){
                console.log('This of the object method:'+this);
            }
        }
        o.print()

印刷結果は

オブジェクトのメソッドが呼び出されたとき、これがメソッドの属するオブジェクトを指すことが知られています。

4. イベントバインディングメソッド

ボタンにバインドイベントを追加したとき、his thisはどのようにそれを指すのでしょうか？

例えば、今、ボタンbuttonがありますが、これにclickイベントを追加すると、以下のようになります。

<body>
    <button>button</button>
    <script> 
	var btn = document.querySelector('button');
	btn.onclick = function(){
    	console.log('Bind event to this:'+this);
	}
    </script>
</body>

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

バウンドイベントが呼び出されたときに、これがバウンドイベントオブジェクトを指していることがわかります。

5. タイマー機能

タイマー関数を書いて、1s後に関数を呼び出させる。

window.setTimeout(function(){
            console.log('timer's this:'+this);
        },1000)

印刷結果は

タイマー関数が呼ばれたときに、これがwindowを指していることがわかります。

6. 関数を即座に実行する

即時実行関数を定義する。

(function(){
            console.log('Immediately execute this:'+this) of the function;
        })();

印刷結果は

これは、関数呼び出しが即座に実行された場合のウィンドウを指していることは明らかである。

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

<テーブル呼び出し方法を指しています。共通関数呼び出しウィンドウコンストラクタの呼び出しインスタンス・オブジェクトの場合、プロトタイプ・オブジェクト内のメソッドもインスタンス・オブジェクトを指します。オブジェクトのメソッド呼び出しメソッドが所属するオブジェクトイベントバインディングメソッドイベントオブジェクトのバインディングタイマー機能ウィンドウ関数をすぐに実行するウィンドウ

次に、この指している内部の関数を次のように変更します。

しかし、関数においては、この指摘は固定ではなく、主に次のような方法で変更することができます。前回のプロトタイプオブジェクトにおけるこの指摘の問題のまとめでは、callメソッドとapplyメソッドについて触れていますので、ここでは繰り返さず、一例を挙げます。

1. コールメソッド

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

 var o = {
            name:'xl'
        }
        function fn(){
            console.log(this);
        }

この時点で、これは通常の関数の中にあります。先ほど述べたように、通常の関数の this は windiw を指していますが、もし this を o オブジェクトに向けたいのであれば、そうします。

fn.call(o)

印刷された結果は

これは、改造が成功したことを指しています。

2. 適用方法

方法は上記と同じです。

var o = {
            name:'xl'
        }
        function fn(){
            console.log(this);
        }
        fn.apply(o);

印刷結果は

3. バインドメソッド

bind()メソッドは、関数を呼び出すわけではありません。しかし、このポインティングの中で関数を変更することができます。

シンタックス

fun.bind(thisArg, arg1, arg2, ...)

thisArg: fun関数の実行時に指定されたthis値 arg1, arg2: 渡された他の引数指定されたthis値と初期化引数で変形された元の関数のコピーを返す。

つまり、この指値を変更するだけで、関数を呼び出したくない場合にbindを使うことができる。

次のように（再び上記の例で）。

 var o = {
            name:'xl'
        }
        function fn(){
            console.log(this);
        }
        var f = fn.bind(o);
       f();

印刷結果は

ここで一つ注意すべきは、bind()メソッドは関数を呼び出さず、返された新しい関数を指すようにこれを修正するので、この新しい関数をfに割り当て、fを通してそれを呼び出すことができることです。

iii. コール・アプライド・バインドまとめ

1. 同ポイント

どちらも関数内部でこのポイントを変更することができます。

2. 相違点

call と apply は、関数を呼び出し、関数内部のこのポインティングを変更します。
-call と apply 渡される引数が異なり、call は aru1, aru2... apply は array[arg] という形式の引数を渡します。
bind 関数を呼び出さず、関数の内部で変更することができます。

3. アプリケーションシナリオ

call 継承を行うことが多い。
apply は配列に関係することが多い。例えば、配列の最大値や最小値をmathオブジェクトの助けを借りて実装します。
bind 関数を呼び出さないが、それでもこれを変更したい場合。例えば、タイマーの内部でこれを変更します。

概要

この記事があなたのお役に立ち、Script Houseの他のコンテンツにもっと注目していただけることを願っています。

JavaScriptの関数この指摘の問題を説明

I. 関数内で指差す

1. 共通機能

2. コンストラクタ

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

4. イベントバインディングメソッド

5. タイマー機能

6. 関数を即座に実行する

次に、この指している内部の関数を次のように変更します。

1. コールメソッド

2. 適用方法

3. バインドメソッド

iii. コール・アプライド・バインドまとめ

1. 同ポイント

2. 相違点

3. アプリケーションシナリオ

概要

関連

最新

おすすめ