Hướng dẫn bind() method in javascript - phương thức bind () trong javascript
Chức năng mượnVới phương thức 3, một đối tượng có thể mượn một phương thức từ một đối tượng khác. Show Ví dụ dưới đây tạo ra 2 đối tượng (người và thành viên). Đối tượng thành viên mượn phương thức fullName từ đối tượng người: Thí dụ const person = {& nbsp; & nbsp; firstName: "john", & nbsp; & nbsp; lastName: "doe", & nbsp; fullName: function () {& nbsp; & nbsp; & nbsp; Trả về this.FirstName + "" + this.lastName; & nbsp; & nbsp;}} const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",} Đặt fullName = person.fullname.bind (thành viên); Hãy tự mình thử » Bảo tồn điều nàythisĐôi khi phương pháp 3 phải được sử dụng để ngăn chặn việc mất điều này.this.Trong ví dụ sau, đối tượng người có phương thức hiển thị. Trong phương thức hiển thị, điều này đề cập đến đối tượng người:this refers to the person object: Thí dụ const person = {& nbsp; & nbsp; firstName: "john", & nbsp; & nbsp; lastName: "doe", & nbsp; fullName: function () {& nbsp; & nbsp; & nbsp; Trả về this.FirstName + "" + this.lastName; & nbsp; & nbsp;}} const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",} Hãy tự mình thử » Bảo tồn điều nàythis is lost. Đôi khi phương pháp 3 phải được sử dụng để ngăn chặn việc mất điều này.undefined instead:Thí dụ const person = {& nbsp; & nbsp; firstName: "john", & nbsp; & nbsp; lastName: "doe", & nbsp; fullName: function () {& nbsp; & nbsp; & nbsp; Trả về this.FirstName + "" + this.lastName; & nbsp; & nbsp;}} const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",} Hãy tự mình thử » Bảo tồn điều này Đôi khi phương pháp 3 phải được sử dụng để ngăn chặn việc mất điều này.Trong ví dụ sau, đối tượng người có phương thức hiển thị. Trong phương thức hiển thị, điều này đề cập đến đối tượng người: Thí dụ const person = {& nbsp; & nbsp; firstName: "john", & nbsp; & nbsp; lastName: "doe", & nbsp; fullName: function () {& nbsp; & nbsp; & nbsp; Trả về this.FirstName + "" + this.lastName; & nbsp; & nbsp;}} const thành viên = {& nbsp; & nbsp; firstName: "hege", & nbsp; & nbsp; lastName: "nilsen",} Hãy tự mình thử » Bảo tồn điều nàythis?Đôi khi phương pháp 3 phải được sử dụng để ngăn chặn việc mất điều này.object.Trong ví dụ sau, đối tượng người có phương thức hiển thị. Trong phương thức hiển thị, điều này đề cập đến đối tượng người: object depends on how 7 is being invoked (used or called).const person = {& nbsp; & nbsp; firstName: "john", & nbsp; & nbsp; lastName: "doe", & nbsp; Hiển thị: function () {& nbsp; & nbsp; & nbsp; Đặt x = document.getEuityById ("demo"); & nbsp; & nbsp; & nbsp; x.innerhtml = this.firstname + "" + this.lastName; & nbsp; & nbsp;}}
Bind, Apply and Call trong javascriptTrước tiên để hiểu bài này bạn cần tìm hiểu “this” trong javascript , javascript objects Như các bạn đã biết trong javascript không có class mà chỉ có các functions. Một function cũng là 1 object trong javascript. Và cũng giống như object , function sẽ có các methods, chưa các phương thức mạnh mẽ như “Apply”, “Call”, “Bind”. 3 hàm này chúng ra thường ít dùng tuy nhiên chúng tạo nên sự mạnh mẽ và bá đạo của javascript. Chúng ta bắt đầu tìm hiểu các method này nào Javascript Bind MethodBind là một function nằm trong function prototype do đó chỉ có function mới có thể gọi dc nó. Chúng ta gọi Bind method dùng để xác định tham số “this” cho một function. bind() cho phép chúng ta dễ dàng thiết lập một đối tượng cụ thể sẽ bị ràng buộc này khi một chức năng hoặc phương pháp được gọi. Các tác dụng của bind
ví dụ: https://jsfiddle.net/knz9fv5c/
Mục đích trong ví dụ này ta sẽ xem xet bind có thể set giá trị “this” trong object như nào. Ta có 1 object user chứa function showInfo có nhiệm vụ hiển thị thông tin của object user đó thông qua biến “this”“this” trong object như nào. Ta có 1 object user chứa function showInfo có nhiệm vụ hiển thị thông tin của object user đó thông qua biến “this” Ở trường hợp đầu tiên khi không sử dụng bind ta có thể thấy khi click vào button giá trị “this” trong hàm showInfo không được gọi ( bằng “undefined”) . Ở trường hợp thứ 2 khi ta dùng bind để set giá trị this của user. Lúc này ta có thể bind giá trị của user với this. Kết quả ta thấy show được thông tin của user rồi đó . Một trường hợp khác với global và local variable. Ta có ví dụ tương tự như sau:
Ta thấy nếu ko sử dụng bind thì biến global data được gọi còn nếu sử dụng bind sẽ set giá trị cho this nên biến local sẽ được gọi.
Không chỉ bind được giá trị “this” , hàm bind còn có thể bind được các tham số truyền vào cho hàm . Tức là ta có thể tao ra một function mới từ function cũ bằng cách gắn mặc định một tham số cho function cũ đó . Đó là cách tạo một Curry Function Giả sử mình có một hàm log đơn gilản có 3 tham số truyền vào như sau:
Bây h mình muốn tạo một hàm log acces ngày hôm nay mình sẽ tạo ra sử dụng hàm cũ như sau:
Ta có thể tạo function mới bằng cách sử dụng bind bằng cách gán mặc định 2 tham số đầu tiên như sau:
Khi gọi logAccessToday(“Server Access”) đều ra một thông báo như nhau.logAccessToday(“Server Access”) đều ra một thông báo như nhau. Function Apply và Call trong javascriptHai function này đều đều nằm trong function prototype cho nên chỉ có function mới có thể gọi được Chức năng chung của chúng là xác định một tham số, xác định this và truyền các tham số còn lại vào. Điểm khác nhau cơ bản giữa chúng là apply sẽ truyền 1 array các tham số còn call sẽ truyền lần lượt các tham số. Cú pháp :
Ta sẽ cùng xem xet ví dụ sau:
Ngoài ra apply còn có thể truyền tham số tựa như mảng như sau:
Như ta thấy ta có thể truyền 1 object tương tự mảng.
Trong ví dụ trên hàm call đã set biến this cho hàm callback nên khi gọi hàm print biến this được gọi chính là obj. Nếu không gọi call , this.mVal sẽ chỉ là undefnied . Với apply cũng tương tự như vậy
Xem ví dụ sau:
Arguments là một object giống array nhưng không phải là array . Arguments giống array vì nó có fieldlength, có thể truy cập các giá trị nó chứa thông qua index 0,1,2. Tuy nhiên, do arguments không phải là array nên nó không thể gọi các hàm của Array.prototype. Do đó, ta phải sử dụng call/apply để mượn một số hàm trong Array.prototype, các hàm này sẽ trả ra một array cho ta xử lý. Dòng code phía trên chuyển object arguments thành một array Ví dụ tiếp 0Tuơng tự ở đây arguments không phải là 1 array nên ta dùng call để mượn hàm trong Array prototype để ta sử lý. Khi đó hàm slice sẽ gọiđược
Ví dụ 1Bây h ta mở rộng bằng bằng console.log ra 2 dòng trước và sau khi gọi showName bằng hàm sau: 2Kết quả ta thấy 2 console.log đc tạo → việc mở rộng hàm thành công rồi đó Kết luậnBằng việc sử dụng call, apply và bind ta có thể thay đổi được ngữ cảnh thực thi (phạm vi chứa hàm) để sử dụng một hàm với công dụng đa năng hơn như thực thi cho một đối tượng, phạm vi khác khác giúp ta có thể tận dụng tối đa mã nguồn được đã tạo ra, hay tạo shortcut cho hàm, linh hoạt hơn tham số đầu vào. Với call và apply chúng ta sử dụng để thực thi hàm đó luôn khi gọi, còn với bindta có thể thực thi hàm đó nhiều lần sau khi đã được buộc (bind) với một ngữ cảnh nhất định. |