พื้นฐานการทำงานกับ Context ใน JavaScript

สมมติว่าเรามีฟังก์ชัน func บางฟังก์ชัน ที่ภายในใช้ this:

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

this ในฟังก์ชันนี้ชี้ไปที่อะไร? เราไม่รู้ และ JavaScript ก็ไม่รู้ และตัว ฟังก์ชันเองก็ไม่รู้ นั่นคือในขณะที่สร้าง ฟังก์ชัน สิ่งที่ this ชี้ไปนั้น ยังไม่ได้กำหนดไว้ และจะถูกกำหนดก็ต่อเมื่อ ฟังก์ชันนี้ถูกเรียกใช้งาน

สมมติว่าเรามีอินพุตบางตัว:

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

ลองผูกฟังก์ชัน func ของเรากับอินพุตนี้ เพื่อให้มันทำงานเมื่ออินพุตเสียโฟกัส ตอนนี้ในขณะที่ฟังก์ชันทำงาน this จะชี้ไปที่อินพุตของเรา:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // เมื่อเสียโฟกัสจะแสดง 'text'
}

แต่เราอาจจะมีอินพุตไม่ใช่แค่หนึ่งตัว แต่ มีหลายตัว:

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

และเราสามารถผูกฟังก์ชัน func ของเรา กับอินพุตแต่ละตัวนี้ได้ ในกรณีนี้สำหรับ องค์ประกอบแรก this ในขณะเรียก ฟังก์ชันจะชี้ไปที่มัน และสำหรับตัวที่สอง - ชี้ไปที่มัน

ในทางปฏิบัติ นี่หมายความว่า this ภายใน ฟังก์ชันขึ้นอยู่กับว่าเราเสียโฟกัสที่อินพุต ตัวไหน:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // จะแสดง 'text1' หรือ 'text2'
}

โดยรวมแล้ว ลักษณะพิเศษของ this นี้ สะดวกมาก - เราแค่สร้างฟังก์ชันเดียว และผูกมันกับอินพุตกี่ตัวก็ได้ ถ้า this ไม่ได้ชี้ไปที่องค์ประกอบ ที่เกิดเหตุการณ์ขึ้น เราก็จะ ทำแบบนั้นไม่ได้ - เราจะต้องสร้าง ฟังก์ชันของตัวเองสำหรับแต่ละ อินพุตโดยมีโค้ดเดียวกัน!