了解 JavaScript 原型：繼承和方法共享綜合指南

JavaScript 原型

在 JavaScript 中，原型是一個充當其他物件藍圖的物件。 JavaScript 中的每個物件都有一個原型，原型本身就是一個對象，其中包含該物件的所有實例共享的屬性和方法。這個概念是 JavaScript 繼承機制的核心。

1. 什麼是原型？

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

例如，當您建立新物件時，它會從其建構函數的原型物件繼承屬性和方法。

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 中，物件在原型鏈中連結在一起。當在物件上呼叫屬性或方法時，JavaScript 首先檢查該屬性或方法是否存在於物件本身上。如果沒有，JavaScript 將檢查物件的原型。如果在那裡沒有找到，JavaScript 會繼續檢查原型鏈，直到到達 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. 新增方法

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

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. 建構子與原型關係

原型物件與建構函數緊密相關。當您使用 new 關鍵字建立物件的實例時，JavaScript 會將該實例的 [[Prototype]] 設定為建構函數的原型。

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. 原型繼承

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

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() 方法來擷取和修改物件的原型。但是，不建議在運行時更改原型，因為它可能會影響效能。

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. 原型與性能

雖然原型提供了一種共享方法和屬性的有效方法，但在創建後更改物件的原型可能會帶來效能缺陷。最佳實踐是以運行時不需要修改的方式設定原型。

8. 重點總結

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

結論

原型是 JavaScript 中的強大功能，可以實現高效的繼承和方法共享。了解它們的工作原理對於編寫更有效率、物件導向的 JavaScript 程式碼至關重要。

---

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是了解 JavaScript 原型：繼承和方法共享綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！