Ràng buộc ngữ cảnh thông qua phương thức call trong JavaScript

Vậy là chúng ta đã phân tích cách thức this thực sự hoạt động. Bây giờ hãy xem xét các phương thức cho phép chỉ định một cách cưỡng chế ngữ cảnh trong đó một hàm được gọi (tức là nói một cách cưỡng chế this bằng gì).

Phương thức đầu tiên chúng ta sẽ phân tích được gọi là call. Hãy xem xét hoạt động của nó qua một ví dụ. Giả sử chúng ta có một ô input:

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

Hãy lấy tham chiếu đến ô input này và lưu nó vào biến elem:

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

Bây giờ hãy tạo một hàm func, bên trong hàm sẽ in ra this.value:

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

Hiện tại hàm của chúng ta không biết this đang tham chiếu đến cái gì. Nếu chúng ta ràng buộc nó thông qua addEventListener thì sẽ biết. Nhưng chúng ta sẽ không làm vậy. Thay vào đó, chúng ta sẽ chỉ gọi hàm của mình, nói với nó rằng this phải bằng elem.

Điều này được thực hiện như sau: func.call(elem). Đoạn mã này tương đương với việc gọi hàm func một cách đơn giản như thế này: func(), chỉ với điều kiện là this bằng elem.

Vậy, cú pháp của phương thức call là: hàm.call(đối_tượng). Hãy tổng hợp tất cả lại với nhau:

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

function func() {
	console.log(this.value); // sẽ in ra value của input
}
func.call(elem);

Cho một hàm:

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

Cho ba ô input:

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

Sử dụng phương thức call và hàm func, hãy in ra màn hình value của từng ô input.