Cơ bản về làm việc với ngữ cảnh trong JavaScript

Giả sử chúng ta có một hàm func nào đó, bên trong sử dụng this:

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

this trong hàm này trỏ đến cái gì? Chúng ta không biết. Và JavaScript cũng không biết. Và bản thân hàm cũng không biết. Tức là tại thời điểm tạo ra hàm, thứ mà this trỏ đến chưa được xác định. Và nó chỉ được xác định khi hàm đó được gọi.

Giả sử chúng ta có một input nào đó:

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

Hãy gắn hàm func của chúng ta vào input này để nó được thực thi khi input mất focus. Bây giờ tại thời điểm hàm thực thi, this sẽ trỏ đến input của chúng ta:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // khi mất focus sẽ in ra 'text'
}

Nhưng chúng ta có thể không chỉ có một input, mà có nhiều:

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

Và chúng ta có thể gắn hàm func của mình vào mỗi input này. Trong trường hợp này, đối với phần tử thứ nhất, this tại thời điểm gọi hàm sẽ trỏ đến nó, còn đối với phần tử thứ hai - sẽ trỏ đến nó.

Trong thực tế, điều này có nghĩa là this bên trong hàm phụ thuộc vào việc chúng ta mất focus trên input nào:

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

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

function func() {
	console.log(this.value); // sẽ in ra 'text1' hoặc 'text2'
}

Nói chung, đặc điểm này của this rất tiện lợi - chúng ta chỉ tạo ra một hàm duy nhất và gắn nó vào bất kỳ số lượng input nào. Nếu this không trỏ đến phần tử mà sự kiện xảy ra, thì chúng ta sẽ không làm được như vậy - chúng ta sẽ phải tạo một hàm riêng cho mỗi input với cùng một đoạn code!