NAPTheDev's Blog

Tìm hiểu về call(), bind() và apply() trong Javascript

February 25, 2022

Cùng tìm hiểu và phân tích sự khác nhau giữa ba phương thức gây nhầm lẫn trong javascript

Bài viết tham khảo ở Full stack interviews

call()

Là một phương thức có sẵn trong một function trong javascript
Tham số đầu tiên truyền vào hàm call() sẽ chỉ định đối tượng sở hữu, có nghĩa là biến this trong hàm sẽ là tham số đầu tiên được truyền vào


function greeting() {
console.log(`Hello ${this.name}`);
}
const person = {
name: "Bob",
};
greeting.call(person); // Log: "Hello Bob"

Hàm bind nhận vào các tham số khác sau tham số đầu tiên để truyền vào tham số của function


function greeting(age, gender) {
console.log(`I'm ${this.name}. I'm ${age} years old and I'm a ${gender}`);
}
const person = {
name: "Bob",
};
greeting.call(person, 100, "male"); // Log: "I'm Bob. I'm 100 years old and I'm a male"

apply()

Gần như tương tự với phương thức call() Nhưng có một điểm khác biệt:

  • call() nhận vào parameters cho function là các parameters còn lại sau parameter đầu tiên

function greeting(age, gender) {
console.log(`I'm ${this.name}. I'm ${age} years old and I'm a ${gender}`);
}
const person = {
name: "Bob",
};
greeting.apply(person, [100, "male"]); // Log: "I'm Bob. I'm 100 years old and I'm a male"

bind()

Gần giống với call() nhưng có một điểm khác là hàm bind() trả về một function khác để có thể chạy function ban đầu với các tham số đã truyền vào tương tự như hàm call()


function greeting(age, gender) {
console.log(`I'm ${this.name}. I'm ${age} years old and I'm a ${gender}`);
}
const person = {
name: "Bob",
};
const sayGreeting = greeting.bind(person, 100, "male");
sayGreeting(); // Log: "I'm Bob. I'm 100 years old and I'm a male"

Kết luận

Và đó là 3 phương thức dễ gây nhầm lẫn đối với function trong javascript. Hi vọng bài viết này đã giải đáp thắc mắc của bạn

Bình luận

Bài viết liên quan

NAPTheDev • © 2022 My Portfolio