Mẫu kế thừa nguyên mẫu JavaScript
JavaScript không chứa các lớp và nhưng nó vẫn là một ngôn ngữ hướng đối tượng mạnh mẽ. Quan hệ đối tượng-đối tượng trong JavaScript được triển khai với prototype và kết quả là mẫu nguyên mẫu rất độc đáo đối với JavaScript.
Trước khi có cú pháp class ES6 , chủ đề kế thừa hầu như gây nhầm lẫn cho các nhà phát triển đến từ các ngôn ngữ khác. Điều này là do JS, theo ý kiến khiêm tốn của tôi, là một ngôn ngữ hướng đối tượng thực sự.
Điều này làm cho việc nắm bắt ý tưởng kế thừa trong các đối tượng JavaScript khá khó khăn, chẳng hạn như: làm thế nào để bạn tạo các đối tượng mới có cùng thuộc tính mà không có lớp? . Bài viết này là một nỗ lực để giải thích nó và cách thuộc tính này áp dụng cho một mẫu hướng đối tượng cụ thể trong JavaScript.
Như ta đã thấy trước đây, các đối tượng trong JavaScript có khả năng kế thừa trực tiếp từ các đối tượng khác thông qua một thuộc tính dùng chung được gọi là prototype và cách prototype được sử dụng để triển khai kế thừa trong các đối tượng JavaScript.
Bây giờ, kế thừa này không phải là kế thừa truyền thống mà ta đã sử dụng trong các ngôn ngữ dựa trên lớp mà thay vào đó nó là thứ có thể so sánh với ủy quyền đối tượng . Đại khái là, nếu một thuộc tính cụ thể không được tìm thấy trong một đối tượng, thì tôi sẽ kiểm tra nguyên mẫu của nó để biết định nghĩa của thuộc tính được đề cập.
Đây là một đoạn mã nhanh để cho thấy những gì tôi đang nói đến:
let Alligator = function(color) {
this.color = color;
}
Alligator.prototype.introduce = function() {
console.log('I am ' + this.color);
}
let Croc = function(color) {
Alligator.call(this, color);
}
Croc.prototype = Object.create(Alligator.prototype)
let alligatorObj = new Alligator('green');
let crocObj = new Croc('yellow');
alligatorObj.introduce(); // I am green
crocObj.introduce(); // I am yellow
Vì vậy, những gì đã xảy ra ở trên là đây - ví dụ của croc có một bản sao của một prototype liên kết với prototype của Croc và đến lượt nó lại liên kết với prototype của Alligator . prototype Alligator có thể cung cấp cho ta định nghĩa cho introduce() .
Đây là ý tôi muốn nói đến việc ủy quyền , tìm kiếm hành vi đích bên trong các đối tượng (tức là prototype ). Ngoài ra, các nguyên mẫu JavaScript có thể liên kết với nhiều nguyên mẫu, vì vậy theo cách đó ta cũng có thể có đa kế thừa, nhưng đó thường là một ý tưởng tồi trong thực tế.
Đoạn mã là một ví dụ về cách mã đối tượng-đối tượng trông như thế nào. Nó rất nguyên thủy nhưng tạo điều kiện chuyển trực tiếp các thuộc tính và phương thức giữa các đối tượng. Điều này được tích hợp vào thiết kế của JavaScript; đường cú pháp lớp hoặc hàm tạo chỉ đơn giản là các shell bọc bên trên để làm cho nó giống như OOP cổ điển.
Hầu hết thời gian, mẫu nguyên mẫu rất đơn giản và dễ thực hiện. Tại sao? Do hiểu biết cổ điển của ta về các đối tượng và lớp, ta mong đợi một hàm khởi tạo sẽ tạo ra một thể hiện cho ta . Trong JavaScript, bất kỳ hàm nào cũng có thể là một hàm tạo, như sau:
function Alligator(color) {
This.color = color;
}
Let alligator = new Alligator('purple');
Tất cả những gì ta phải làm là đặt tiền tố từ khóa new vào lệnh gọi hàm và ta có một đối tượng. Tất cả những gì từ khóa new làm là nó gọi hàm Alligator() như một phương thức khởi tạo bằng cách liên kết hàm this (là ngữ cảnh mới) với lệnh gọi hàm. Có cảm giác như ta đang cố gắng làm cho mẫu đối tượng cổ điển hoạt động trong JavaScript. So với điều này, mẫu nguyên mẫu cho cảm giác trực quan. Cũng lưu ý theo quy ước, các hàm được sử dụng như một hàm khởi tạo cho các đối tượng mới phải bắt đầu bằng một chữ cái in hoa, nếu không sẽ khá khó hiểu khi không biết từ khóa new nên được sử dụng ở đâu.
Các tin liên quan
Các mẫu hướng đối tượng JavaScript: Mẫu nhà máy2019-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
Hiểu sự kiện trong JavaScript
2018-06-19
Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval
2018-06-12
Hiểu các lớp trong JavaScript
2018-05-04
