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:

let 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:

let 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:

<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:

let 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:

button1.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:

function 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.

Có 5 đoạn văn với một số văn bản. Khi nhấp vào bất kỳ đoạn văn nào, hãy thêm dấu chấm than vào cuối văn bản của nó.

Có 3 trường nhập, trong đó ghi một số số. Khi mất tiêu điểm trong bất kỳ trường nhập nào, hãy bình phương số đứng trong đó.