「this」キーワードは JavaScript オブジェクト リテラルでどのように動作しますか?

JavaScript オブジェクト リテラルの "this" キーワードを理解する

JavaScript のオブジェクト リテラル内では、"this" キーワードの動作はまったく異なる場合があります他のプログラミング言語から。ここでは、その仕組みについて包括的に説明します。

呼び出し時バインディング

他の遅延バインディング言語とは異なり、JavaScript はコンパイル時ではなく呼び出し時に「this」をバインドします。時間または実行時間。これは、「this」の値が関数の呼び出し方法に依存することを意味します。

バインディング ルール

JavaScript オブジェクト リテラルの "this" のバインディング ルールは次のとおりです。

1. コンストラクター呼び出し: 関数が「new」キーワードを使用して呼び出すと、「this」キーワードは新しく作成されたオブジェクトにバインドされます。
2. オブジェクト メソッド: オブジェクト メソッドとして呼び出された場合、「this」はオブジェクトにバインドされます。メソッドが属する、最後のドットの前のオブジェクトです。
3. グローバル スコープ: 関数の外側、または if関数はオブジェクト コンテキストなしで呼び出され、「this」はグローバル オブジェクトにバインドされ、「window」dalam Web ブラウザを無効にします。
4. イベント ハンドラー: イベント ハンドラーでは、通常、「this」はイベントをトリガーした DOM 要素にバインドします。
5. Call() および apply()メソッド: 「call()」および「apply()」メソッドを使用すると、任意のオブジェクトに「this」を明示的に割り当てることができ、あるオブジェクトが別のオブジェクトのメソッドにアクセスできるようになります。
6. Function.bind(): 「Function.bind()」メソッドを使用して、「this」を特定のオブジェクトに明示的にバインドし、目的の関数インスタンスを作成することもできます。 binding.

使用例の例

さまざまなバインド ルールを説明するには:

const obj = {
  foo: "Foo",
  bar() {
    console.log(this.foo); // "Foo" - "this" refers to the object
  },
};

obj.bar(); // Calls the method, binding "this" to the object

function MyDate(date) {
  this.date = date;
}

const obj1 = {
  foo: new Date(),
  bar: new MyDate(this.foo), // Error: this.foo is undefined
};

const obj2 = {
  foo: new Date(),
  bar: new MyDate(obj2.foo), // Works: "this" refers to obj2
};

最初の例では、このメソッドはオブジェクトメソッドとして呼び出されるため、「this」はオブジェクト「obj」を参照します。 2 番目の例では、関数がオブジェクト コンテキストなしで呼び出されるため、「this」は「obj1」で定義されていません。 「obj2」では、関数が「this」オブジェクトで明示的に呼び出されるため、「this」は「obj2」を参照します。

以上が「this」キーワードは JavaScript オブジェクト リテラルでどのように動作しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。