ข้อได้เปรียบของ this ใน JavaScript

จากที่กล่าวมาก่อนหน้านี้ ข้อได้เปรียบพิเศษของ this ยังไม่ชัดเจน เนื่องจากภายในฟังก์ชันตัวจัดการ องค์ประกอบของเราจะสามารถเข้าถึงได้อยู่แล้ว – เพราะตัวแปร elem จะเป็นตัวแปรส่วนกลางสำหรับฟังก์ชัน func ของเรา:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// ตัวแปร elem ที่มีองค์ประกอบของเราสามารถเข้าถึงได้ที่นี่
}

และไม่ยากที่จะคิดว่าเนื้อหาของ this และเนื้อหาของตัวแปร elem ในกรณีของเรา นั้นเท่ากัน:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // จะแสดง true
}

แล้วข้อได้เปรียบพิเศษของ this อยู่ที่ไหน? มันจะปรากฏชัดเมื่อเรามีหลายองค์ประกอบ และแต่ละองค์ประกอบถูกผูกกับฟังก์ชันเดียวกัน

มาดูตัวอย่าง สมมติเรามีปุ่ม 3 ปุ่ม:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

รับลิงก์ไปยังพวกมันไว้ในตัวแปร:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

ผูกฟังก์ชันเดียวกันนี้กับปุ่มเหล่านี้:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

และภายในฟังก์ชัน เราจะแสดง this.value:

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

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

นั่นคือ ทุกครั้งที่กดจะแสดงในคอนโซล value ของปุ่มที่เกิดการกด แต่จะทำโดยฟังก์ชันเดียวกัน func! นี่คือข้อได้เปรียบ ของการใช้ this

มี 5 ย่อหน้าที่มีข้อความบางอย่าง เมื่อคลิกที่ย่อหน้าใดๆ ให้เขียนเครื่องหมายอัศเจรีย์ ต่อท้ายข้อความของย่อหน้านั้น

มี 3 ช่องอินพุต ซึ่งมี ตัวเลขบางอย่างเขียนไว้ เมื่อเสียโฟกัสใน ช่องอินพุตใดๆ ให้ยกกำลังสองจำนวนที่อยู่ในช่องนั้น