วิธีการ bind

วิธีการ bind ใช้สำหรับผูก context เข้ากับฟังก์ชัน พารามิเตอร์แรกควรส่งค่า context ส่วนพารามิเตอร์ถัดไปคือพารามิเตอร์ของฟังก์ชัน วิธีการนี้จะคืนค่าฟังก์ชันใหม่ โดยภายในฟังก์ชันนี้ this จะเท่ากับ context ที่ส่งเข้ามา

รูปแบบคำสั่ง

javascriptฟังก์ชัน.bind(context, พารามิเตอร์1, พารามิเตอร์2...);

ตัวอย่าง

สมมติว่าเรามีอิลิเมนต์ input:

html<input id="elem" value="text">

ให้ลิงก์ที่ชี้ไปยัง input นี้ถูกเก็บไว้ในตัวแปร elem:

javascriptlet elem = document.querySelector('#elem');

และสมมติว่าเรามีฟังก์ชัน func ดังต่อไปนี้:

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

ลองใช้ bind เพื่อสร้างฟังก์ชันใหม่ ซึ่งเป็นสำเนาของฟังก์ชัน func แต่ this ในนั้นจะเท่ากับ elem เสมอ:

javascriptlet newFunc = func.bind(elem);

ตอนนี้ในตัวแปร newFunc จะมีฟังก์ชันเก็บอยู่ ลองเรียกใช้ฟังก์ชันนี้โดยส่งพารามิเตอร์แรกเป็น '1' และพารามิเตอร์ที่สองเป็น '2':

javascriptnewFunc('1', '2');

ลองรวบรวมทั้งหมดเข้าด้วยกัน:

javascriptlet 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 เดิมได้เลย:

javascriptfunc = func.bind(elem);

ดูเพิ่มเติม