Javascript: Những quái nhân call, apply và bind?

Ở những bài trước, chúng ta đã tìm hiểu về Execution Context. Chúng ta có:

-Execution Context của một function, và
-Execution Context của Global Environment.

Một Execution Context của một function được mô tả như hình vẽ:

Nó bao gồm:
-Variable Environment
-This
-Outer Environment

Chúng ta chú ý đặc biệt đến this nhé. Vì call, apply và bind là cách để chúng ta thay đổi this cho một function.

Cùng xem ví dụ sau nhé:

let person = {
 firstName: 'Thau',
 lastName: 'Nguyen',
 getFullName: function() {
  console.log(`My name is ${this.firstName} ${this.lastName}`);
 }
}

let logName = function(lang){
 console.log(`My name is ${this.firstName} ${this.lastName}`);
 if(lang) {
  console.log(`I speak ${lang}`);
 }
}

logName();//"My name is undefined undefined"

Khi ta tạo hàm logName thì nó tạo nên một Execution Context với this = Window object. Do đó, this.firstName và this.lastName không tồn tại trong Window. Để logName chạy đúng, chúng ta cần thay đổi this. Để làm điều này, chúng ta sử dụng hoặc call hoặc apply hoặc bind như sau.

let logFullName = logName.bind(person);
logFullName();//"My name is Thau Nguyen"

Hoặc chúng ta có thể dùng apply, call như sau:

logName.call(person, 'English');
logName.apply(person, ['English']);

Sự khác nhau giữa call và apply là cách truyền tham số khác nhau. Các tham số trong call được phân cách nhau bởi dấu phẩy. Trong khi đó, các tham số trong apply là một mảng.

Mặt khác, chúng ta cũng thấy sự khác nhau giữa call, apply và bind là:
-bind: chỉ thay đổi this, không gọi function đó
-call, apply: thay đổi this và gọi function ngay lập tức.

Hiểu được call, apply, bind chúng ta sẽ biết được cách để thay đổi this trong javascript.