JavaScript原型與原型鏈是什么

JavaScript原型與原型鏈是什么

在JavaScript中，原型（Prototype）和原型鏈（Prototype Chain）是兩個非常重要的概念，它們構成了JavaScript對象繼承的基礎。理解原型和原型鏈對于掌握JavaScript的面向對象編程至關重要。

1. 原型（Prototype）

在JavaScript中，每個對象都有一個原型（Prototype），原型是一個對象，它包含了共享的屬性和方法。當我們訪問一個對象的屬性或方法時，如果該對象本身沒有這個屬性或方法，JavaScript引擎會沿著原型鏈向上查找，直到找到該屬性或方法為止。

1.1 原型對象

在JavaScript中，每個函數都有一個prototype屬性，這個屬性指向一個對象，這個對象就是該函數的原型對象。當我們使用new關鍵字創建一個實例時，這個實例的__proto__屬性會指向構造函數的prototype對象。

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.sayHello(); // 輸出: Hello, my name is Alice

在上面的例子中，Person函數的prototype屬性指向一個對象，這個對象包含了一個sayHello方法。當我們創建person1實例時，person1的__proto__屬性指向Person.prototype，因此person1可以調用sayHello方法。

1.2 原型繼承

原型繼承是JavaScript中實現繼承的一種方式。通過原型繼承，子類可以繼承父類的屬性和方法。

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

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

function Dog(name) {
    Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    console.log(`${this.name} barks.`);
};

const dog1 = new Dog('Rex');
dog1.speak(); // 輸出: Rex makes a noise.
dog1.bark();  // 輸出: Rex barks.

在這個例子中，Dog繼承了Animal的屬性和方法。通過Object.create(Animal.prototype)，Dog的原型對象指向了Animal的原型對象，從而實現了繼承。

2. 原型鏈（Prototype Chain）

原型鏈是JavaScript中對象之間通過原型連接起來的一條鏈。當我們訪問一個對象的屬性或方法時，如果該對象本身沒有這個屬性或方法，JavaScript引擎會沿著原型鏈向上查找，直到找到該屬性或方法為止，或者到達原型鏈的頂端（null）。

2.1 原型鏈的形成

每個對象都有一個__proto__屬性，這個屬性指向該對象的原型對象。原型對象本身也是一個對象，因此它也有自己的__proto__屬性，指向它的原型對象。這樣一層一層地連接起來，就形成了原型鏈。

const obj = {};
console.log(obj.__proto__ === Object.prototype); // 輸出: true
console.log(Object.prototype.__proto__); // 輸出: null

在這個例子中，obj是一個空對象，它的__proto__屬性指向Object.prototype，而Object.prototype的__proto__屬性為null，表示原型鏈的頂端。

2.2 原型鏈的查找過程

當我們訪問一個對象的屬性或方法時，JavaScript引擎會按照以下步驟進行查找：

1. 首先查找對象本身是否有該屬性或方法。
2. 如果沒有，則查找對象的__proto__屬性指向的原型對象。
3. 如果原型對象中也沒有，則繼續查找原型對象的__proto__屬性指向的原型對象。
4. 直到找到該屬性或方法，或者到達原型鏈的頂端（null）。

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.sayHello(); // 輸出: Hello, my name is Alice

console.log(person1.hasOwnProperty('name')); // 輸出: true
console.log(person1.hasOwnProperty('sayHello')); // 輸出: false
console.log(person1.__proto__.hasOwnProperty('sayHello')); // 輸出: true

在這個例子中，person1對象本身沒有sayHello方法，因此JavaScript引擎會沿著原型鏈向上查找，最終在Person.prototype中找到了sayHello方法。

3. 總結

原型和原型鏈是JavaScript中實現對象繼承的基礎。通過原型，我們可以共享屬性和方法，減少內存消耗。通過原型鏈，我們可以實現屬性和方法的繼承，使得代碼更加簡潔和可維護。

理解原型和原型鏈的工作原理，有助于我們更好地掌握JavaScript的面向對象編程，編寫出更加高效和優雅的代碼。