Tidak puas dengan jawaban yang lain. Jawaban suara teratas pada 2019/3/13 secara faktual salah.
Versi singkat dari =>artinya adalah pintasan yang menulis fungsi DAN untuk mengikatnya ke arusthis
const foo = a => a * 2;
Secara efektif merupakan jalan pintas untuk
const foo = function(a) { return a * 2; }.bind(this);
Anda dapat melihat semua hal yang dipersingkat. Kami tidak butuh function, juga returntidak.bind(this) atau bahkan kawat gigi atau tanda kurung
Contoh fungsi panah yang sedikit lebih panjang mungkin
const foo = (width, height) => {
const area = width * height;
return area;
};
Menunjukkan bahwa jika kita ingin banyak argumen ke fungsi kita perlu tanda kurung dan jika kita ingin menulis lebih dari satu ekspresi kita perlu tanda kurung kurawal dan eksplisit return .
Sangat penting untuk memahami .bindbagian itu dan ini adalah topik besar. Ini ada hubungannya dengan apa thisartinya dalam JavaScript.
SEMUA fungsi memiliki parameter implisit yang disebut this. Bagaimanathis diatur ketika memanggil suatu fungsi tergantung pada bagaimana fungsi itu dipanggil.
Mengambil
function foo() { console.log(this); }
Jika Anda memanggilnya dengan normal
function foo() { console.log(this); }
foo();
this akan menjadi objek global.
Jika Anda dalam mode ketat
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Itu akan terjadi undefined
Anda dapat mengatur thissecara langsung menggunakan callatauapply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
Anda juga dapat mengatur thissecara implisit menggunakan operator titik.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Masalah muncul ketika Anda ingin menggunakan fungsi sebagai panggilan balik atau pendengar. Anda membuat kelas dan ingin menetapkan fungsi sebagai panggilan balik yang mengakses instance kelas.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Kode di atas tidak akan berfungsi karena ketika elemen menjalankan event dan memanggil fungsi, thisnilainya tidak akan menjadi instance dari kelas.
Salah satu cara umum untuk memecahkan masalah itu adalah menggunakan .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Karena sintaks panah melakukan hal yang sama yang dapat kita tulis
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindsecara efektif membuat fungsi baru . Jika bindtidak ada, pada dasarnya Anda bisa membuatnya sendiri seperti ini
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
Dalam JavaScript yang lebih lama tanpa operator spread
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Memahami kode itu membutuhkan pemahaman tentang penutupan tetapi versi singkatnya bindmembuat fungsi baru yang selalu memanggil fungsi asli dengan thisnilai yang terikat padanya. fungsi panah melakukan hal yang sama karena mereka adalah jalan pintas untukbind(this)
