ไม่พอใจกับคำตอบอื่น ๆ คำตอบที่ได้รับการโหวตสูงสุดเมื่อวันที่ 2019/3/13 นั้นผิดจริง ๆ
รุ่นย่อสั้น ๆ ของความ=>หมายว่ามันเป็นทางลัดเขียนฟังก์ชั่นและสำหรับการผูกไว้กับปัจจุบันthis
const foo = a => a * 2;
เป็นทางลัดที่มีประสิทธิภาพสำหรับ
const foo = function(a) { return a * 2; }.bind(this);
คุณสามารถเห็นทุกสิ่งที่ถูกทำให้สั้นลง เราไม่ต้องการfunctionหรือreturnไม่.bind(this)หรือแม้กระทั่งการจัดฟันหรือวงเล็บ
ตัวอย่างของฟังก์ชันลูกศรอีกเล็กน้อยอาจจะเป็น
const foo = (width, height) => {
const area = width * height;
return area;
};
แสดงว่าถ้าเราต้องการอาร์กิวเมนต์หลายฟังก์ชันเราต้องวงเล็บและถ้าเราต้องการเขียนมากกว่าการแสดงออกเดียวที่เราต้องการวงเล็บปีกกาและชัดเจน returnแสดงให้เห็นว่าถ้าเราต้องการข้อโต้แย้งหลายฟังก์ชั่นที่เราต้องการวงเล็บและถ้าเราต้องการเขียนมากกว่าการแสดงออกที่เดียวที่เราต้องจัดฟันและชัดเจน
สิ่งสำคัญคือการเข้าใจ.bindส่วนนั้นและเป็นหัวข้อใหญ่ มันเกี่ยวข้องกับความthisหมายของ JavaScript
ทุกthisฟังก์ชั่นมีพารามิเตอร์นัยที่เรียกว่า อย่างไรthisตั้งค่าเมื่อเรียกใช้ฟังก์ชันจะขึ้นอยู่กับวิธีเรียกใช้ฟังก์ชันนั้น
เอา
function foo() { console.log(this); }
ถ้าคุณเรียกมันว่าปกติ
function foo() { console.log(this); }
foo();
this จะเป็นวัตถุทั่วโลก
หากคุณอยู่ในโหมดเข้มงวด
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
มันจะเป็น undefined
คุณสามารถตั้งค่าthisได้โดยตรงโดยใช้callหรือapply
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}
คุณยังสามารถตั้งค่าthisโดยนัยโดยใช้ตัวดำเนินการ dot.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
ปัญหาเกิดขึ้นเมื่อคุณต้องการใช้ฟังก์ชั่นเป็นโทรกลับหรือฟัง คุณสร้างคลาสและต้องการกำหนดฟังก์ชั่นเป็นการเรียกกลับที่เข้าถึงอินสแตนซ์ของคลาส
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
รหัสด้านบนจะไม่ทำงานเพราะเมื่อองค์ประกอบเริ่มเหตุการณ์และเรียกใช้ฟังก์ชันthisค่าจะไม่เป็นตัวอย่างของคลาส
วิธีการทั่วไปหนึ่งในการแก้ไขปัญหานั้นคือการใช้ .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
เพราะไวยากรณ์ลูกศรทำสิ่งเดียวกันกับที่เราเขียน
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindได้อย่างมีประสิทธิภาพทำให้ฟังก์ชั่นใหม่ หากbindไม่มีอยู่คุณสามารถสร้างของคุณเองได้ตามปกติ
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
ใน JavaScript รุ่นเก่าที่ไม่มีตัวดำเนินการสเปรด
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
การเข้าใจรหัสนั้นต้องมีความเข้าใจในการปิดแต่รุ่นสั้น ๆ นั้นจะbindทำให้เกิดฟังก์ชั่นใหม่ที่จะเรียกฟังก์ชั่นดั้งเดิมด้วยthisค่าที่ถูกผูกไว้กับมัน ฟังก์ชั่นลูกศรทำสิ่งเดียวกันเพราะเป็นทางลัดbind(this)
