Hàm call trong javascript

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

Với phương thức call(), bạn có thể viết một phương thức có thể được sử dụng trên các đối tượng khác nhau.

Nội dung chính:

• Trong JavaScript tất cả các Functions là Methods
• Phương thức JavaScript call()

● Trong JavaScript tất cả các Functions là Methods

– Trong JavaScript, tất cả các functions đều là các object methods.

– Nếu một function không phải là một phương thức của một JavaScript object, thì nó là một function của global object (với HTML thì global object là window object).

– Ví dụ sau tạo đối tượng có 3 thuộc tính: brand, name, getFullName. Thuộc tính getFullName là một phương thức.

Ví dụ:

var myObject = {
    brand:"Toyota",
    name: "Prius 2018",
    getFullName: function() {
        return this.brand + " " + this.name;
    }
}

myObject.getFullName();		// Toyota Prius 2018

Try it »

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

– call() method là một phương thức JavaScript định nghĩa trước. Khi bạn khai báo bất kỳ một function nào thì call() method sẽ tự được thêm vào, được tích hợp sẵn.

Ví dụ:

function car(brand, name, weight){
    console.log(brand);
    console.log(name);
    console.log(weight + " kg");
    return this;
}

// Gọi hàm theo cách thông thường
var myCar1 = car("Toyota", "Prius 2018", 850);

// Gọi hàm sử dụng method call()
var myCar2 = car.call(car, "Toyota", "Prius 2018", 850);

Try it »

– Chạy lên kết quả sẽ không khác gì nhau:

– Vậy tại sao không gọi hàm theo cách bình thường mà phải sử dụng call() method. Chúng ta sẽ cùng tìm hiểu công dụng của call() method rồi từ đó rút ra kết luận nhé.

Dưới đây là một số cách sử dụng phương thức call() rất thông dụng:

1. Dùng để invoke (call) một phương thức với đối số là một đối tượng
2. Dùng để gán giá trị cho hàm khởi tạo
3. Dùng để gọi hàm ẩn danh (anonymous function – hàm không có tên)
4. Dùng để thay đổi giá trị của this

1. Dùng để invoke (call) một phương thức với đối số là một đối tượng

1. Dùng để invoke (call) một phương thức với đối số là một đối tượng

– Ví dụ sau gọi phương thức getFullName của đối tượng car, sử dụng nó trên đối tượng car1, car2:

Ví dụ:

var car = {
    getFullName: function() {
        return this.brand + " " + this.name;
    }
}
var car1 = {
    brand:"Toyota",
    name: "Prius 2018"
}
var car2 = {
    brand:"Ford",
    name: "Everest 2018"
}

car.getFullName.call(car1);		// Toyota Prius 2018
car.getFullName.call(car2);		// Ford Everest 2018

Try it »

– call() method có thể chấp nhận các đối số (arguments) riêng lẻ:

Ví dụ:

var car = {
    getFullName: function(weight, color) {
        return this.brand + " " + this.name + ", " + weight + " kg, " + color;
    }
}
var car1 = {
    brand:"Toyota",
    name: "Prius 2018"
}
var car2 = {
    brand:"Ford",
    name: "Everest 2018"
}

car.getFullName.call(car1, 850, "White");	// Toyota Prius 2018, 850 kg, White
car.getFullName.call(car2, 950, "Red");		// Ford Everest 2018, 950 kg, Red

Try it »

2. Dùng để gán giá trị cho hàm khởi tạo

2. Dùng để gán giá trị cho hàm khởi tạo

– Nếu bạn muốn tạo nhiều đối tượng có hàm khởi tạo giống nhau thì hãy sử dụng call() method để thực hiện, lúc này chương trình sẽ gọn hơn.

Ví dụ:

// Hàm này dùng để xử lý khởi tạo
function initCar(name, weight) {
    this.name = name;
    this.weight = weight + " kg";
}
 
function Car(name, weight) {
    // Khởi tạo
    // this chính là Car, vì vậy sau khi chạy xong đối tượng Car sẽ có hai
    // thuộc tính là name và weight
    initCar.call(this, name, weight);
} 
 
var toyota = new Car("Prius 2018", 850);
var ford = new Car('Everest 2018', 950);

console.log(toyota);
console.log(ford);

Try it »

– Kết quả:

3. Dùng để gọi hàm ẩn danh (anonymous function - hàm không có tên)

3. Dùng để gọi hàm ẩn danh (anonymous function – hàm không có tên)

Giả sử bạn tạo một hàm anonymous không có tên, lúc này bạn có thể sử dụng call() method để thực thi hàm đó.