1. Call trong JavaScript là gì?
Trong Js, một hàm là một thể hiện (đối tượng) của kiểu Function . Và trong kiểu Function thì có sẵn một phương thức được gọi là call() . Phương thức call() cho phép bạn gọi function và truyền vào một object và các đối số(argument) cách nhau bởi dấu phẩy. Phương thức call() là một phương thức được Js định nghĩa trước và ta chỉ việc sử dụng nó.
Cú pháp:
functionName.call(thisArg, arg1, arg2, ...);
- Phương thức call() gọi một hàm có tên là functionName với giá trị này và các đối số đã cho.
- Đối số thisArg của phương thức call() là giá trị this . Nó cho phép bạn đặt giá trị this cho bất kỳ đối tượng nhất định nào.
- Các đối số còn arg1 , arg2… còn lại của phương thức call() là các đối số của hàm.
Lưu ý
This có thể không phải là giá trị thực tế được thấy bởi phương thức: Nếu phương thức là một hàm trong non-strict mode, giá trị null và undefined sẽ được thay thế với global object và các giá trị sơ khai (primitive) sẽ được chuyển thành các đối tượng (objects).
Và với call() , một đối tượng có thể sử dụng một phương thức thuộc về một đối tượng khác.
Ví dụ:
Gọi phương thức fullName của person , sử dụng nó trên person1 :
<script>
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"Thành",
lastName: "Nguyễn"
}
const person2 = {
firstName:"Nam",
lastName: "Chu"
}
document.write(person.fullName.call(person1));
</script>
Gọi phương thức fullName của person , sử dụng nó trên person2 :
<script>
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"Thành",
lastName: "Nguyễn"
}
const person2 = {
firstName:"Nam",
lastName: "Chu"
}
document.write(person.fullName.call(person2));
</script>
2. Phương thức call() với các đối số
Phương thức call() có thể chấp nhận các đối số. 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 hàm call để thực hiện, lúc này chương trình sẽ gọn hơn (nhưng nó sẽ hơi khó hiểu với những bạn mới học).
<script>
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"Thành",
lastName: "Nguyễn"
}
const person2 = {
firstName:"Nam",
lastName: "Chu"
}
document.write(person.fullName.call(person1, "Ba Vì", "Hà Nội"));
</script>
3. Phương thức call() với hàm ẩn danh
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 hàm call để thực thi hàm đó.
(function(name) {
document.write(name);
}).call(this, "Thành Nguyễn");
4. Phương thức call() với this
Trong một hàm thì this chính là hàm đó, tuy nhiên bạn hoàn toàn có thể thay đổi đối tượng this trong hàm bằng cách sử dụng hàm call .
<script>
function showMessage(message)
{
this.message = message;
return this;
}
var myObj = showMessage.call({"blog" : "laptrinhtudau.com"}, "Thành Nguyễn");
document.write(myObj);
</script>
Nếu bạn đối tượng this trong hàm showMessage chính là nó thì bạn hãy sử dụng cách sau
<script>
function showMessage(message)
{
this.message = message;
return this;
}
var myObj = showMessage.call(showMessage, "Thành Nguyễn");
document.write(myObj);
</script>
5. Sử dụng phương thức call() để mượn hàm
Ví dụ, chúng ta có 2 đối tượng là oto và mayBay
const oto = {
ten: "Vinfast VF33",
khoiDong: function() {
console.log("Khởi động " + this.ten);
},
tangToc: function() {
console.log("Tăng tốc " + this.ten)
},
dungLai: function() {
console.log("Dừng " + this.ten);
}
};
const mayBay = {
ten: "Su-34",
bay: function() {
console.log("Đang bay");
}
};
Đoạn code sau sẽ mượn dùng phương thức khoiDong của đối tượng oto
oto.khoiDong.call(mayBay);
Hành vì này được gọi là mượn hàm (function borrwing). Các ứng dụng của việc mượn hàm là sử dụng các phương thức có sẵn của Array.
Ví dụ: Đối tượng arguments bên trong một hàm là một đối tượng giống mảng, không phải là một đối tượng mảng. Để sử dụng phương thức slice() của đối tượng Array , bạn cần sử dụng phương thức call() :
function laySoLe() {
const danhSach = Array.prototype.slice.call(danhSachBanDau);
return danhSach.filter(x => x % 2);
}
let soLe = laySoLe(10, 1, 3, 4, 8, 9);
console.log(soLe);
Trong ví dụ này, chúng ta đã chuyển bất kỳ danh sách số nào vào hàm laySoLe() . Từ đó lọc và về một mảng các số lẻ. Câu lệnh sau đây sử dụng hàm call() để đặt this bên trong phương thức slice() thành đối tượng danhSachBanDau và thực thi phương thức slice() :
const danhSach = Array.prototype.slice.call(danhSachBanDau);
