web-dev-qa-db-ja.com

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)
};

メソッドがthisにアクセスできないことを示すエラーメッセージが表示されます。これは単なる構文の問題ですか、それともES6オブジェクト内でファットパイプメソッドを使用できませんか？

javascriptecmascript-6ecmascript-harmony
58
fox

矢印関数は、単に旧式の関数の短縮バージョンとしてあらゆる状況で使用されるように設計されていません。 functionキーワードを使用して関数構文を置き換えることは意図されていません。矢印関数の最も一般的な使用例は、thisを再定義しない短い「ラムダ」です。関数にコールバックとして関数を渡すときによく使用されます。

あなたが見つけたように、矢印関数は字句的に囲んでいるコンテキストのthisを閉じるので、矢印関数を使用してオブジェクトメソッドを書くことはできません。矢印内のthisはオブジェクトを定義した場所でしたと言うことです：

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

オブジェクトにメソッドを記述したい場合は、従来のfunction構文、またはES6で導入されたメソッド構文を単に使用する必要があります。

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

// or

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

（それらの間にはわずかな違いがありますが、superでgetOwnerを使用している場合にのみ重要ですが、getOwnerは別のオブジェクトにコピーします。）

Es6メーリングリストで、同様の構文を持っているが独自のthisを使用した矢印関数のツイストに関する議論がありました。ただし、これは単なる構文糖であり、少数の文字を入力する手間を省くことができ、既存の関数構文に新しい機能を提供しないため、この提案はあまり受け入れられませんでした。トピック 非バインド矢印関数 を参照してください。

100
user663031

この行では、getOwner: => (this.owner)は次のようになります。

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

thisを関数に宣言する必要があります。

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

または：

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());
8
Walter Chapilliquen - wZVanG