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:
– 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
– 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ụ:
[code language=”javascript”]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[/code]
Try it »
– call() method có thể chấp nhận các đối số (arguments) riêng lẻ:
Ví dụ:
[code language=”javascript”]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[/code]
Try it »
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ụ:
[code language=”javascript”]// Hàm này dùng để xử lý khởi tạofunction 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);[/code]
Try it »
– Kết quả:
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ụ:
[code language=”javascript”](function(message, name) {alert(message + " " + name);
}).call(this, "Welcome to", "Minh Hoàng Blog!");[/code] Try it »
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ụ:
[code language=”javascript”]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"}[/code]
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ụ:
[code language=”javascript”]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[/code]
Try it »
[…] – 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. […]
Vậy tại sao Object.prototype.toString([]) và Object.prototype.toString.call([]) lại khác nhau?
[…] thêm: – Gọi hàm với phương thức call() trong JavaScript. – Gọi hàm với phương thức apply() trong […]