了解 JavaScript 原型：繼承和方法共享綜合指南-js教程-PHP中文網

Understanding JavaScript Prototypes: A Comprehensive Guide to Inheritance and Method Sharing

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."

登入後複製