これに対するJavaScriptでの詳細な回答（グラフィックチュートリアル）

JavaScript の関数の this オブジェクトは、関数が実行されるスコープです (たとえば、関数が Web ページのグローバル スコープで呼び出される場合、this オブジェクトはウィンドウを参照します)。

JavaScript のこれは、Java などのオブジェクト指向言語のこれとは大きく異なります。bind()、call()、および apply() 関数は、この柔軟性をさらに拡張します。

読みやすさを確保するために、この記事では直訳ではなく意訳を使用しています。また、この記事の著作権は原著者に帰属し、翻訳は学習のみを目的としています。

JavaScript キーワードを十分に理解していないと、予期せぬ落とし穴に陥ることがあります。ここでは、これが実際に何を指すのかを判断するのに役立つ 5 つの一般的なルールをまとめます。すべての状況がカバーされているわけではありませんが、日常のほとんどの状況はこれらのルールを使用して正しく推測できます。

this の値は通常、関数の実行環境によって決まります。つまり、関数の呼び出し方法に依存します。
同じ関数が呼び出されるたびに、これは異なるオブジェクトを指す可能性があります。

グローバル オブジェクト。 (グローバル オブジェクト)

Chrome ブラウザの開発者パネル (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) を開き、次のように入力します:

console.log(this); console.log(this);

看看输出了什么？

// Window {}

window对象！ 因为在全局作用域下，this指向全局对象。在浏览器中全局对象就是window对象。
为了让你更加清楚理解为什么this会指向window对象，我们来看另外一个例子：

var myName = 'Brandon';
我们可以通过在控制台输入myName来访问其值：

myName
// 输出 'Brandon'

其实，所有在全局定义的变量都绑定到window对象。我们来做如下测试：

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

现在我们将this放到函数内部，看看有何效果。

function test(){
 return this;
}
test();

你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部，默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章，你就会豁然开朗。
注意：如果在strcit模式下，上面的例子中this为undefined。

声明的对象 (Declared Object)

当this关键字在一个声明对象内部使用，其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题：

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 输出 'John Smith'

在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此，this指向person。

为了更好的描述this实际上是指向person对象的，你可以拷贝如下代码到浏览器控制台，将this打印出来。

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

我们接下来看一个更复杂的例子：

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

在这里我们有嵌套的对象，在这个时候，this分别指向谁呢？ 我们将其打印出来看一看：

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

你会发现满足我们前面所描述的规则：其值会被绑定到调用this的函数的最近的父对象。

new关键字

当使用new关键字构建一个新的对象，this会绑定到这个新对象。我们来看一个例子：

function Car(make, model) {
 this.make = make;
 this.model = model;
};

根据第一条规则，你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量，Car函数中的this将会绑定一个新的空对象，然后初始化this.make和this.model的值。

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

call, bind, 和apply

我们可以显示的在call()，bind()，apply()中设置this的绑定对象。这三个函数很类似，但是我们需要注意它们微小的区别。

我们来看一个例子：

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

add函数输出NaN, 因为this.a和this.b未定义。

现在我们引入对象，并且使用call()和apply()来调用：

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 输出 10
add.apply(ten, [3,4]);
// 输出 10

当我们使用add.call()，第一个参数是this需要绑定的对象，剩下的是add函数本来的参数。
因此，this.a指向ten.a,this.b指向ten.b。add.apply()也类似，除了第二个参数是一个数组，用于存储add函数的参数。

bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

执行:

small.go(2, 3, 4);
// 输出 10

如果我们想使用large.a的值，而不是small.a呢？ 我们可以使用call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢？ 我们可以使用bind:

var bindTest = small.go.bind(large, 2);

出力とは何ですか?

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

ウィンドウオブジェクト! グローバル スコープでは、これはグローバル オブジェクトを指すためです。ブラウザ内のグローバル オブジェクトはウィンドウ オブジェクトです。

これが window オブジェクトを指す理由をより明確に理解するために、別の例を見てみましょう:

var myName = 'Brandon';

コンソールに myName と入力すると、その値にアクセスできます:

bindTest(3, 4);
// 输出 109

実際、グローバルに定義されたすべての変数は window オブジェクトにバインドされます。次のテストを行ってみましょう: 🎜rrreee🎜 これを関数内に入れて、その効果を見てみましょう。 🎜rrreee🎜これがまだグローバル ウィンドウ オブジェクトを指していることがわかります。 this キーワードは宣言されたオブジェクト内にないため、デフォルトでグローバル ウィンドウ オブジェクトになります。これはほとんどの初心者にとっては理解するのが少し難しいかもしれません。この記事を読むと、突然理解できるようになります。 🎜注: strcit モードの場合、上記の例ではこれは未定義です。 🎜🎜🎜宣言されたオブジェクト🎜🎜🎜 this キーワードが宣言されたオブジェクト内で使用される場合、その値は、this を呼び出す関数の最も近い親オブジェクトにバインドされます。この問題を説明するために例を使用してみましょう: 🎜rrreee🎜 これが宣言されたオブジェクト person の完全な関数で使用される場合、これを呼び出す完全な関数の最も近い親オブジェクトは person であるため、これは person を指します。 🎜🎜これが実際に person オブジェクトを指していることをよりわかりやすく説明するには、次のコードをブラウザのコンソールにコピーして、これを出力します。 🎜rrreee🎜 次に、より複雑な例を見てみましょう: 🎜rrreee🎜 ここにはネストされたオブジェクトがありますが、これは誰を指しているのでしょうか。 これを印刷して見てみましょう: 🎜rrreee🎜 前に説明したルールが満たされていることがわかります。その値は、これを呼び出した関数の最も近い親オブジェクトにバインドされます。 🎜🎜🎜new キーワード🎜🎜🎜 new キーワードを使用して新しいオブジェクトを構築すると、これは新しいオブジェクトにバインドされます。例を見てみましょう: 🎜rrreee🎜 最初のルールに基づいて、これがグローバル オブジェクトを指していると推測できます。ただし、 new キーワードを使用して新しい変数を宣言すると、Car 関数の this は新しい空のオブジェクトにバインドされ、this.make と this.model の値が初期化されます。 🎜rrreee🎜🎜call、bind、apply🎜🎜🎜 call()、bind()、apply() で this のバインディング オブジェクトを明示的に設定できます。これら 3 つの機能は非常に似ていますが、微妙な違いに注意する必要があります。 🎜🎜🎜🎜例を見てみましょう: this.a と this.b が未定義であるため、🎜rrreee🎜add 関数は NaN を出力します。 🎜🎜ここでオブジェクトを導入し、call() と apply() を使用して呼び出します。 🎜rrreee🎜 add.call() を使用する場合、最初のパラメータはバインドする必要があるオブジェクトで、残りは関数自体のパラメータを追加します。 🎜したがって、this.a は ten.a を指し、this.b は ten.b を指します。 add.apply() は、2 番目のパラメーターが add 関数のパラメーターを格納する配列であることを除いて似ています。 🎜🎜bind() 関数は call() に似ていますが、bind() 関数はすぐには呼び出されません。 bind() 関数は関数を返し、これをバインドします。次に、bind() 関数のアプリケーション シナリオを理解するのに役立つ例を使用してみましょう: 🎜rrreee🎜実行: 🎜rrreee🎜 small.a の代わりにlarge.a の値を使用したい場合はどうすればよいでしょうか? call/apply:🎜rrreee🎜を使用できますが、これら 3 つのパラメータにどのような値を渡すべきかまだわからない場合はどうすればよいでしょうか? binding を使用できます:🎜🎜varbindTest = small.go.bind(large, 2);🎜🎜 コンソールの下にbindTestを出力すると、次のように表示されます: 🎜rrreee🎜注: この関数はこれをラージ オブジェクトにバインドし、最初のパラメータに渡します。 b.したがって、次に残りのパラメータを渡す必要があります: 🎜rrreee🎜 上記は、私が皆さんのためにまとめたものであり、将来的に皆さんのお役に立てば幸いです。 🎜🎜関連記事: 🎜

JSでのthisの指定とcallとapplyの関数（画像とテキストのチュートリアル）

JSでのthisの指定とcallとapplyの関数_基礎知識

self , PHPで staticと$thisの違いとlate static bindingの詳しい解説

以上がこれに対するJavaScriptでの詳細な回答（グラフィックチュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。