Nguyên mẫu JavaScript và tính kế thừa – và tại sao họ nói mọi thứ trong JS là một đối tượng

Chào mọi người! Trong bài viết ngắn này, chúng ta sẽ nói về kế thừa nguyên mẫu trong JavaScript và ý nghĩa của nó là gì.

Mục lục

Bạn đã bao giờ tự hỏi làm thế nào các chuỗi, mảng hoặc đối tượng “biết” các phương thức mà mỗi chúng có chưa? Làm thế nào để một chuỗi biết nó có thể .toUpperCase() hoặc một mảng biết rằng nó có thể .sort()? Chúng tôi chưa bao giờ xác định các phương thức này theo cách thủ công, phải không?

Câu trả lời là các phương thức này được tích hợp sẵn trong từng loại cấu trúc dữ liệu nhờ một thứ gọi là kế thừa nguyên mẫu.

Trong JavaScript, một đối tượng có thể kế thừa các thuộc tính của một đối tượng khác. Đối tượng từ đó các thuộc tính được kế thừa được gọi là nguyên mẫu. Nói tóm lại, các đối tượng có thể kế thừa các thuộc tính từ các đối tượng khác – các nguyên mẫu.

Có lẽ bạn đang tự hỏi: tại sao lại cần thừa kế ngay từ đầu? Chà, kế thừa giải quyết vấn đề trùng lặp dữ liệu và logic. Bằng cách kế thừa, các đối tượng có thể chia sẻ các thuộc tính và phương thức mà không cần thiết lập thủ công các thuộc tính và phương thức đó trên mỗi đối tượng.

Làm thế nào để Mộttruy cập một Pnguyên mẫu Ptài sản và mđạo đức trong JavaScript

Khi chúng ta cố gắng truy cập một thuộc tính của một đối tượng, thuộc tính đó không chỉ được tìm kiếm trong chính đối tượng đó. Nó cũng được tìm kiếm trong nguyên mẫu của đối tượng, trong nguyên mẫu của nguyên mẫu, v.v. – cho đến khi tìm thấy một thuộc tính khớp với tên hoặc phần cuối của đối tượng. chuỗi nguyên mẫu đạt được.

Nếu thuộc tính hoặc phương thức không được tìm thấy ở bất kỳ đâu trong chuỗi nguyên mẫu, chỉ khi đó JavaScript mới trả về undefined.

Mọi đối tượng trong JavaScript đều có một thuộc tính bên trong được gọi là [[Prototype]].

Nếu chúng ta tạo một mảng và ghi nó vào bảng điều khiển như thế này:

const arr = [1,2,3]
console.log(arr)

Chúng ta sẽ thấy điều này:

Dấu ngoặc vuông kép kèm theo [[Prototype]] biểu thị rằng đó là thuộc tính nội bộ và không thể truy cập trực tiếp bằng mã.

Để tìm [[Prototype]] của một đối tượng, chúng ta sẽ sử dụng Object.getPrototypeOf() phương pháp.

const arr = [1,2,3]
console.log(Object.getPrototypeOf(arr))

Đầu ra sẽ bao gồm một số thuộc tính và phương thức tích hợp:

Hãy nhớ rằng các nguyên mẫu cũng có thể được thay đổi và sửa đổi thông qua các phương pháp khác nhau.

Các Pnguyên mẫu Chain

Ở cuối chuỗi nguyên mẫu là Object.prototype. Tất cả các đối tượng kế thừa các thuộc tính và phương thức của Object. Bất kỳ nỗ lực nào để tìm kiếm ngoài phần cuối của chuỗi đều dẫn đến null.

Nếu bạn tìm nguyên mẫu của nguyên mẫu của một mảng, một hàm hoặc một chuỗi, bạn sẽ thấy đó là một đối tượng. Và đó là bởi vì trong JavaScript, tất cả các đối tượng đều là hậu duệ hoặc thể hiện của Object.prototypelà một đối tượng đặt thuộc tính và phương thức cho tất cả các loại dữ liệu JavaScript khác.

const arr = [1,2,3]
const arrProto = Object.getPrototypeOf(arr)
console.log(Object.getPrototypeOf(arrProto))

Mỗi loại nguyên mẫu (ví dụ nguyên mẫu mảng) định nghĩa các phương thức và thuộc tính riêng của nó và trong một số trường hợp ghi đè lên Object.prototype phương thức và thuộc tính (đó là lý do tại sao mảng có phương thức mà đối tượng không có).

Nhưng dưới mui xe và đi lên bậc thang của chuỗi nguyên mẫu, mọi thứ trong JavaScript đều được xây dựng dựa trên Object.prototype.

Nếu chúng ta cố gắng nhìn vào nguyên mẫu của Object.prototype chúng tôi nhận được null.

const arr = [1,2,3]
const arrProto = Object.getPrototypeOf(arr)
const objectProto = Object.getPrototypeOf(arrProto)
console.log(Object.getPrototypeOf(objectProto))

Ngôn ngữ dựa trên nguyên mẫu

JavaScript là một ngôn ngữ dựa trên nguyên mẫunghĩa là các thuộc tính và phương thức của đối tượng có thể được chia sẻ thông qua các đối tượng tổng quát có khả năng được nhân bản và mở rộng.

Khi nói đến tính kế thừa, JavaScript chỉ có một cấu trúc duy nhất: các đối tượng.

Mỗi đối tượng có một thuộc tính riêng (được gọi là [[Prototype]]) duy trì một liên kết đến một đối tượng khác được gọi là nguyên mẫu của nó. Đối tượng nguyên mẫu đó có nguyên mẫu riêng, v.v. cho đến khi một đối tượng có nguyên mẫu null đạt được.

Theo định nghĩa, null không có nguyên mẫu và đóng vai trò là liên kết cuối cùng trong chuỗi nguyên mẫu này.

Điều này được gọi là kế thừa nguyên mẫu và khác với kế thừa lớp. Trong số các ngôn ngữ lập trình hướng đối tượng phổ biến, JavaScript tương đối độc đáo, vì các ngôn ngữ nổi bật khác như PHP, Python và Java là các ngôn ngữ dựa trên lớp, thay vào đó định nghĩa các lớp là bản thiết kế cho các đối tượng.

Tại thời điểm này, bạn có thể nghĩ “Nhưng chúng ta CÓ THỂ triển khai các lớp trên JavaScript!”. Và vâng, chúng tôi có thể, nhưng dưới dạng đường cú pháp. 🤫🤔

Lớp Javascript

Các lớp là một cách để thiết lập một kế hoạch chi tiết để tạo các đối tượng với các thuộc tính và phương thức được xác định trước. Bằng cách tạo một lớp với các thuộc tính và phương thức cụ thể, sau này bạn có thể khởi tạo các đối tượng từ lớp đó, lớp này sẽ kế thừa tất cả các thuộc tính và phương thức mà lớp đó có.

Trong JavaScript, chúng ta có thể tạo các lớp theo cách sau:

class Alien {
    constructor (name, phrase) {
        this.name = name
        this.phrase = phrase
        this.species = "alien"
    }
    fly = () => console.log("Zzzzzziiiiiinnnnnggggg!!")
    sayPhrase = () => console.log(this.phrase)
}

Và sau đó chúng ta có thể khởi tạo một đối tượng từ lớp đó như thế này:

const alien1 = new Alien("Ali", "I'm Ali the alien!")
console.log(alien1.name) // output: "Ali"

Các lớp được sử dụng như một cách để làm cho mã có tính mô-đun hơn, có tổ chức và dễ hiểu hơn và được sử dụng nhiều trong lập trình OOP.

Nhưng hãy nhớ rằng JavaScript không thực sự hỗ trợ các lớp như các ngôn ngữ khác. Các class từ khóa đã được giới thiệu với ES6 dưới dạng đường cú pháp tạo điều kiện thuận lợi cho cách tổ chức mã này.

Để hình dung điều này, hãy xem điều tương tự mà chúng ta đã làm bằng cách xác định trước đó một classchúng ta có thể làm điều đó bằng cách định nghĩa một hàm và chỉnh sửa nguyên mẫu theo cách sau:

function Alien(name, phrase) {
    this.name = name
    this.phrase = phrase
    this.species = "alien"
}

Alien.prototype.fly = () => console.log("Zzzzzziiiiiinnnnnggggg!!")
Alien.prototype.sayPhrase = () => console.log(this.phrase)

const alien1 = new Alien("Ali", "I'm Ali the alien!")

console.log(alien1.name) // output "Ali"
console.log(alien1.phrase) // output "I'm Ali the alien!"
alien1.fly() // output "Zzzzzziiiiiinnnnnggggg"

Bất kỳ hàm nào cũng có thể được gọi như một hàm tạo với từ khóa new và thuộc tính nguyên mẫu của hàm đó được sử dụng để đối tượng kế thừa các phương thức từ đó. Trong JavaScript, “lớp” chỉ được sử dụng về mặt khái niệm để mô tả cách thực hành trên – về mặt kỹ thuật, chúng chỉ là các hàm.😑

Mặc dù điều này không nhất thiết tạo ra nhiều sự khác biệt (chúng ta vẫn có thể triển khai OOP một cách hoàn hảo và sử dụng các lớp như trong hầu hết các ngôn ngữ lập trình khác), điều quan trọng cần nhớ là JavaScript được xây dựng với sự kế thừa nguyên mẫu ở cốt lõi của nó.

Vậy đó, mọi người! Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Nếu muốn, bạn cũng có thể theo dõi tôi trên LinkedIn hoặc Twitter.

Chúc mừng và hẹn gặp lại bạn trong phần tiếp theo! =Đ