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",

};

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

● 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];

– 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

– 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

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];

– 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 đó.