JavaScript

Gọi hàm với phương thức call() trong JavaScript

Gọi hàm với phương thức call() trong JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Gọi hàm với phương thức call() trong JavaScript

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.

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:

Hàm call() trong Javascript

– 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é.

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ả:

Dùng call() method để 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)

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

Ví dụ:
(function(message, name) {
    alert(message + " " + name);
}).call(this, "Welcome to", "Minh Hoàng Blog!");
Try it »
4. Dùng để thay đổi giá trị của this

4. Dùng để thay đổi giá trị của this

– Trong một function thì this chính là function đó, tuy nhiên bạn hoàn toàn có thể thay đổi đối tượng this trong function bằng cách sử dụng call() method.

Ví dụ:
function showMessage(message)
{
    this.message = message;
    return this;
}
 
var myObj = showMessage.call({"blog" : "minhhn.com"}, "Minh Hoàng");
console.log(myObj);

// Output:
// myObj chính là đối tượng:
// {blog: "minhhn.com", message: "Minh Hoàng"}
Try it »

– Nếu bạn muốn đối tượng this trong hàm showMessage chính là nó thì hãy sử dụng cách sau:

Ví dụ:
function showMessage(message)
{
    this.message = message;
    return this;
}
 
var myObj = showMessage.call(showMessage, "Minh Hoàng");
console.log(myObj);

// Output:
// myObj chính là hàm showMessage
Try it »

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!


Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

2
Bình luận của bạn

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
NaN Recent comment authors
Mới nhất Cũ nhất Thích nhiều nhất
trackback

[…] – Phương thức apply() tương tự như phương thức call() ở bài viết Gọi hàm với phương thức call() trong JavaScript. […]

NaN
Member
NaN

Vậy tại sao Object.prototype.toString([]) và Object.prototype.toString.call([]) lại khác nhau?

Gọi hàm với phương thức call() trong JavaScript

by Minh Hoàng Time to read: 6 min
2