Tiếp tục series tìm hiểu về các phương thức nâng cao trong JavaScript. Trong bài viết này, bạn sẽ được tìm hiểu về phương thức apply() trong JavaScript của kiểu Function và cách sử dụng nó một cách hiệu quả.
Giới thiệu về phương thức apply() trong JS
Phương thức Function.prototype.apply() cho phép bạn gọi một hàm với giá trị this đã cho và các đối số được cung cấp dưới dạng một mảng.
Đây là cú pháp của phương thức apply():
fn.apply(thisArg, [args]);
Trong đó, phương thức apply() chấp nhận hai đối số:
-
thisArg là giá trị của giá trị this được cung cấp cho lệnh gọi hàm fn.
-
Đối số
args là một mảng xác định các đối số của hàm fn. Kể từ ES5, đối số args có thể là một đối tượng giống mảng hoặc đối tượng mảng.
Phương thức apply() tương tự như phương thức call() ngoại trừ việc nó nhận các đối số của hàm dưới dạng một mảng thay vì các đối số riêng lẻ.
Ví dụ sử dụng phương thức apply() trong JS
Để hiểu về cách sử dụng apply(), chúng ta cùng đi vào một vài ví dụ cụ thể:
VD1: Sử dụng apply() theo cách đơn giản
Giả sử, bạn có một đối tượng sinhVien:
const sinhVien = {
ten: "Ngọc Anh",
tuoi: 18
}
Và một hàm chao() như sau:
function chao(loiChao, hoiTham) {
return `${loiChao} ${this.ten}. ${hoiTham}`;
}
Hàm chao() chấp nhận hai tham số: loiChao và hoiTham.
Bên trong hàm chao(), chúng ta tham chiếu đến một đối tượng có thuộc tính ten.
Ví dụ sau đây cho thấy cách sử dụng phương thức apply() để gọi hàm chao() với this của đối tượng sinhVien:
let ketQua = chao.apply(sinhVien, ["Chào", "Khỏe không?"]);
console.log(ketQua);
Ta nhận được:
Chào Ngọc Anh. Khỏe không?
Trong ví dụ này, chúng ta đặt giá trị this bên trong hàm cho đối tượng sinhVien. Các đối số của hàm chao() được truyền vào phương thức apply() dưới dạng một mảng.
Phương thức apply() đã gọi hàm chao() với giá trị this được hiểu là tham chiếu đến đối tượng sinhVien và các đối số ở dưới dạng mảng ["Chào", "Khỏe không?"]
Nếu bạn sử dụng phương thức call(), bạn cần chuyển các đối số của hàm chao() một cách riêng biệt như sau:
let ketQua = chao.call(sinhVien, "Chào", "Khỏe không?");
VD2: Sử dụng apply() để mượn hàm
Phương thức apply() cho phép một đối tượng mượn phương thức của một đối tượng khác mà không cần sao chép code.
Giả sử rằng bạn có đối tượng lapTop sau:
const lapTop = {
name: "Macbook",
isOn: false,
turnOn() {
this.isOn = true;
return `${this.name} đang mở`;
},
turnOff() {
this.isOn = false;
return `${this.name} đang tắt`;
}
};
Và đối tượng mobile như sau:
const mobile = {
name: "iPhone",
isOn: false
};
Lưu ý là đối tượng mobile không có phương thức turnOn() và turnOff().
Nhưng bây giờ, với phương thức apply() bạn cũng có thể mượn được hai phương thức trên của đối tượng lapTop, ví dụ:
let ketQua = lapTop.turnOn.apply(mobile);
console.log(ketQua);
Kết quả:
iPhone đang mở
Như bạn thấy, ta có thể mượn được phương thức turnOn() của đối tượng lapTop mà không cần sao chép code.
Tương tự, gọi phương thức turnOff() trên đối tượng mobile:
let ketQua = lapTop.turnOff.apply(mobile);
VD3: Sử dụng apply() để nối một mảng vào một mảng khác
Phương thức apply() cho phép bạn nối các phần tử của một mảng vào một mảng khác:
let mang1 = [1, 2, 3];
let mang2 = [4, 5, 6];
// Nối mang2 vào cuối mang1
mang1.push.apply(mang1, mang2);
console.log(mang1);
Kết quả:
[1, 2, 3, 4, 5, 6]
Trong ví dụ này, phương thức apply() sửa đổi mảng mang1 ban đầu.
Phương thức Array.prototype.concat() cũng cung cấp cùng một kết quả ngoại trừ việc nó trả về mảng mới thay vì sửa đổi mảng ban đầu như apply().
Tổng kết về phương thức apply() trong JavaScript
Như vậy, trong bài viết này bạn đã được tìm hiểu về phương thức apply() trong JavaScript, nắm được:
-
Phương thức
apply() gọi một hàm với giá trị this đã cho và các đối số được cung cấp dưới dạng một mảng.
-
Phương thức
apply() tương tự như phương thức call() ngoại trừ việc nó chấp nhận các đối số của hàm dưới dạng một mảng thay vì các đối số riêng lẻ.
Nếu bạn chưa hiểu rõ lắm về apply() thì hãy làm lại ví dụ trên vài lần và tìm hiểu thêm trên Mozilla
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