javascript_javascript スキルでこれを使用する 4 つの方法

これ

関数が実行されると、これは常に関数を呼び出したオブジェクトを指します。これがどこを指しているかを判断するには、実際にこれが誰に属しているかを判断する必要があります。

書籍「JavaScript 言語の本質」では、これが登場するシナリオは、簡単に言うと次の 4 つのカテゴリに分類されます。

オブジェクトがある場合は、呼び出し元のオブジェクトをポイントします

オブジェクトを呼び出さずにグローバル オブジェクトをポイントします
new で構築され、新しいオブジェクトを指します
apply、call、bind を通じて this の参照を変更します。

1) 関数にそれが属するオブジェクトがある場合: 関数が属するオブジェクトを指します

関数にそれが属するオブジェクトがある場合、その関数は通常、 . 式を通じて呼び出されます。この場合、これは当然、その関数が属するオブジェクトを指します。たとえば、次の例:

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100

 // 输出 { value: 100, getValue: [Function] }，
 // 其实就是 myObject 对象本身
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() はオブジェクト myObject に属し、myOjbect によって呼び出されるため、これはオブジェクト myObject を指します。

2) 関数には所有オブジェクトがありません。グローバル オブジェクト を指します。

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

上記のコード ブロックでは、foo 関数が getValue の関数本体で定義されていますが、実際には getValue にも myObject にも属しません。 foo はどのオブジェクトにもバインドされていないため、呼び出されるとき、その this ポインタはグローバル オブジェクトを指します。

これは設計ミスだと言われています。

3) コンストラクター内のこれ: 新しいオブジェクト を指します

js では、new キーワードを使用してコンストラクターを呼び出します。これは新しいオブジェクトにバインドされます。

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); // 输出100

ところで、js では、コンストラクター、通常の関数、オブジェクトのメソッド、クロージャーの間に明確な境界はありません。境界線はすべて人間の心の中にあります。

4) 呼び出しを適用して呼び出し、バインドをバインドします: バインドされたオブジェクトを指します

apply() メソッドは 2 つのパラメーターを受け取ります。1 つは関数が実行されるスコープで、もう 1 つはパラメーター配列 (引数) です。

call() メソッドの最初のパラメーターの意味は、他のパラメーターを 1 つずつリストする必要があることを除いて、apply() メソッドの意味と同じです。

簡単に言うと、call のメソッドは通常の関数の呼び出し方法に近いですが、apply では Array の形式で配列を渡す必要があります。それらは交換可能です。

var myObject = {value: 100};

var foo = function(){
 console.log(this);
};

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

この記事の内容は以上です。皆さんに気に入っていただければ幸いです。