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

Phương thức tiếp theo bind cho phép ràng buộc ngữ cảnh với hàm vĩnh viễn. Kết quả của phương thức này trả về một hàm mới, bên trong hàm đó this sẽ có giá trị được thiết lập cứng.

Hãy xem xét một ví dụ.

Giả sử chúng ta có một phần tử input:

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

Giả sử tham chiếu đến phần tử input này được lưu trong biến elem:

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

Giả sử chúng ta cũng có hàm sau đây func:

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

Hãy sử dụng bind để tạo một hàm mới, sẽ là bản sao của hàm func, nhưng this trong nó sẽ luôn bằng elem:

let newFunc = func.bind(elem);

Bây giờ trong biến newFunc chứa một hàm. Hãy gọi nó, truyền vào tham số đầu tiên là '1', và tham số thứ hai là '2' (xin nhắc lại, trong elem chứa phần tử input với value bằng 'text'):

newFunc('1', '2');

Hãy tổng hợp tất cả lại:

let elem = document.getElementById('elem');

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // sẽ in ra 'text12'

Không nhất thiết phải ghi kết quả của bind vào một hàm mới newFunc, có thể chỉ cần ghi đè lên func. Sau đó func sẽ là một hàm giống như trước, nhưng với this được ràng buộc cứng:

func = func.bind(elem);

Giả sử có đoạn mã sau:

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

let elem = document.getElementById('elem');

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// hãy viết cấu trúc với bind() ở đây

func('John', 'Smit'); // ở đây phải in ra 'hello, John Smit'
func('Eric', 'Luis'); // ở đây phải in ra 'hello, Eric Luis'

Hãy viết ở vị trí được chỉ định một cấu trúc với phương thức bind sao cho this bên trong hàm func luôn trỏ đến phần tử input từ biến elem.