ES6 でオブジェクト メソッドにアロー関数を使用できないのはなぜですか?

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

ES6 では、従来の関数構文と導入された短縮メソッド構文の両方を使用してオブジェクトでメソッドを定義できます。言語:

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

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

ただし、オブジェクト メソッドでアロー関数を使用しようとすると、制限が発生する可能性があります。たとえば、次の構文を使用するとエラーが発生します:

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

または

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

説明

アロー関数には特有の特性がありますオブジェクトとしての使用には適さないMethods.

• 字句スコープ: アロー関数は、定義されているオブジェクトではなく、周囲の字句スコープから this 値を継承します。これは、アロー関数内の this は、オブジェクト自体ではなく、オブジェクトが定義されたコンテキストを参照することを意味します。

したがって、ES6 オブジェクト内でアロー関数を定義する場合、関数内の this は、は、オブジェクトが作成されたコンテキストを参照します。たとえば、オブジェクト チョッパーをグローバル スコープ内で定義した場合、getOwner 内の this はチョッパー オブジェクトではなくグローバル スコープを参照します。

Solution

ES6 のオブジェクト メソッドを使用する場合は、従来の関数構文、または ES6 用に特別に設計された短縮メソッド構文を使用する必要があります。オブジェクト:

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

// or

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

これらのメソッドは、chopper オブジェクトを参照する正しい this バインディングを使用します。

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