JavaScript 原型

在 JavaScript 中，原型是一個(gè)充當(dāng)其他物件藍(lán)圖的物件。 JavaScript 中的每個(gè)物件都有一個(gè)原型，原型本身就是一個(gè)對(duì)象，其中包含該物件的所有實(shí)例共享的屬性和方法。這個(gè)概念是 JavaScript 繼承機(jī)制的核心。

1. 什麼是原型？

每個(gè) JavaScript 物件都有一個(gè)名為 [[Prototype]] 的內(nèi)部屬性。該屬性引用另一個(gè)對(duì)象，它從該物件繼承屬性和方法。可以使用 __proto__ 屬性（在大多數(shù)瀏覽器中）或 Object.getPrototypeOf() 存取物件的原型。

例如，當(dāng)您建立新物件時(shí)，它會(huì)從其建構(gòu)函數(shù)的原型物件繼承屬性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

2. 原型鏈

在 JavaScript 中，物件在原型鏈中連結(jié)在一起。當(dāng)在物件上呼叫屬性或方法時(shí)，JavaScript 首先檢查該屬性或方法是否存在於物件本身上。如果沒有，JavaScript 將檢查物件的原型。如果在那裡沒有找到，JavaScript 會(huì)繼續(xù)檢查原型鏈，直到到達(dá) Object.prototype，也就是根原型物件。如果仍未找到該屬性或方法，則傳回 undefined。

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

function Dog(name) {
    Animal.call(this, name);  // Inherit properties from Animal
}

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

3. 新增方法

可以將方法加入建構(gòu)函式的原型中，這使得該建構(gòu)函式所建立的所有實(shí)例都可以存取這些方法。這是定義共享方法的更有效方法，而不是將它們直接添加到每個(gè)實(shí)例。

function Car(make, model) {
    this.make = make;
    this.model = model;
}

// Adding a method to the prototype
Car.prototype.displayInfo = function() {
    console.log(this.make + " " + this.model);
};

const car1 = new Car("Toyota", "Corolla");
car1.displayInfo();  // Output: "Toyota Corolla"

4. 建構(gòu)子與原型關(guān)係

原型物件與建構(gòu)函數(shù)緊密相關(guān)。當(dāng)您使用 new 關(guān)鍵字建立物件的實(shí)例時(shí)，JavaScript 會(huì)將該實(shí)例的 [[Prototype]] 設(shè)定為建構(gòu)函數(shù)的原型。

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}

Student.prototype.study = function() {
    console.log(this.name + " is studying.");
};

const student1 = new Student("Alice", "A");
console.log(student1.__proto__ === Student.prototype);  // true

5. 原型繼承

原型繼承允許一個(gè)物件從另一個(gè)物件繼承屬性和方法。這是 JavaScript 中物件導(dǎo)向繼承的一種形式。透過將一個(gè)物件的原型設(shè)定為另一個(gè)物件的原型，第一個(gè)物件可以存取第二個(gè)物件的屬性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

6. Object.getPrototypeOf() 和 Object.setPrototypeOf()

JavaScript 提供了 Object.getPrototypeOf() 和 Object.setPrototypeOf() 方法來(lái)擷取和修改物件的原型。但是，不建議在運(yùn)行時(shí)更改原型，因?yàn)樗赡軙?huì)影響效能。

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

function Dog(name) {
    Animal.call(this, name);  // Inherit properties from Animal
}

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

7. 原型與性能

雖然原型提供了一種共享方法和屬性的有效方法，但在創(chuàng)建後更改物件的原型可能會(huì)帶來(lái)效能缺陷。最佳實(shí)踐是以運(yùn)行時(shí)不需要修改的方式設(shè)定原型。

8. 重點(diǎn)總結(jié)

• 每個(gè)物件都有一個(gè)原型，這個(gè)原型也可能有一個(gè)原型，形成原型鏈。
• 原型是一個(gè)共享對(duì)象，物件從中繼承屬性和方法。
• 您可以在建構(gòu)函式的原型中定義共享方法。
• JavaScript 中的繼承 是透過將一個(gè)物件的原型連結(jié)到另一個(gè)物件的原型來(lái)實(shí)現(xiàn)的。
• Object.getPrototypeOf() 和 Object.setPrototypeOf() 允許您操作物件的原型。

結(jié)論

原型是 JavaScript 中的強(qiáng)大功能，可以實(shí)現(xiàn)高效的繼承和方法共享。了解它們的工作原理對(duì)於編寫更有效率、物件導(dǎo)向的 JavaScript 程式碼至關(guān)重要。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發(fā)人員，擁有前端和後端技術(shù)的專業(yè)知識(shí)。我使用各種程式語(yǔ)言和框架來(lái)建立高效、可擴(kuò)展且用戶友好的應(yīng)用程式。
請(qǐng)隨時(shí)透過我的商務(wù)電子郵件與我聯(lián)繫：kaashshorts28@gmail.com。

以上是了解 JavaScript 原型：繼承和方法共享綜合指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！