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ápphươngthứcbind[] 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,].
- Không giống như phương thức call[] hay phương thức apply[], phương thức bind[] không thực thi ngay hàm. Nó chỉ trả về một phiên bản mới của hàm mà nó được đặt thành đối số thisArg.
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ụ:
letsinhVien={ ten:"NgọcAnh", 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à:
letf=sinhVien.getTen; setTimeout[f,1000];//MấtsinhViencontext
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ụngbind[] letf=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:
letvanDongVien={ ten:"NgọcAnh", 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:
letchim={ ten:"Chimchí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ượnphươngthứcchay[] //trongđốitượngvanDongVien letchay=vanDongVien.chay.bind[chim,0.5]; chay[];
Trong câu lệnh trên:
- Gọi phương thứcbind[]của phương thứcvanDongVien.chay[]và truyền vào đối tượngchimlàm đối số đầu tiên và0.5là đối số thứ hai.
- Gọi hàmchay[].
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ý ngayKHÓ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: Website://niithanoi.edu.vn Fanpage: //facebook.com/NIIT.ICT/ #niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python