PHÂN BIỆT CALL, APPLY VÀ BIND TRONG JAVASCRIPT
This post hasn't been updated for 3 years
Gần đây, tôi có đọc được cách sử dụng ba hàm call, apply và bind trong JavaScript. Đọc xong thấy khó hiểu quá nên tôi quyết định viết một bài so sánh về ba hàm này, cũng như là cách sử dụng chúng.
Prototype của function
Đúng vậy, ba hàm call, apply và bind là các prototype của Function. Nên chỉ có Function mới có thể gọi được 3 hàm này. Sở dĩ, một Function có thể gọi function khác vì trong JavaScript, Function cũng là một loại Object, mà đã là Object thì sẽ có prototype, hay nói cách khác là gọi được phương thức của nó. Bạn có thể tham khảo về 3 hàm call, apply và bind tại: Function.prototype.call(), Function.prototype.apply() và Function.prototype.bind().
Tóm tắt nội dung của 3 hàm
Bạn có thể nhớ nội dung của call, apply và bind một cách ngắn gọn như sau:
call
Gọi hàm và cho phép bạn truyền vào một object và các đối số phân cách nhau bởi dấu phẩy (Comma)
function.call(thisArg, arg1, arg2, ...)
apply
Gọi hàm và cho phép bạn truyền vào một object và các đối số thông qua mảng (Array)
fun.apply(thisArg, [argsArray])
bind
Trả về một hàm mới, cho phép bạn truyền vào một object và các đối số phân cách nhau bởi dấu phẩy.
var newFunction = fun.bind(thisArg[, arg1[, arg2[, ...]]])
So sánh call, apply và bind thông qua ví dụ
Hàm call
var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting1, greeting2) {
console.log(greeting1 + ',' + greeting2 + ' ' + this.firstName + ' ' + this.lastName);
}
say.call(person1, 'Hello', 'Good morning'); // => Hello,Good morning Jon Kuperman
say.call(person2, 'Hello', 'Good morning'); // => Hello,Good morning Kelly King
Hàm apply
var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting0, greeting1) {
console.log(greeting0 + ',' + greeting1 + ' ' + this.firstName + ' ' + this.lastName);
}
say.apply(person1, ['Hello', 'Good moring']); // => Hello,Good moring Jon Kuperman
say.apply(person2, ['Hello', 'Good moring']); // => Hello,Good moring Kelly King
Hàm bind
var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting0, greeting1) {
console.log(greeting0 + ',' + greeting1 + ' ' + this.firstName + ' ' + this.lastName);
}
var sayHelloJon = say.bind(person1, 'Hello', 'Good morning');
var sayHelloKelly = say.bind(person2, 'Hello', 'Good morning');
sayHelloJon(); // => Hello,Good morning Jon Kuperman
sayHelloKelly(); // => Hello,Good morning Kelly King
Kết luận
- Nhìn chung, hàm call và apply là gần giống nhau. Chúng đều gọi hàm trực tiếp. Chỉ khác ở cách truyền tham số vào (với call thì đối số phân cách bởi dấu phẩy comma và với apply thì đối số cho bởi mảng array)
- Hàm bind thì hơi khác hơn một chút. Hàm này không gọi hàm trực tiếp mà nó sẽ trả về một hàm mới. Và bạn có thể sử dụng hàm số mới này sau. Về cách truyền tham số vào thì nó giống với hàm call.
Trên đây là một số sự khác nhau giữa call, apply và bind trong JavaScript. Tôi nghĩ đến đây là đã đủ để bạn thấy được sự khác nhau giữa chúng và cách sử dụng chúng như thế nào. Xin chào và hẹn gặp lại ở bài viết tiếp theo trong series JavaScript cơ bản. Thân ái,
Tham khảo
- https://codeplanet.io/javascript-apply-vs-call-vs-bind/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
- http://eloquentjavascript.net/05_higher_order.html
Bản gốc: Blog Complete JavaScript
Facebook Fanpage: Complete JavaScript
Facebook Group: Hỏi đáp JavaScript VN
All Rights Reserved