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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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