JavaScript におけるこのポインティングとバインディングのルール

JavaScript では、これは関数実行のコンテキストオブジェクト、つまり現在の関数が呼び出されるオブジェクトを表すために使用される特別なキーワードです。JavaScript 関数を呼び出すにはさまざまな方法があるため、これのポイントもそれに応じて変わります。この記事では、デフォルトバインディング、暗黙的バインディング、新しいバインディング、明示的バインディング、アロー関数の this ルールなど、JavaScript での this のポインティングとバインドのルールを紹介します。

1. デフォルトのバインディング

デフォルトのバインディングは、独立した関数呼び出しの場合、これがグローバルオブジェクト (ブラウザ環境のウィンドウオブジェクト、厳密モードでは未定義) を指すことを意味します。例えば：

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

foo(); // 在浏览器环境下输出window对象，在严格模式下输出undefined

マルチレイヤ呼び出しに関係なく、デフォルトの呼び出しメソッドが使用されている限り、このポイントはグローバルオブジェクトになります。

2. 暗黙的なバインディング

暗黙的なバインディングとは、オブジェクトを通じて呼び出すときに、関数を呼び出したオブジェクトを指すことを意味します。例えば：

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

var obj = {
  name: "sss",
  foo: foo
};

obj.foo(); // this指向obj对象

呼び出されるレイヤーの数に関係なく、呼び出されるメソッドがオブジェクトを通じて開始される限り、これは関数を呼び出したオブジェクトを指します。

3. 新しいバインディング

JavaScript では関数をコンストラクタとして使用することができ、new キーワードを指定して関数を呼び出すと次のような処理が行われます。

新しいオブジェクトを作成します。
この新しいオブジェクトはプロトタイプ接続として実行されます。
この新しいオブジェクトは、関数呼び出しの this にバインドされます (this のバインドはこのステップで行われます)。
関数が他のオブジェクトを返さない場合、式はこの新しいオブジェクトを返します。

例えば：

function Person(name) {
  console.log(this);
  this.name = name;
}

var p = new Person("aaa");
console.log(p); // p为新创建的Person对象

4. 明示的なバインディング

オブジェクト内に関数参照を含めたくないが、同時にオブジェクトに対して必須の呼び出しを行いたい場合は、、、、およびメソッドを使用callできapplyますbind。

4.1`apply`方法

applyこのメソッドはthis関数のオブジェクトをバインドするために使用され、関数のオブジェクトはthis渡されたオブジェクトにバインドされます。このメソッドによって渡されるパラメータは、オブジェクトとパラメータの配列です。

function foo(name, age, height) {
  console.log(this);
  console.log("打印参数：", name, age, height);
}

var obj = {
  name: "zzz"
};

foo.apply(obj, ["aaa", 30, 1.98]); // this指向obj对象

4.2`call`方法

callメソッドは関数オブジェクトをバインドするためにも使用されますthisが、パラメーターは 1 つずつ渡す必要があります。

function foo(name, age, height) {
  console.log(this);
  console.log("打印参数：", name, age, height);
}

var obj = {
  name: "zzz"
};

foo.call(obj, "aaa", 30, 1.98); // this指向obj对象

4.3`apply`合計`call`の最初のパラメータ

applyとcallの最初のパラメータはthis、オブジェクトをバインドするために使用されます。オブジェクトは、window、Number、Stringオブジェクトなど、任意のオブジェクトにすることができます。

function foo(name, age, height) {
  console.log(this);
}

var obj = {
  name: "zzz"
};

foo.apply(obj, "aaa", 30, 1.98); // this指向obj对象
foo.call(window); // this指向window对象
foo.call(123); // this指向Number对象
foo.call("string"); // this指向String对象