ES6 オブジェクト メソッドを定義するときにアロー関数を避けるべき理由は何ですか?

ES6 オブジェクトでのアロー関数の使用

ES6 では、オブジェクト メソッドを定義する方法が 2 つあります。従来の関数構文を使用する方法と、短縮表現を使用する方法です。形状。これらのメソッドはどちらも有効です:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

ただし、オブジェクト メソッドでアロー関数を使用すると、話が異なります。これについて詳しく見てみましょう。

アロー関数とオブジェクト メソッド

アロー関数は、オブジェクト メソッドの定義には適していません。これは、周囲の字句コンテキストの this 値を継承し、オブジェクト内の this 値と同じではない可能性があるためです。

たとえば、次のコードを考えてみましょう。

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

この例では、getOwner メソッド内の this は、chopper オブジェクトではなく、window オブジェクト (または strict モードの globalThis オブジェクト) を参照します。結果として、 this.owner 式は未定義を返し、エラーをスローします。

従来の関数構文と ES6 メソッド構文

オブジェクト メソッドを定義する場合、次のようになります。従来の関数構文または ES6 メソッド構文を使用することをお勧めします。どちらも、この値を明示的に定義します。

従来の関数構文を使用した例を次に示します:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

ES6 メソッド構文を使用した例を次に示します:

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

これらのメソッドは this キーワードを使用して、現在のオブジェクトを参照し、 this.owner 式が正しい値を返すことを確認します。 value.

結論

アロー関数は単純な関数を定義するための簡潔な構文を提供しますが、ES6 のオブジェクト メソッドとして使用するのには適していません。この目的のために、従来の関数構文または ES6 メソッド構文に固執することをお勧めします。どちらも、オブジェクトのメソッドを定義するためのより明確で信頼性の高い方法を提供します。

以上がES6 オブジェクト メソッドを定義するときにアロー関数を避けるべき理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。