Trong hướng dẫn này, bạn sẽ tìm hiểu về phương thức call() trong JavaScript và cách sử dụng nó hiệu quả hơn.
Giới thiệu phương thức call() trong JS
Trong JavaScript, một hàm là một thể hiện (đối tượng) của kiểu Function. Ví dụ:
// Khai báo một hàm
function ham() {
//...
}
// Sử dụng instanceof để kiểm tra ham() có phải
// là một thể hiện của Function không?
console.log(ham instanceof Function); // true
Và trong kiểu Function thì có sẵn một phương thức được gọi là call() có cú pháp sau:
// Cú pháp call()
functionName.call(thisArg, arg1, arg2, ...);
Trong đó:
-
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 cal() là các đối số của hàm.
Khi bạn gọi một hàm, JavaScript Engine sẽ gọi phương thức call() của đối tượng hàm đó.
Giả sử rằng bạn có hàm thongBao() như sau:
// Khai báo hàm
function thongBao() {
console.log("Hàm thông báo");
}
Và khi bạn gọi hàm thongBao() như sau:
Nó tương đương với việc gọi phương thức call() trên đối tượng hàm thongBao:
thongBao.call();
Theo mặc định, giá trị this bên trong hàm được đặt thành đối tượng toàn cục, tức là window trên trình duyệt web và đối tượng toàn cục trên node.js:
// Khai báo hàm
function thongBao() {
console.log(this);
}
// Gọi hàm
thongBao();
> Lưu ý rằng: Trong strict mode, this bên trong hàm được thiết lập thành undefined thay vì toàn cục.
Hãy xem xét ví dụ sau:
// Khai báo hàm
function tong2So(a, b) {
return a + b;
}
let ketQua = tong2So.call(this, 10, 20);
console.log(ketQua);
Kết quả ta được:
30
Trong ví dụ này, thay vì gọi trực tiếp hàm tong2So(), chúng ta sử dụng phương thức call() để gọi hàm tong2So(). Giá trị this lúc này được đặt thành đối tượng toàn cục.
let loiChao = "Chào";
let chaoHoi = {
loiChao: "Xin chào"
}
function chao(ten) {
console.log(this.loiChao + ' ' + ten);
}
Bên trong hàm chao(), chúng ta tham chiếu loiChao thông qua giá trị this.
Nếu bạn chỉ gọi hàm chao() thông qua phương thức call() như sau:
chao.call(this, "JS");
Thì kết quả chúng ta nhận được là:
Chào JS
Tuy nhiên, khi chúng ta gọi phương thức call() của hàm chao() mà truyền đối tượng chaoHoi vào thay thế giá trị this như sau:
chao.call(chaoHoi, "JS");
Thì kết quả chúng ta nhận được là:
Xin chào JS
Nghĩa là, trong trường hợp này, this.loiChao trong hàm chao() sẽ tham chiếu đến đối tượng chaoHoi, chứ không phải là đối tượng toàn cục.
Sử dụng phương thức call() trong JavaScript để nối hàm tạo cho một đối tượng
Phương thức call() có thể được sử dụng để nối các hàm tạo (constructor) cho một đối tượng.
Hãy xem ví dụ sau:
function Hinh(chieuCao, chieuRong) {
this.chieuCao = chieuCao;
this.chieuRong = chieuRong;
}
function TuGiac(tongSoGocVuong, chieuCao, chieuRong) {
Hinh.call(this, chieuCao, chieuRong);
this.tongSoGocVuong = tongSoGocVuong;
}
let hinhVuong = new TuGiac(4, 100, 100);
Trong ví dụ này:
-
Đầu tiên, chúng ta tạo một hàm
Hinh với 2 thuộc tính chieuCao và chieuRong
-
Tiếp theo, trong hàm
TuGiac, chúng ta gọi phương thức call() của Hinh để thiết lập chieuCao và chieuRong cho hình tứ giác này.
khi đó, hàm TuGiac sẽ tương đương như thế này:
function TuGiac(tongSoGocVuong, chieuCao, chieuRong) {
this.chieuCao = chieuCao;
this.chieuRong = chieuRong;
this.tongSoGocVuong = tongSoGocVuong;
}
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);
Kết quả là:
Khởi động Su-34
Hành vì này được gọi là mượn hàm (function borrwing)
Các ứng dụng điển hình 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);
Kết quả:
[1, 3, 9]
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);
Tổng kết về call() trong JS
Như vậy, trong hướng dẫn này, bạn đã được tìm hiểu về phương thức call() trong JavaScript và biết cách sử dụng nó như thế nào.
Bạn sẽ gặp nó nhiều hơn khi chuyển sang HỌC FRONT END NÂNG CAO với các Framework như ReactJS.
Chúc bạn học tốt!
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0968051561
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python