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

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

JavaScript では、「this」キーワードは現在のオブジェクトを参照します関数が呼び出されたもの。ただし、「this」のバインドは、特にオブジェクト リテラル内で使用される場合に混乱を招く可能性があります。

オブジェクト リテラル内では、「this」の値はオブジェクト自体にバインドされず、グローバル オブジェクトにバインドされます (ブラウザのウィンドウ)。これにより、次のコードに見られるように、予期しない動作が発生する可能性があります:

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

この例では、「this」がグローバル オブジェクトを参照しているため、「this.foo」は MyDate のコンストラクター内で未定義です。 "foo" という名前のプロパティがありません。

この問題を解決するには、bind() を使用してオブジェクト リテラル内で "this" を明示的にバインドします。 method:

var obj4 = {};
obj4.foo = new Date();
obj4.bar = new MyDate(obj4.foo.bind(obj4));

これにより、MyDate のコンストラクター内の "this" が正しいオブジェクト (obj4) を参照するようになります。

あるいは、アロー関数を使用して "this" をバインドすることもできます。オブジェクトへ:

var obj3 = {
  foo: new Date(),
  bar: new MyDate(() => this.foo)
};

アロー関数では、「this」は定義時に周囲のスコープにバインドされます。 case はオブジェクト自体です。

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