ES6 のアロー関数とメソッド宣言: アロー関数で「this」が期待どおりに機能しないのはなぜですか?-jsチュートリアル-php.cn

ES6 のアロー関数とメソッド宣言: アロー関数で「this」が期待どおりに機能しないのはなぜですか?

Linda Hamilton

リリース： 2024-12-15 13:41:09

オリジナル

292 人が閲覧しました

Arrow Functions vs. Method Declarations in ES6: Why Doesn't `this` Work as Expected in Arrow Functions?

ES6 のアロー関数とメソッド宣言

ES6 を詳しく調べると、次の問題が発生する可能性があります:

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
};

person.shout(); // Prints "my name is "

ログイン後にコピー

目的は、関数が person オブジェクト内の name プロパティにアクセスできるようにすることです。ただし、コンソールには「my name is.」のみが表示されます。

説明:

この動作は、ES6 のアロー関数の独特の性質から発生します。アロー関数は、従来の関数宣言とは異なり、this キーワードをバインドしません。代わりに、周囲のスコープ (この場合はグローバルスコープ) から this バインディングを継承します。

解決策:

この問題に対処するには、次のようにします。 ES6 メソッド宣言パターンを使用して、次の目的のバインディングを保持します:

var person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};

person.shout(); // Prints "my name is jason"

ログイン後にコピー

以上がES6 のアロー関数とメソッド宣言: アロー関数で「this」が期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。