วิธีการ bind
วิธีการ bind ใช้สำหรับผูก context เข้ากับฟังก์ชัน
พารามิเตอร์แรกควรส่งค่า context ส่วนพารามิเตอร์ถัดไปคือพารามิเตอร์ของฟังก์ชัน วิธีการนี้จะคืนค่าฟังก์ชันใหม่ โดยภายในฟังก์ชันนี้ this จะเท่ากับ context ที่ส่งเข้ามา
รูปแบบคำสั่ง
ฟังก์ชัน.bind(context, พารามิเตอร์1, พารามิเตอร์2...);
ตัวอย่าง
สมมติว่าเรามีอิลิเมนต์ input:
<input id="elem" value="text">
ให้ลิงก์ที่ชี้ไปยัง input นี้ถูกเก็บไว้ในตัวแปร elem:
let elem = document.querySelector('#elem');
และสมมติว่าเรามีฟังก์ชัน func ดังต่อไปนี้:
function func(param1, param2) {
console.log(this.value + param1 + param2);
}
ลองใช้ bind เพื่อสร้างฟังก์ชันใหม่ ซึ่งเป็นสำเนาของฟังก์ชัน func แต่ this ในนั้นจะเท่ากับ elem เสมอ:
let newFunc = func.bind(elem);
ตอนนี้ในตัวแปร newFunc จะมีฟังก์ชันเก็บอยู่ ลองเรียกใช้ฟังก์ชันนี้โดยส่งพารามิเตอร์แรกเป็น '1' และพารามิเตอร์ที่สองเป็น '2':
newFunc('1', '2');
ลองรวบรวมทั้งหมดเข้าด้วยกัน:
let elem = document.getElementById('elem');
function func(param1, param2) {
console.log(this.value + param1 + param2);
}
let newFunc = func.bind(elem);
newFunc('1', '2'); // แสดงผล 'text12'
ตัวอย่าง
ไม่จำเป็นต้องเก็บผลลัพธ์จาก bind ลงในฟังก์ชันใหม่ newFunc สามารถเขียนทับ func เดิมได้เลย:
func = func.bind(elem);
