1. ホーム
  2. javascript

[解決済み] ES6オブジェクトのメソッド:アロー関数の使用

2022-08-03 09:10:41

質問

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オブジェクトの内部でfat-arrowメソッドを使用することはできないのでしょうか?

どのように解決するのですか?

アロー関数は、単に昔ながらの関数の短縮版として、あらゆる場面で使われるように設計されているわけではありません。を使った関数の構文を置き換えるためのものではありません。 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;
    }
};

(両者には小さな違いがありますが、重要なのはあなたが supergetOwner をコピーした場合、あるいは getOwner を別のオブジェクトにコピーした場合)。

es6 メーリングリストでは、似たような構文を持つ矢印関数にひねりを加えることについての議論がありました。 this . しかし、この提案は、単なるシンタックスシュガーであり、人々が数文字をタイプするのを節約することを可能にし、既存の関数構文に対する新しい機能を提供しないため、評判が良くありませんでした。トピックを参照してください。 非拘束矢印関数 .