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オブジェクト内でファットパイプメソッドを使用できませんか？

矢印関数は、単に昔ながらの関数の短いバージョンとしてすべての状況で使用されるように設計されているわけではありません。これらは、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。ただし、この提案は、単なるシンタックスシュガーであり、数文字の入力を節約でき、既存の関数シンタックスに新しい機能がないため、あまり受け入れられませんでした。トピックのバインドされていない矢印関数を参照してください。

この行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());

矢印関数を使用するために従う簡単なヒント。

• object.method()構文を使用するメソッドには、矢印以外の関数を使用します。（これらは意味のあるものを受け取る関数ですthis、呼び出し元から値。）
• 他のほとんどすべてに矢印機能を使用します。

この内側の矢印関数は、オブジェクトのコンテキストを反映していません。代わりに、オブジェクトメソッドが呼び出されるコンテキストを提供します。

これを確認してください。これにより、矢印を使用する場合と使用しない場合についての洞察が得られます。 https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

あなたは矢印の機能を使用する必要がある場合は、変更することができますthisしchopper、

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

これはベストプラクティスではありませんが、オブジェクト名を変更するときは、この矢印関数を変更する必要があります。

厳密モードのもう1つのヒントは、this未定義ではなくウィンドウを参照しています。

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();