Metode dalam objek ES6: menggunakan fungsi panah

Di ES6, keduanya legal:

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

dan, sebagai singkatan:

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

Apakah mungkin untuk menggunakan fungsi panah baru juga? Dalam mencoba sesuatu seperti

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

atau

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

Saya mendapatkan pesan kesalahan yang menunjukkan bahwa metode tersebut tidak memiliki akses ke this. Apakah ini hanya masalah sintaks, atau Anda tidak dapat menggunakan metode pipa lemak di dalam objek ES6?

Fungsi panah tidak dirancang untuk digunakan dalam setiap situasi hanya sebagai versi pendek dari fungsi kuno. Mereka tidak dimaksudkan untuk menggantikan sintaks fungsi menggunakan functionkata kunci. Kasus penggunaan paling umum untuk fungsi panah adalah "lambda" singkat yang tidak didefinisikan ulang this, sering digunakan saat meneruskan fungsi sebagai callback ke beberapa fungsi.

Fungsi panah tidak dapat digunakan untuk menulis metode objek karena, seperti yang Anda temukan, karena fungsi panah dekat dengan thiskonteks yang melingkupi secara leksikal, thispanah di dalam adalah yang ada saat ini di mana Anda mendefinisikan objek. Artinya:

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

Dalam kasus Anda, ingin menulis metode pada objek, Anda cukup menggunakan functionsintaks tradisional , atau sintaks metode yang diperkenalkan di ES6:

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

// or

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

(Ada perbedaan kecil antara mereka, tapi mereka hanya penting jika Anda menggunakan superdalam getOwner, yang Anda tidak, atau jika Anda menyalin getOwnerke obyek lain.)

Ada beberapa perdebatan di milis es6 tentang twist pada fungsi panah yang memiliki sintaks yang mirip tetapi dengan fungsinya sendiri this. Namun, proposal ini diterima dengan buruk karena itu hanyalah gula sintaks, memungkinkan orang untuk menyimpan pengetikan beberapa karakter, dan tidak menyediakan fungsionalitas baru atas sintaks fungsi yang ada. Lihat topik fungsi panah tak terikat .

Di baris ini getOwner: => (this.owner)seharusnya:

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

Anda harus mendeklarasikan thismenjadi sebuah fungsi:

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

Atau:

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

Tip cepat yang saya ikuti untuk menggunakan fungsi panah.

• Gunakan fungsi non-panah untuk metode yang akan menggunakan object.method()sintaks. (Itu adalah fungsi yang akan menerima thisnilai yang berarti dari pemanggilnya.)
• Gunakan fungsi panah untuk hampir semua hal lainnya.

Fungsi panah dalam ini tidak mencerminkan konteks objek. Sebaliknya itu memberikan konteks di mana metode objek dipanggil.

Periksa ini, Ini memberikan beberapa wawasan tentang kapan harus menggunakan panah dan kapan tidak. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Jika Anda harus menggunakan fungsi panah, Anda dapat mengubah thiske chopper,

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

Meskipun ini bukan praktik terbaik, saat Anda mengubah nama objek, Anda harus mengubah fungsi panah ini.

Tip lain, dalam mode ketat, thismasih mengacu pada Window daripada undefined.

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

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