JavaScript xử lý tính kế thừa trong các đối tượng như thế nào?

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

console.log(person.toString());
Code language: JavaScript (javascript)

6

let person = {
    name: "John Doe",
    greet: function () {
        return "Hi, I'm " + this.name;
    }
};
Code language: JavaScript (javascript)

Trong ví dụ này, đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6 có một thuộc tính và một phương thức

• console.log(person.toString());
  Code language: JavaScript (javascript)

  8 là thuộc tính lưu trữ tên của người đó

• console.log(person.toString());
  Code language: JavaScript (javascript)

  9 là phương thức trả về lời chào dưới dạng chuỗi

Theo mặc định, công cụ JavaScript cung cấp cho bạn hàm

[object Object]
Code language: JavaScript (javascript)

0 tích hợp và một đối tượng ẩn danh có thể được tham chiếu bởi

[object Object]
Code language: JavaScript (javascript)

1

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

[object Object]
Code language: JavaScript (javascript)

0.

[object Object]
Code language: JavaScript (javascript)

3 đại diện cho liên kết

Điều đó có nghĩa là đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

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ởi

[object Object]



Code language: JavaScript (javascript)

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ượng

console.log(person.toString());
Code language: JavaScript (javascript)

6

console.log(person.toString());
Code language: JavaScript (javascript)

đầu ra

[object Object]
Code language: JavaScript (javascript)

[object Object]
Code language: JavaScript (javascript)

8 là biểu diễn chuỗi mặc định của một đối tượng

Khi bạn gọi phương thức

[object Object]
Code language: JavaScript (javascript)

6 qua

console.log(person.toString());
Code language: JavaScript (javascript)

6, công cụ JavaScript không thể tìm thấy nó trên đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

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ượng

[object Object]
Code language: JavaScript (javascript)

1

Vì công cụ JavaScript có thể tìm thấy phương thức

[object Object]
Code language: JavaScript (javascript)

6 trong đối tượng

[object Object]
Code language: JavaScript (javascript)

1, nên nó sẽ thực thi phương thức

[object Object]
Code language: JavaScript (javascript)

6

Để truy cập nguyên mẫu của đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6, bạn có thể sử dụng thuộc tính

console.log(person.toString());
Code language: JavaScript (javascript)

47 như sau

console.log(person.toString());
Code language: JavaScript (javascript)

4

Sau đây cho thấy các tham chiếu

console.log(person.toString());
Code language: JavaScript (javascript)

48 và

[object Object]



Code language: JavaScript (javascript)

1 cùng một đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

8

Phần sau định nghĩa đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80 có phương thức

console.log(person.toString());
Code language: JavaScript (javascript)

81

console.log(person.toString());
Code language: JavaScript (javascript)

1

Giống như đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6,

console.log(person.toString());
Code language: JavaScript (javascript)

83 tham chiếu đến

[object Object]
Code language: JavaScript (javascript)

1 như minh họa trong hình dưới đây

Nếu bạn muốn đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80 truy cập tất cả các phương thức và thuộc tính của đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6, bạn có thể đặt nguyên mẫu của đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80 thành đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6 như thế này

console.log(person.toString());
Code language: JavaScript (javascript)

9

Lưu ý rằng bạn không bao giờ được sử dụng thuộc tính

console.log(person.toString());
Code language: JavaScript (javascript)

47 trong mã sản xuất. Vui lòng chỉ sử dụng nó cho mục đích trình diễn

Bây giờ, đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80 có thể truy cập thuộc tính

console.log(person.toString());
Code language: JavaScript (javascript)

8 và phương thức

console.log(person.toString());



Code language: JavaScript (javascript)

12 từ đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6 thông qua chuỗi nguyên mẫu

console.log(person.toString());
Code language: JavaScript (javascript)

5

đầu ra

console.log(person.toString());
Code language: JavaScript (javascript)

6

Khi bạn gọi phương thức

console.log(person.toString());
Code language: JavaScript (javascript)

12 trên đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80, công cụ JavaScript sẽ tìm thấy nó trong đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80 trước

Vì công cụ JavaScript không thể tìm thấy phương thức trong đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80, nên nó sẽ theo chuỗi nguyên mẫu và tìm kiếm phương thức trong đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6. Bởi vì công cụ JavaScript có thể tìm thấy phương thức

console.log(person.toString());
Code language: JavaScript (javascript)

12 trong đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6, nên nó sẽ thực thi phương thức

Trong JavaScript, chúng tôi nói rằng đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

80 kế thừa các phương thức và thuộc tính của đối tượng

console.log(person.toString());
Code language: JavaScript (javascript)

6. Và kiểu thừa kế này được gọi là thừa kế nguyên mẫu

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

console.log(person.toString());
Code language: JavaScript (javascript)

93

Lưu ý rằng bây giờ bạn nên sử dụng các từ khóa ES6

console.log(person.toString());
Code language: JavaScript (javascript)

94 và

console.log(person.toString());
Code language: JavaScript (javascript)

95 mới hơn để thực hiện kế thừa. Nó đơn giản hơn nhiều

Phương thức

console.log(person.toString());
Code language: JavaScript (javascript)

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ới

JavaScript hỗ trợ kế thừa như thế nào?

Loại cơ chế kế thừa nào được sử dụng trong JavaScript?

Mảng có kế thừa từ đối tượng trong JavaScript không?