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?
this
berbeda. Ini ditentukan oleh lingkungan leksikal tempat fungsi itu dibuat, yang berartithis
nilai tempat Anda membuatchopper
variabel akan menjadithis
nilai fungsi. Dengan kata lain, itu tidak akan mereferensikanchopper
objek.this
nilainya dengan membuatchopper
objek terlebih dahulu , kemudian melakukan tugas dalam fungsi yangthis
mengarah ke objek tersebut. Ini dapat diselesaikan dengan cukup rapi dengan fungsi konstruktor.console.log()
hasil dari pemanggilan metode. Berhasil.Jawaban:
Fungsi panah tidak dirancang untuk digunakan dalam setiap situasi hanya sebagai versi pendek dari fungsi kuno. Mereka tidak dimaksudkan untuk menggantikan sintaks fungsi menggunakan
function
kata kunci. Kasus penggunaan paling umum untuk fungsi panah adalah "lambda" singkat yang tidak didefinisikan ulangthis
, 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
this
konteks yang melingkupi secara leksikal,this
panah 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
function
sintaks 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
super
dalamgetOwner
, yang Anda tidak, atau jika Anda menyalingetOwner
ke 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 .sumber
Di baris ini
getOwner: => (this.owner)
seharusnya:var chopper = { owner: 'John', getOwner: () => this.owner }; //here `this` refers to `window` object.
Anda harus mendeklarasikan
this
menjadi 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());
sumber
"TypeError: Cannot read property 'owner' of undefined\n at Object.chopper.getOwner
this
dalam suatu fungsi.this
tidak selalu mengacu padawindow
. Ini mengacu pada apa pun nilai saatthis
ini di lingkungan penutup, yang mungkin atau mungkin tidakwindow
. Mungkin itu yang kamu maksud. Hanya ingin memastikan dia mengerti itu bukan nilai default.this
sekarang mengacu pada kelasvar chopperFn = function() { this.owner = 'Jhon'; this.getOwner = () => this.owner; }
.Tip cepat yang saya ikuti untuk menggunakan fungsi panah.
object.method()
sintaks. (Itu adalah fungsi yang akan menerimathis
nilai yang berarti dari pemanggilnya.)sumber
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/
sumber
Jika Anda harus menggunakan fungsi panah, Anda dapat mengubah
this
kechopper
,var chopper = { owner: "John", getOwner: () => chopper.owner };
Meskipun ini bukan praktik terbaik, saat Anda mengubah nama objek, Anda harus mengubah fungsi panah ini.
sumber
Tip lain, dalam mode ketat,
this
masih mengacu pada Window daripada undefined.(() => { "use strict"; console.log(this); // window })(); (function () { "use strict"; console.log(this); // undefined })();
sumber