Lợi thế của this trong JavaScript

Từ những điều đã nói trước đó, lợi thế đặc biệt của this vẫn chưa thực sự rõ ràng. Rốt cuộc, bên trong hàm xử lý phần tử của chúng ta sẽ luôn có sẵn - vì biến elem sẽ là biến toàn cục cho hàm func của chúng ta:

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

function func() {
  // ở đây biến elem với phần tử của chúng ta có thể truy cập được
}

Và, không khó để nhận ra rằng nội dung của this và nội dung của biến elem trong trường hợp của chúng ta là bằng nhau:

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

function func() {
  console.log(elem === this); // sẽ in ra true
}

Vậy lợi thế đặc biệt của this là gì? Nó thể hiện khi chúng ta có nhiều phần tử, và mỗi phần tử được liên kết với cùng một hàm.

Hãy xem xét một ví dụ. Giả sử chúng ta có 3 nút bấm:

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

Lấy tham chiếu đến chúng vào các biến:

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

Gắn cùng một hàm cho các nút bấm này:

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

Và bên trong hàm, chúng ta sẽ in ra this.value:

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

Kết quả là chúng ta có ba nút bấm. Việc nhấn vào mỗi nút sẽ dẫn đến việc gọi hàm func. Đồng thời, mỗi lần nhấp chuột, this sẽ chứa tham chiếu đến nút bấm nơi sự kiện xảy ra.

Tức là mỗi lần nhấn sẽ in ra console value của nút bấm nơi sự kiện nhấn chuột xảy ra, nhưng việc này sẽ được thực hiện bởi cùng một hàm func! Đó chính là lợi thế của việc sử dụng this.