JavaScript - Phương thức call()

Xin chào bạn, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ cùng khám phá một trong những mẹo nhỏ của JavaScript: phương thức call(). Đừng lo lắng nếu bạn mới bắt đầu lập trình; tôi sẽ hướng dẫn bạn từng bước, giống như tôi đã làm cho hàng trăm sinh viên trong những năm dạy học của mình. Vậy, hãy lấy một ly đồ uống yêu thích của bạn, và cùng bắt đầu cuộc phiêu lưu thú vị này!

Phương thức Function call()

Trước khi chúng ta nhảy vào phương thức call(), hãy nhanh chóng làm mới trí nhớ về hàm. Các hàm trong JavaScript giống như những chiếc máy nhỏ thực hiện các nhiệm vụ cụ thể. Chúng vô cùng hữu ích, và một khi bạn làm quen với chúng, bạn sẽ sử dụng chúng liên tục!

Bây giờ, phương thức call() là một siêu năng lực đặc biệt mà các hàm có. Nó cho phép chúng ta gọi (hoặc thực thi) một hàm và chỉ định this keyword nên tham chiếu đến gì trong hàm đó. Nếu điều này听起来有点 rối rắm, đừng lo lắng! Chúng ta sẽ phân tích nó bằng một số ví dụ.

Cú pháp

Dưới đây là cách phương thức call() trông như thế nào:

functionName.call(thisArg, arg1, arg2, ...)

• functionName là hàm mà chúng ta muốn gọi.
• thisArg là thứ chúng ta muốn this tham chiếu đến trong hàm.
• arg1, arg2, ... là các đối số chúng ta muốn truyền cho hàm.

Ví dụ về phương thức Function call()

Hãy cùng xem một số ví dụ để xem call() hoạt động như thế nào!

Ví dụ 1: Sử dụng cơ bản

function greet() {
  console.log(`Hello, my name is ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);

Nếu bạn chạy đoạn mã này, bạn sẽ thấy:

Hello, my name is Alice!

Điều gì đang xảy ra ở đây? Chúng ta đang sử dụng call() để gọi hàm greet, nhưng chúng ta đang nói với nó để sử dụng person làm this. Vậy khi hàm cố gắng truy cập this.name, nó thực sự đang truy cập person.name.

Ví dụ 2: Truyền đối số

function introduce(hobby, food) {
  console.log(`Hi, I'm ${this.name}. I love ${hobby} and my favorite food is ${food}.`);
}

const person1 = { name: 'Bob' };
const person2 = { name: 'Carol' };

introduce.call(person1, 'coding', 'pizza');
introduce.call(person2, 'painting', 'sushi');

Điều này sẽ đầu ra:

Hi, I'm Bob. I love coding and my favorite food is pizza.
Hi, I'm Carol. I love painting and my favorite food is sushi.

Trong ví dụ này, chúng ta không chỉ chỉ định this mà còn truyền đối số cho hàm. Phương thức call() cho phép chúng ta làm cả hai điều này!

Ví dụ 3: Mượn phương thức

Một trong những điều tuyệt vời nhất về call() là nó cho phép chúng ta "mượn" phương thức từ các đối tượng khác. Hãy để tôi chỉ cho bạn biết tôi có nghĩa là gì:

const calculator = {
  multiply: function(a, b) {
    return a * b;
  }
};

const scientific = {
  square: function() {
    return this.multiply(this.number, this.number);
  },
  number: 5
};

console.log(scientific.square.call(scientific));  // Điều này hoạt động như mong đợi
console.log(calculator.multiply.call(scientific, scientific.number, scientific.number));  // Điều này mượn phương thức multiply

Đầu ra:

25
25

Trong ví dụ này, chúng ta đang mượn phương thức multiply từ đối tượng calculator và sử dụng nó trong ngữ cảnh của đối tượng scientific. Rất tuyệt vời phải không?

Ví dụ 4: Sử dụng call() với phương thức nội tại

Bạn có biết chúng ta thậm chí có thể sử dụng call() với các phương thức nội tại của JavaScript không? Hãy xem xét điều này:

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.call(null, ...numbers);
console.log(max);  // Đầu ra: 5

Ở đây, chúng ta đang sử dụng call() với Math.max(). Đối số null là vì Math.max() không sử dụng this, và chúng ta đang phân tán mảng numbers thành các đối số riêng lẻ.

Các phương thức liên quan đến call()

Để cho bạn một bức tranh hoàn chỉnh, hãy cùng xem xét một số phương thức liên quan đến call():

Phương thức	Mô tả	Cú pháp
call()	Gọi một hàm với một this giá trị và các đối số được cung cấp từng cái một	func.call(thisArg, arg1, arg2, ...)
apply()	Tương tự như call(), nhưng các đối số được truyền dưới dạng một mảng	func.apply(thisArg, [argsArray])
bind()	Tạo một hàm mới với một this giá trị cố định	func.bind(thisArg, arg1, arg2, ...)

Mỗi phương thức này đều có trường hợp sử dụng của riêng mình, nhưng call() thường là đơn giản nhất khi bạn biết chính xác các đối số bạn đang truyền.

Kết luận

Và thế là bạn đã có nó, các học trò yêu dấu của tôi! Chúng ta đã khám phá phương thức call() từ đầu đến cuối. Nhớ rằng call() giống như một枝魔法 để bạn kiểm soát điều this có nghĩa là gì trong một hàm và cho phép bạn mượn phương thức từ các đối tượng khác.

Như với tất cả các thứ trong lập trình, thực hành làm cho hoàn hảo. Vậy đừng ngần ngại thử nghiệm call() trong mã của bạn. Ai biết được? Bạn có thể sẽ thấy mình sử dụng call() nhiều hơn bạn tưởng tượng!

Tiếp tục lập trình, tiếp tục học hỏi, và nhớ rằng: trong thế giới của JavaScript, bạn luôn chỉ cách một call() để mở khóa những khả năng mới!

Credits: Image by storyset