JavaScript の this pointing 問題を理解するための 1 つの記事

この記事では、JavaScript に関する関連知識を提供します。主に、これが指摘する関連問題を紹介します。これは、「これ、現在の」という意味で、ポインタ変数です。実行環境を動的に指します。現在の関数です。見てみましょう。皆さんのお役に立てれば幸いです。

JavaScript ビデオ チュートリアル 、Web フロントエンド ]

this の概念:

• js では、this は「this; current」を意味し、

  は現在の関数の実行環境を動的に指すポインター変数です。

• 同じ関数が異なるシナリオで呼び出される場合、このポインターも変化する可能性がありますが、ポインターは常に、その関数が配置されている関数の実際の呼び出し元を指します。 ; 呼び出し元がない場合は、グローバル オブジェクト ウィンドウを指します。

通常の関数: これについては、呼び出した人は呼び出した人を指しますが、呼び出し元がいない場合は、グローバル オブジェクト ウィンドウを指します。

アロー関数: アロー関数のこれは、関数スコープで使用されるオブジェクトを指します。

1. グローバル環境のこれは、グローバル スコープ

を指します。これは、厳密モードであるかどうかに関係なく、常にグローバル オブジェクト ウィンドウを指します。

完全な書き込みメソッドは window.console.log() です。window は次のとおりです。省略、window は console.log() メソッドを呼び出したので、この時点では window を指します。

2. 関数内のこれ

1. 厳密モード:

関数 test() を直接呼び出します。 this は未定義を指します。

コール関数 this は window を指します。したがって、strict モードでは、コードを呼び出すときは、厳密に 呼び出される関数のオブジェクトを記述する必要があり、省略や省略は許可されません。

2. 非厳密モード:

非厳密モードでは、test( ) および

関数オブジェクトを呼び出すとき、これは window を指します。

3. オブジェクトの This

オブジェクトの内部メソッドの This は、これらのメソッドを呼び出すオブジェクトを指します。つまり、 呼び出した人は を指します。

を呼び出します。メソッドの戻り値は Mengya で、この時点では obj を指していることを示します。

skill2() メソッドの呼び出し順序は、

の場合、戻り値は Luban で、skill2() メソッドのこれが obj2 を指していることを示します。

関数の定義位置はその this ポインターに影響しません。
• このポインターはオブジェクトにのみ関連します。これは関数

  を呼び出します。

マルチレベルのネストされたオブジェクトの場合、内部メソッドの
• this は、呼び出された関数に最も近いオブジェクト

  を指します。

アロー関数: this 関数スコープで使用されるオブジェクトを指します。

アロー関数の重要な機能

アロー関数には this と引数がありません。実際には何もありません。

• アロー関数は独自の this ポインターを持たず、その 定義

  の
外部実行環境
• をキャプチャします。この値

  は、現在定義されているオブジェクト を指します。アロー関数のこの点は定義時に決定され、その後 が変更されることはありません。 call()、apply()、bind() などのメソッドを使用してこのポインタを変更することはできません。

#例 1:

# はグローバル変数 Obj を宣言し、これはグローバル関数を指します。アロー関数が配置されている場所 ドメインのオブジェクト、つまりウィンドウ オブジェクト。

例 2:

• show 関数はアロー関数であるため、次のことはできません。これを定義して、その上位レベルのスコープを見つけます。親スコープがまだアロー関数である場合は、この点に到達するまで、レイヤーごとに再度検索します。

• window.show()戻り値は window なので、この時点では window を指します;

• window.obj.show()、obj はアロー関数ではなくオブジェクトであるため、この点を見つけると停止し、これは obj にバインドされます。 window は obj を呼び出すため、obj の this も window を指します。

#5. コンストラクター内の This

#コンストラクター内の This は Example を指します。

上の図からわかるように、コンストラクター内の this は、コンストラクターの下に作成されたインスタンス

6、プロトタイプ チェーンのこの値

この値は継承メカニズム内にありますが、これは、プロトタイプ チェーン上で見つかったときに属していたオブジェクトではなく、元々属していたオブジェクト

を指します。

7. この点を変更するメソッド

1.call() call(a, b, c)

• 例:

//定义函数function fn(n1,n2){
   console.log(this);  
   console.log(n1,n2)}//调用call()方法fn.call();//=>this:window;let obj = {fn:fn};fn.call(obj);
   //=>this:obj;n1,n2:undefinedfn.call(1,2);//=>this: 1;n1=2,n2=undefined;fn.call(obj,1,2);//=>this: obj;n1=1,n2=2;
   //Call方法的几个特殊属性
   //非严格模式下fn.call(undefined);//this=>windowfn.call(null);//this=>window
   //严格模式下"use strict"fn.call(undefined);//this=>undefinedfn.call(null);//this=>null

2.apply()

は基本的に call と同じです。
• 唯一の違いは、パラメータを渡すメソッドです。

  apply は、渡す必要があるパラメータを fn()# に渡します。 ## を配列に (または配列のようなものとして) 記述すると、配列として記述されていますが、それを fn() に 1 つずつ渡すのと同じになります。 #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//call()的传参方式 fn.call(obj, 1, 2);//apply()的传参方式fn.apply(obj, [1, 2]);</pre><div class="contentsignin">ログイン後にコピー</div></div>#例:

//apply方法的使用和call方法基本相同，唯一的区别是，apply方法传参要求是数组类型的，数组内可以任意形式的数据
function fn (n1,n2){
    console.log(this);
    console.log(n1,n2)
    console.log(arguments)}let obj = {fn:fn};
    //调用apply()方法
    fn.applay(abj,[1,2]);fn.applay(abj,1,2)；
    //报错
    fn.applay(abj,[11,'apply',{a:123}]);
    //注意第二个参数必须是数组，否则会报错