これは何ですか？ 1 つの記事でこれを数秒で理解できます

この記事の内容は、これは何ですか？この記事は、これを数秒で理解できるものであり、困っている人は参考にしていただければ幸いです。日々の開発では、これによって指摘されたバグに遭遇することがよくありますが、その後の開発作業で寄り道を避けるために、突然目覚めて痛みから学ぶまで、これをまとめました。

注: この記事ではブラウザ環境についてのみ説明します。

1: グローバル実行

console.log（this）；
// Window

グローバル スコープでは、これが現在のグローバル オブジェクト Window を指していることがわかります。

2: 関数

1での実行。非厳密モード

function func （） {
console.log（this）；
}
func（）；
// Window

2。厳密モード

"use strict";
function func （） {
console.log（this）；
}
func（）；
// undefined

3: オブジェクトとしてのメソッド呼び出し

##関数がオブジェクトのメソッドとして呼び出される場合、これは現在のオブジェクト obj を指します:

var obj = {
name: 'kk',
func: function （） {
console.log（this.name）；
}
}
obj.func（）；
// kk

If のメソッドオブジェクトは変数に割り当てられており、このメソッドを呼び出すと、これは Window を指します:

var obj = {
name: 'kk',
func: function （） {
console.log（this）；
}
}
var test = obj.func;
test（）；
// Window

Four: コンストラクターとして使用されます

JS で、クラスの場合、いくつかのコンストラクターを定義し、コンストラクターを呼び出すときに新しいキーワードを追加する必要があります。

function Person （name） {
this.name = name;
console.log（this）；
}
var p1 = new Person（'kk'）；
// Person

現時点では、これはコンストラクターが呼び出されたときにインスタンス化されるオブジェクトを指します。

もちろん、コンストラクターは実際には関数です。コンストラクターが通常の関数として呼び出された場合、これは Window:

function Person （name） {
this.name = name;
console.log（this）；
}
var p2 = Person（'MM'）；
// Window

5: Use in timers # を指します。 ##

setInterval（function （） {
console.log（this）；
}, 2000）
// Window
setTimeout（function （） {
console.log（this）；
}, 0）
// Window

特別なポインタがない場合 (ポインタの変更については、以下を参照してください: this のポインタを変更する方法)、setInterval および setTimeout のコールバック関数内の this のポインタはすべて Window です。これは、JS タイマー メソッドが Window の下に定義されているためです。

6: アロー関数

グローバル環境で呼び出される:

var func = （） => {
console.log（this）；
}
func（）；
// Window

オブジェクトの関数として呼び出される:

var obj = {
name: 'hh',
func: function （） {
setTimeout（function （） {
console.log（this）；
}, 0）
}
}
obj.func（）；
// Window
var obj = {
name: 'hh',
func: function （） {
setTimeout（（） => {
console.log（this）；
}, 0）
}
}
obj.func（）；
// obj

いいえ、通常の関数がオブジェクトの関数として呼び出され、これが Window を指し、アロー関数がオブジェクトの関数として呼び出され、これが定義されているオブジェクトを指し、これが func にあることを見つけるのは困難です。 、つまりオブジェクトです。

アロー関数内の this の値は、関数の外部にある非アロー関数の this の値に依存します。また、this の値は call()、apply()、bind() を通じて変更することはできません。方法。

7: 呼び出し、適用、バインド

call:

fun.call(thisArg[, arg1[, arg2[, …]]] )

最初のパラメータは指定された実行関数のコンテキストであり、次のパラメータは関数を実行するために渡す必要があるパラメータです。 ##apply:

fun.apply(thisArg, [argsArray])

最初のパラメータは、指定された実行関数内の this のコンテキストです。 2 番目のパラメータは配列であり、実行関数のパラメータに渡されます (呼び出しとは異なります)。

bind:

var foo = fun.bind (thisArg[, arg1[, arg2[, …]]]);

関数は実行されませんが、この新しい関数には this のコンテキストが割り当てられ、実行するために渡す必要があるパラメーターは次のとおりです。関数;

例を見てみましょう :

function Person（name, age） {
this.name = name;
this.age = age;
console.log（this）；
}
var obj = {
name: 'kk',
age: 6
};
Person.call（obj, 'mm', 10）；
// obj，{name: "mm", age: 10}
Person.apply（obj, ['mm', 10]）；
// obj，{name: "mm", age: 10}
var p1 = Person.bind（obj, 'mm', 10）
var p2 = new p1（）；
// Person {name: "mm", age: 10}

この例では、call、apply、bind のすべてが obj を指しており、これらはすべて正常に実行できます。 apply は関数をすぐに実行します。call と apply の違いは渡されるパラメータにあり、call は複数のパラメータを含む配列を受け取ります。bind は関数をすぐに実行せず、関数を返します。p2 は実行する必要があります。結果を返すために実行されると、bind は複数のパラメータ リストを受け取ります。

アプリケーション: このポインティングを変更する方法

なぜこのモジュールについて説明するかというと、上で説明したこのポインティングの問題をより深く理解できるようにするためです。重要な JS 関数の 3 つのメソッド (call、apply、bind の使用) をより深く理解します。また、実際のプロジェクト開発では、this ポインターを変更する必要がある状況によく遭遇します。

メソッドを見てみましょう:

1. es6

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// Uncaught TypeError: this.func1 is not a function

のアロー関数を使用します。この関数はこの時点でエラーが報告されます。 setTimeout は Window を指しますが、Window オブジェクトには func1 関数がありません。これをアロー関数に変更しましょう。

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（（） => {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

現時点では、エラーは報告されません。アロー関数の this の値は、関数の外側にある非アロー関数の this の値に依存するためです。 func2 の this の値、つまり obj です。

2. 関数内で _this = this を使用します

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
let _this = this;
setTimeout（function （） {
_this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

この時点では、func2 も正常に実行できます。 func2 では、まず var _this = this を設定します。ここで、this は func2 を指すオブジェクト obj です。func2 の setTimeout が wi​​ndow によって呼び出されないようにするため、setTimeout の this は window になります。 this (変数 obj を指す) を変数 _this に代入し、func2 で _this を使用するときにオブジェクト obj を指すようにします。

3. call、apply、bind を使用する

call:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.call（obj）， 1000）；
}
};
obj.func2（）；
// kk

apply:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.apply（obj）， 1000）；
}
};
obj.func2（）；
// kk
bind:
var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.bind（obj）（）， 1000）；
}
};
obj.func2（）；
// kk

call、apply、bind はすべてコンテキストを変更できます。 this のオブジェクトであるため、エラーは報告されず、正常に実行できます。

具体的な理由は、上記の 7 番目のポイント、呼び出し、適用、バインドで確認できます。

4. new はオブジェクトをインスタンス化します

上記と同様: 4 番目のポイントはコンストラクターとして使用されます。

上記は、これは何ですか? 1 つの記事で、この概要全体を数秒で理解できます。JavaScript チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がこれは何ですか？ 1 つの記事でこれを数秒で理解できますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。