ES6 でアロー関数をオブジェクト メソッドとして使用できますか?

ES6 オブジェクトのメソッド: 従来の関数の使用

ES6 では、オブジェクト メソッドは 2 つの方法で定義できます。従来の関数構文を使用するか、または短縮メソッドの構文。どちらのアプローチも有効ですが、アロー関数をオブジェクト メソッドにも使用できるかどうかについては議論がありました。

当初、アロー関数は従来の関数の簡潔な代替として使用できるように見えました。ただし、構文エラーが表面化し、アロー関数がオブジェクトの this 参照にアクセスできないことが示されました。

理由: アロー関数における this のコンテキスト

アロー関数は次のものと異なります。通常の関数は、語彙的に囲まれたスコープから this コンテキストを継承します。これは、アロー関数内の this は、メソッドが定義されているオブジェクトではなく、周囲のコンテキストの this を参照することを意味します。

オブジェクト メソッドの結果

オブジェクト メソッドのコンテキストでは、この動作は問題を引き起こします。オブジェクト メソッドは、それを含むオブジェクトを操作するように設計されています。したがって、this 参照はそのオブジェクトを指している必要があります。ただし、アロー関数には、この要件を満たすために必要な this バインディングがありません。

オブジェクト メソッドの推奨構文

このコンテキストにおけるアロー関数の制限を考慮すると、オブジェクト メソッドを定義するときは、従来の関数構文または ES6 メソッド構文を使用することをお勧めします。これにより、メソッド内の this 参照が、それが属するオブジェクトを正しく参照することが保証されます。

従来の関数構文の例:

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

例ES6 メソッド構文:

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

これらの構文は正しい this を提供しますオブジェクト メソッド内でバインドし、意図したとおりに機能できるようにします。アロー関数は他のシナリオでは利点がありますが、適切な this 参照が重要であるオブジェクト メソッドの定義には適していません。

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