Trong bài hướng dẫn tự học JS này, bạn sẽ tìm hiểu về phương thức bind() trong JavaScript và biết cách sử dụng bind() để mượn phương thức, mượn hàm một cách hiệu quả.
Phương thức bind() là gì?
Phương thức bind() trả về một hàm mới, khi được gọi, nó có giá trị this được đặt thành một giá trị cụ thể.
Sau đây minh họa cú pháp của phương thức bind():
// Cú pháp phương thức bind()
fn.bind(thisArg[, arg1[, arg2[, ...]]])
Trong cú pháp này, phương thức bind() trả về một bản sao của hàm fn với giá trị cụ thể this (thisArg) và các đối số (arg1, arg2,…).
Sử dụng bind() để liên kết hàm (function binding)
Khi bạn truyền một phương thức, một đối tượng đến một hàm khác dưới dạng callback, thì this sẽ bị mất. Ví dụ:
let sinhVien = {
ten: "Ngọc Anh",
getTen: function() {
console.log(this.ten);
}
};
setTimeout(sinhVien.getTen, 1000);
Kết quả:
undefined
Như bạn có thể thấy rõ ràng là sinhVien.getTen trả về undefined mà không phải là Ngọc Anh như chúng ta mong đợi.
Trong trường hợp này, câu lệnh:
setTimeout(sinhVien.getTen, 1000);
được JavaScript Engine hiểu là:
let f = sinhVien.getTen;
setTimeout(f, 1000); // Mất sinhVien context
Hàm this bên trong hàm setTimeout() được đặt thành đối tượng toàn cục ở chế độ không nghiêm ngặt (non-strict mode) và undefined trong chế độ nghiêm ngặt (strict mode).
Để tránh trường hợp này, bạn có thể bọc lệnh gọi đến phương thức sinhVien.getTen trong một hàm ẩn danh (anonymous function), như sau:
setTimeout(function() {
sinhVien.getTen();
}, 1000);
Cách này sẽ hoạt động đúng mong đợi vì nó lấy sinhVien từ phạm vi bên ngoài và sau đó gọi phương thức getTen().
Hoặc bạn có thể sử dụng phương thức bind() mà JS cung cấp:
// Sử dụng bind()
let f = sinhVien.getTen.bind(sinhVien);
setTimeout(f, 1000);
Chúng ta có thể hiểu thế này:
-
Dòng lệnh đầu tiên sẽ liên kết
sinhVien.getTen đến đối tượng sinhVien sau đó gán vào f
-
Thứ hai, chuyển hàm ràng buộc
f với giá trị this đã được đặt cho đối tượng sinhVien vào hàm setTimeout().
Sử dụng phương thức bind() để mượn phương thức từ đối tượng khác
Đầu tiên, giả sử bạn có một đối tượng vanDongVien, có phương thức chay:
let vanDongVien = {
ten: "Ngọc Anh",
chay: function(tocDo) {
console.log(this.ten + ' chạy được ' + tocDo + ' m/s.');
}
};
Và một đối tượng chim có phương thức bay:
let chim = {
ten: "Chim chích",
bay: function(tocDo) {
console.log(this.ten + ' bay được ' + tocDo + ' m/s.');
}
};
Bây giờ, nếu bạn muốn liên kết đối tượng chim với phương thức chay, bạn có thể sử dụng phương thức bind() để tạo phương thức chay với this được thiết lập thành đối tượng chim.
// Mượn phương thức chay()
// trong đối tượng vanDongVien
let chay = vanDongVien.chay.bind(chim, 0.5);
chay();
Trong câu lệnh trên:
-
Gọi phương thức
bind() của phương thức vanDongVien.chay() và truyền vào đối tượng chim làm đối số đầu tiên và 0.5 là đối số thứ hai.
Kết quả ta được:
Chim chích chạy được 0.5 m/s.
Như vậy, chúng ta đã mượn thành công phương thức chay() của đối tượng vanDongVien.
Khả năng mượn một phương thức của một đối tượng mà không cần tạo bản sao của phương thức đó và duy trì nó ở hai nơi riêng biệt là tính năng rất mạnh trong JavaScript.
Nắm được tính năng này sẽ giúp ích cho bạn rất nhiều khi học nâng cao lên front end Framework như React, Angular...
> Đăng ký ngay KHÓA HỌC FRONT END (với ReactJS) nếu bạn muốn đi chuyên sâu với ngôn ngữ JavaScript.
Tổng kết về bind() trong JS
Như vậy, trong bài hướng dẫn này, mình đã giúp bạn tìm hiểu về phương thức bind() trong JavaScript, biết được bind() là gì, sử dụng nó như thế nào...
Túm lại:
-
Phương thức
bind() trả về một hàm mới, khi gọi, this sẽ được chỉ định cụ thể
-
Phương thức
bind() cũng giúp mượn phương thức, mượn hàm (function borring) từ một đối tượng khác mà không cần nhân bản nó.
Bạn đã hiểu về phương thức bind() trong JS chưa? Hãy để lại bình luận nếu có chỗ nào chưa hiểu bạn nhé.
Chúc bạn học tốt!
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0968051561
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python