Nếu bạn đã từng làm việc với các ngôn ngữ lập trình hướng đối tượng khác như Java hoặc C++, thì bạn đã quen với khái niệm kế thừa.
Trong mô hình lập trình này, một lớp là một kế hoạch chi tiết để tạo các đối tượng. Nếu bạn muốn một lớp mới sử dụng lại chức năng của một lớp hiện có, bạn có thể tạo một lớp mới mở rộng lớp hiện có. Đây được gọi là kế thừa cổ điển
JavaScript không sử dụng kế thừa cổ điển. Thay vào đó, nó sử dụng kế thừa nguyên mẫu
Trong kế thừa nguyên mẫu, một đối tượng “kế thừa” các thuộc tính từ một đối tượng khác thông qua liên kết nguyên mẫu
Kế thừa nguyên mẫu JavaScript và __proto__
Hãy lấy một ví dụ để làm rõ khái niệm
Sau đây định nghĩa một đối tượng
6Code language: JavaScript [javascript]
console.log[person.toString[]];
Code language: JavaScript [javascript]
let person = { name: "John Doe", greet: function [] { return "Hi, I'm " + this.name; } };
Trong ví dụ này, đối tượng
6 có một thuộc tính và một phương thứcCode language: JavaScript [javascript]
console.log[person.toString[]];
8 là thuộc tính lưu trữ tên của người đó
Code language: JavaScript [javascript]console.log[person.toString[]];
9 là phương thức trả về lời chào dưới dạng chuỗi
Code language: JavaScript [javascript]console.log[person.toString[]];
Theo mặc định, công cụ JavaScript cung cấp cho bạn hàm
0 tích hợp và một đối tượng ẩn danh có thể được tham chiếu bởiCode language: JavaScript [javascript]
[object Object]
1Code language: JavaScript [javascript]
[object Object]
Lưu ý rằng hình tròn đại diện cho một chức năng trong khi hình vuông đại diện cho một đối tượng
Đối tượng người có liên kết đến đối tượng ẩn danh được tham chiếu bởi hàm
0.Code language: JavaScript [javascript]
[object Object]
3 đại diện cho liên kếtCode language: JavaScript [javascript]
[object Object]
Điều đó có nghĩa là đối tượng
6 có thể gọi bất kỳ phương thức nào được xác định trong đối tượng ẩn danh được tham chiếu bởiCode language: JavaScript [javascript]
console.log[person.toString[]];
1. Ví dụ: phần sau đây trình bày cách gọi phương thức
[object Object]
Code language: JavaScript [javascript]
6 thông qua đối tượngCode language: JavaScript [javascript]
[object Object]
6Code language: JavaScript [javascript]
console.log[person.toString[]];
Code language: JavaScript [javascript]
console.log[person.toString[]];
đầu ra
Code language: JavaScript [javascript]
[object Object]
8 là biểu diễn chuỗi mặc định của một đối tượngCode language: JavaScript [javascript]
[object Object]
Khi bạn gọi phương thức
6 quaCode language: JavaScript [javascript]
[object Object]
6, công cụ JavaScript không thể tìm thấy nó trên đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
6. Do đó, công cụ JavaScript tuân theo chuỗi nguyên mẫu và tìm kiếm phương thức trong đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
1Code language: JavaScript [javascript]
[object Object]
Vì công cụ JavaScript có thể tìm thấy phương thức
6 trong đối tượngCode language: JavaScript [javascript]
[object Object]
1, nên nó sẽ thực thi phương thứcCode language: JavaScript [javascript]
[object Object]
6Code language: JavaScript [javascript]
[object Object]
Để truy cập nguyên mẫu của đối tượng
6, bạn có thể sử dụng thuộc tínhCode language: JavaScript [javascript]
console.log[person.toString[]];
47 như sauCode language: JavaScript [javascript]
console.log[person.toString[]];
4Code language: JavaScript [javascript]
console.log[person.toString[]];
Sau đây cho thấy các tham chiếu
48 vàCode language: JavaScript [javascript]
console.log[person.toString[]];
1 cùng một đối tượng
[object Object]
Code language: JavaScript [javascript]
8Code language: JavaScript [javascript]
console.log[person.toString[]];
Phần sau định nghĩa đối tượng
80 có phương thứcCode language: JavaScript [javascript]
console.log[person.toString[]];
81Code language: JavaScript [javascript]
console.log[person.toString[]];
1Code language: JavaScript [javascript]
console.log[person.toString[]];
Giống như đối tượng
6,Code language: JavaScript [javascript]
console.log[person.toString[]];
83 tham chiếu đếnCode language: JavaScript [javascript]
console.log[person.toString[]];
1 như minh họa trong hình dưới đâyCode language: JavaScript [javascript]
[object Object]
Nếu bạn muốn đối tượng
80 truy cập tất cả các phương thức và thuộc tính của đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
6, bạn có thể đặt nguyên mẫu của đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
80 thành đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
6 như thế nàyCode language: JavaScript [javascript]
console.log[person.toString[]];
9Code language: JavaScript [javascript]
console.log[person.toString[]];
Lưu ý rằng bạn không bao giờ được sử dụng thuộc tính
47 trong mã sản xuất. Vui lòng chỉ sử dụng nó cho mục đích trình diễnCode language: JavaScript [javascript]
console.log[person.toString[]];
Bây giờ, đối tượng
80 có thể truy cập thuộc tínhCode language: JavaScript [javascript]
console.log[person.toString[]];
8 và phương thứcCode language: JavaScript [javascript]
console.log[person.toString[]];
12 từ đối tượng
console.log[person.toString[]];
Code language: JavaScript [javascript]
6 thông qua chuỗi nguyên mẫuCode language: JavaScript [javascript]
console.log[person.toString[]];
5Code language: JavaScript [javascript]
console.log[person.toString[]];
đầu ra
6Code language: JavaScript [javascript]
console.log[person.toString[]];
Khi bạn gọi phương thức
12 trên đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
80, công cụ JavaScript sẽ tìm thấy nó trong đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
80 trướcCode language: JavaScript [javascript]
console.log[person.toString[]];
Vì công cụ JavaScript không thể tìm thấy phương thức trong đối tượng
80, nên nó sẽ theo chuỗi nguyên mẫu và tìm kiếm phương thức trong đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
6. Bởi vì công cụ JavaScript có thể tìm thấy phương thứcCode language: JavaScript [javascript]
console.log[person.toString[]];
12 trong đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
6, nên nó sẽ thực thi phương thứcCode language: JavaScript [javascript]
console.log[person.toString[]];
Trong JavaScript, chúng tôi nói rằng đối tượng
80 kế thừa các phương thức và thuộc tính của đối tượngCode language: JavaScript [javascript]
console.log[person.toString[]];
6. Và kiểu thừa kế này được gọi là thừa kế nguyên mẫuCode language: JavaScript [javascript]
console.log[person.toString[]];
Một cách tiêu chuẩn để triển khai kế thừa nguyên mẫu trong ES5
ES5 đã cung cấp một cách tiêu chuẩn để làm việc với kế thừa nguyên mẫu bằng cách sử dụng phương thức
93Code language: JavaScript [javascript]
console.log[person.toString[]];
Lưu ý rằng bây giờ bạn nên sử dụng các từ khóa ES6
94 vàCode language: JavaScript [javascript]
console.log[person.toString[]];
95 mới hơn để thực hiện kế thừa. Nó đơn giản hơn nhiềuCode language: JavaScript [javascript]
console.log[person.toString[]];
Phương thức
93 tạo một đối tượng mới và sử dụng một đối tượng hiện có làm nguyên mẫu của đối tượng mớiCode language: JavaScript [javascript]
console.log[person.toString[]];