これ
関数が実行されると、これは常に関数を呼び出したオブジェクトを指します。これがどこを指しているかを判断するには、実際にこれが誰に属しているかを判断する必要があります。
書籍「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
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
これは設計ミスだと言われています。
3) コンストラクター内のこれ: 新しいオブジェクト を指します
js では、new キーワードを使用してコンストラクターを呼び出します。これは新しいオブジェクトにバインドされます。
var SomeClass = function(){ this.value = 100; } var myCreate = new SomeClass(); console.log(myCreate.value); // 输出100
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 }