การผูกบริบทผ่านเมธอด bind ใน JavaScript

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

ลองดูตัวอย่างกัน

สมมติว่ามีอินพุต:

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

สมมติว่าลิงก์ไปยังอินพุตนี้ถูกบันทึกไว้ในตัวแปร 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' (ขอเตือนว่าใน elem มีอินพุตที่มี value เท่ากับ 'text'):

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 จะเป็นฟังก์ชันเดิม แต่มี this ที่ถูกผูกไว้อย่างตายตัว:

func = func.bind(elem);

สมมติว่ามีโค้ดต่อไปนี้:

<input id="elem" value="hello">

let elem = document.getElementById('elem');

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// เขียนโครงสร้างด้วย bind() ตรงนี้

func('John', 'Smit'); // ควรจะแสดงผล 'hello, John Smit'
func('Eric', 'Luis'); // ควรจะแสดงผล 'hello, Eric Luis'

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