การผูกบริบทด้วยเมธอด call ใน JavaScript

เอาล่ะ เราได้เข้าใจแล้วว่า this ทำงานอย่างไรจริงๆ ตอนนี้เรามาดูเมธอดต่างๆ ที่อนุญาตให้เรากำหนดบริบทของการเรียกฟังก์ชันโดยตรง (กล่าวคือ บังคับกำหนดว่า this จะเท่ากับอะไร)

เมธอดแรกที่เราจะเรียนรู้ ชื่อว่า call มาดูการทำงานของมันผ่านตัวอย่างกัน สมมติว่าเรามีอินพุต:

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

เรามาดึงอ้างอิงถึงอินพุตนี้และบันทึก ลงในตัวแปร elem:

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

ตอนนี้เรามาสร้างฟังก์ชัน func ซึ่งภายในจะแสดงค่า this.value ออกมา:

function func() {
	console.log(this.value);
}

ตอนนี้ฟังก์ชันของเราไม่รู้ว่า this กำลังอ้างอิงถึงอะไร หากเราผูกมัน ผ่าน addEventListener ก็จะรู้ แต่เราจะไม่ทำอย่างนั้น แทนที่เราจะแค่ เรียกฟังก์ชันของเรา โดยบอกมันว่า this ควรเท่ากับ elem

ทำได้ดังนี้: func.call(elem) โค้ดนี้เทียบเท่ากับการเรียกฟังก์ชันปกติ func แบบนี้: func() เพียงแต่ มีเงื่อนไขว่า this จะเท่ากับ elem

ดังนั้น ไวยากรณ์ของเมธอด call คือ: ฟังก์ชัน.call(ออบเจกต์) เรามารวม ทั้งหมดเข้าด้วยกัน:

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

function func() {
	console.log(this.value); // จะแสดง value ของอินพุต
}
func.call(elem);

กำหนดฟังก์ชัน:

function func() {
	console.log(this.value);
}

กำหนดอินพุตสามช่อง:

<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">

ใช้เมธอด call และฟังก์ชัน func แสดงค่า value ของอินพุตแต่ละช่องออกทางหน้าจอ