PHÂN BIỆT CALL, APPLY VÀ BIND TRONG JAVASCRIPT

Gần đây, tôi có đọc được cách sử dụng ba hàm call, applybind 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, applybind 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, applybind tại: Function.prototype.call(),  Function.prototype.apply()  và Function.prototype.bind().

Tóm tắt nội dung của 3 hàm số

Bạn có thể nhớ nội dung của call, applybind 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 số 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 callapply 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, applybind 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

Bản gốc: Blog Complete JavaScript
Facebook Fanpage: Complete JavaScript
Facebook Group: Hỏi đáp JavaScript VN

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lam Pham

17 bài viết.
16 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
14 5
Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...
Lam Pham viết 24 ngày trước
14 5
White
10 6
Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy (Link). Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...
Lam Pham viết 1 tháng trước
10 6
White
3 0
Nếu bạn theo dõi các bài viết của tôi từ đầu tới giờ thì có thể thấy tôi đã giới thiệu với các bạn về (Link), (Link) và (Link). Hôm nay, tôi sẽ tiế...
Lam Pham viết 1 tháng trước
3 0
Bài viết liên quan
White
3 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 1 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
16 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!