JavaScript原型與原型鏈知識點有哪些

JavaScript原型與原型鏈知識點有哪些

JavaScript 是一種基于原型的面向對象編程語言，理解原型與原型鏈是掌握 JavaScript 面向對象編程的關鍵。本文將詳細介紹 JavaScript 原型與原型鏈的相關知識點。

1. 原型（Prototype）

1.1 什么是原型

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

1.2 原型的作用

原型的主要作用是實現屬性和方法的共享。通過原型，我們可以避免在每個對象實例中重復定義相同的屬性和方法，從而節省內存。

1.3 獲取原型

在 JavaScript 中，可以通過以下方式獲取對象的原型：

• Object.getPrototypeOf(obj)：獲取對象 obj 的原型。
• obj.__proto__：非標準屬性，用于獲取對象 obj 的原型（不推薦使用）。

const obj = {};
console.log(Object.getPrototypeOf(obj)); // {}
console.log(obj.__proto__); // {}

2. 原型鏈（Prototype Chain）

2.1 什么是原型鏈

原型鏈是由對象的原型組成的鏈式結構。當我們訪問一個對象的屬性或方法時，如果該對象本身沒有這個屬性或方法，JavaScript 會沿著原型鏈向上查找，直到找到該屬性或方法為止。如果最終沒有找到，則返回 undefined。

2.2 原型鏈的形成

原型鏈的形成是通過對象的 __proto__ 屬性實現的。每個對象都有一個 __proto__ 屬性，指向其構造函數的原型對象。構造函數的原型對象也有一個 __proto__ 屬性，指向其構造函數的原型對象，依此類推，直到 Object.prototype，Object.prototype 的 __proto__ 為 null，原型鏈到此結束。

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

2.3 原型鏈的查找過程

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

1. 查找對象本身是否有該屬性或方法。
2. 如果沒有，查找對象的原型（__proto__）是否有該屬性或方法。
3. 如果還沒有，繼續沿著原型鏈向上查找，直到 Object.prototype。
4. 如果最終沒有找到，返回 undefined。

const obj = {};
obj.toString(); // "[object Object]"

在上面的例子中，obj 本身沒有 toString 方法，但 Object.prototype 上有 toString 方法，因此 JavaScript 會沿著原型鏈找到 Object.prototype 上的 toString 方法并調用。

3. 構造函數與原型

3.1 構造函數

構造函數是用來創建對象的函數。通過 new 關鍵字調用構造函數時，會創建一個新對象，并將該對象的原型指向構造函數的 prototype 屬性。

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

const person = new Person('Alice');
console.log(person.name); // Alice

3.2 構造函數的 prototype 屬性

每個函數都有一個 prototype 屬性，指向一個對象。這個對象就是通過該構造函數創建的所有實例的原型。

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

在上面的例子中，Person.prototype 是 person 對象的原型，person 對象可以訪問 Person.prototype 上的 sayHello 方法。

3.3 修改原型

我們可以通過修改構造函數的 prototype 屬性來動態地添加或修改原型上的屬性和方法。

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

Person.prototype.sayGoodbye = function() {
  console.log(`Goodbye, ${this.name}`);
};

person.sayGoodbye(); // Goodbye, Alice

在上面的例子中，我們動態地添加了 sayGoodbye 方法，person 對象可以立即訪問到該方法。

4. 繼承與原型鏈

4.1 原型鏈繼承

在 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 dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark(); // Rex barks.

在上面的例子中，Dog 繼承了 Animal 的屬性和方法。通過 Object.create(Animal.prototype)，我們將 Dog.prototype 的原型指向 Animal.prototype，從而實現了繼承。

4.2 原型鏈繼承的缺點

原型鏈繼承的主要缺點是所有實例共享同一個原型對象，如果原型對象上的屬性是引用類型，那么所有實例都會共享這個引用類型的屬性，這可能會導致意外的修改。

function Animal() {
  this.colors = ['red', 'blue'];
}

function Dog() {}

Dog.prototype = new Animal();

const dog1 = new Dog();
dog1.colors.push('green');

const dog2 = new Dog();
console.log(dog2.colors); // ['red', 'blue', 'green']

在上面的例子中，dog1 修改了 colors 數組，dog2 的 colors 數組也被修改了。

5. 總結

• 原型是 JavaScript 中實現屬性和方法共享的機制。
• 原型鏈是由對象的原型組成的鏈式結構，用于查找對象的屬性和方法。
• 構造函數通過 prototype 屬性定義原型，實例通過 __proto__ 屬性訪問原型。
• 繼承是通過原型鏈實現的，但需要注意原型鏈繼承的缺點。

理解原型與原型鏈是掌握 JavaScript 面向對象編程的基礎，希望本文能幫助你更好地理解這些概念。