Sử dụng JavaScript Mixins
Khi nói đến thành phần lớp nâng cao, JavaScript có khá nhiều cách tiếp cận - một loạt các tùy chọn thực sự. Một loại mô hình hiếm khi được phát hiện trong tự nhiên là mô hình kế thừa dựa trên mixin. Mixin thường bị các lập trình viên JavaScript mới bỏ qua (tôi cũng vậy). Tôi không muốn phàn nàn nhưng mixin đôi khi có thể khá dày để viết và hiểu. Nhưng chúng đi kèm với một loạt các tính năng đáng xem xét.
Mẫu mixin - như tên gọi - là một mẫu trộn lẫn một đối tượng với các đối tượng khác để thêm các thuộc tính mà ta cần. Hãy coi nó giống như các tiện ích bổ sung có thể cung cấp cho đối tượng của bạn các thuộc tính bổ sung, nhưng các thuộc tính riêng lẻ này không thực sự là lớp con.
Bề ngoài, các mixin hoạt động giống như các lớp trộn đối tượng, nơi ta chuyển mục tiêu (mixin) và nguồn. Đích được nối vào nguồn và một đối tượng mới được trả về.
Mô tả chính xác hơn là mixin hoạt động như một nhà máy, nơi một đối tượng lớp con mới được trả về. Trong toàn bộ quá trình này, không có định nghĩa nào về lớp con ở bất kỳ đâu.
Một phép tương tự C ++ hơn sẽ là so sánh chúng với các lớp trừu tượng với các hàm ảo, cho phép chúng được kế thừa bởi các lớp con khác.
Vì vậy, bây giờ ta đã biết mixin cho phép ta tạo một định nghĩa đã sửa đổi có thể được áp dụng cho các lớp cha hiện có để tạo các lớp con mới, hãy xem mixin trông như thế nào:
//The swim property here is the mixin
let swim = {
location() {
console.log(`Heading ${this.direction} at ${this.speed}`);
}
};
let Alligator = function(speed, direction) {
this.speed = speed,
this.direction = direction
};
//This is our source object
let alligator = new Alligator('20 mph','North');
alligator = Object.assign(alligator, swim);
console.log(alligator.location());
Trong đoạn mã trên, ta muốn tạo ra một con cá sấu có thể bơi. Vì vậy, ta tạo ra một alligator mới và sau đó cung cấp cho nó tính năng swim . Đối tượng swim là mixin hoặc một phần mở rộng mà ta muốn đối tượng alligator có bằng cách sử dụng phương thức Object.assign .
Phương thức Object.assign cho phép ta thêm nhiều mixin cùng một lúc. Một trường hợp nhiều mixin sẽ trông như thế này:
alligator = Object.assign(alligator, swim, crawl);
Bây giờ hãy xem cách mixin được dùng với các lớp ES6 :
let swim = {
setSwimProperties(speed, direction) {
this.speed = speed;
this.direction = direction;
},
getSwimProperties(){
console.log(`swimming ${this.speed} towards ${this.direction}`);
}
}
class Reptile {
constructor(name) {
this.name = name;
}
}
Object.assign(Reptile.prototype, swim);
let alligator = new Reptile("alligator");
alligator.setSwimProperties("5 m/s", "upstream");
alligator.getSwimProperties();
Ưu điểm của việc thêm chức năng thông qua phương pháp mixin là tính linh hoạt. Mixin là một hàm rất nguyên thủy, vì nó thực hiện chính xác một việc, cho phép ta sử dụng các cấu trúc này nhiều lần và trong nhiều tình huống khác nhau. Nó được dùng với lời gọi hàm root , được sử dụng trong định nghĩa lớp, v.v.
Một điều tốt nữa là nó có xu hướng giữ phân cấp lớp theo chiều ngang - bằng cách cho phép các lớp cha sử dụng các mixin để tạo các đối tượng mới có thuộc tính lớp con mong muốn hơn là làm cho chuỗi kế thừa dài hơn để tạo các kính con mới cho những trường hợp này.
Một số điều cần lưu ý khi sử dụng mixin:
-
Object.assign(cả trong thực thi đối tượng và lớp) chỉ thực hiện một bản sao ngắn của các thuộc tính mixin. - Có thể có xung đột tên tiềm ẩn khi sử dụng các thuộc tính từ các mixin khác nhau (vấn đề kim cương trong đa kế thừa)
- Có thể khá khó khăn để tìm ra thuộc tính kết hợp từ nguồn nào, vì các thuộc tính được sao chép vào đối tượng nguồn. Toán tử
instanceofkhông thể giúp ta ở đây.
Các tin liên quan
Đọc mã nguồn JavaScript, sử dụng AST2019-02-09
JavaScript Biểu thức chính quy cho Người bình thường
2019-02-07
Mẫu kế thừa nguyên mẫu JavaScript
2019-02-01
Các mẫu hướng đối tượng JavaScript: Mẫu nhà máy
2019-01-23
Đối tượng, Nguyên mẫu và Lớp trong JavaScript
2019-01-10
Thủ thuật với JavaScript Hủy cấu trúc
2018-11-26
Đừng sợ theo dõi JavaScript
2018-10-17
Làm phẳng mảng trong Vanilla JavaScript với flat () và flatMap ()
2018-09-28
Cách sử dụng các phương thức đối tượng trong JavaScript
2018-08-03
Xử lý lỗi trong JavaScript Sử dụng try ... catch
2018-08-03
