初探原型與原型鏈：從基礎學習它們的功能-js教程-PHP中文網

初探原型與原型鏈：從基礎學習它們的功能

WBOY

發布： 2024-01-10 12:42:36

原創

738 人瀏覽過

初探原型與原型鏈：從基礎學習它們的功能

原型與原型鏈簡介：從零開始了解它們的作用，需要具體程式碼範例

引言：
在學習JavaScript時，經常會聽到有關原型（prototype）和原型鏈（prototype chain）的概念，它們是理解JavaScript的核心要點之一。然而，對於初學者來說，這些概念可能會有些抽象和複雜。本文將從零開始，透過具體的程式碼範例，介紹原型和原型鏈的作用和如何使用它們，幫助讀者更好地理解JavaScript中的原型機制。

一、原型（Prototype）
在JavaScript中，物件是透過建構函式（Constructor）建立的。每個建構函式都有一個屬性叫做原型（prototype），它指向一個物件。這個物件可以包含任意的屬性和方法。

建構子和原型的關係
建構子和原型之間有一個重要的連接，建構函式所建立的所有物件都可以存取這個原型物件中的屬性和方法。我們可以透過建構函數來建立多個對象，這些對象共享同一個原型對象，並可以使用原型對像中定義的屬性和方法。

下面是一個範例，透過建構函式創建了兩個對象，它們共享同一個原型對象：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + ", I am " + this.age + " years old.");
};

var person1 = new Person("Alice", 20);
person1.sayHello();  // 输出：Hello, my name is Alice, I am 20 years old.

var person2 = new Person("Bob", 25);
person2.sayHello();  // 输出：Hello, my name is Bob, I am 25 years old.

登入後複製

#原型的作用
#實現屬性和方法的共享：透過原型，可以將物件所需的屬性和方法定義在原型物件上，從而實現物件之間的屬性和方法的共享，節約記憶體空間。
擴展物件的功能：透過在原型物件上添加額外的屬性和方法，可以在不改變原始物件結構的基礎上，擴展物件的功能。

二、原型鏈（Prototype Chain）
原型鍊是一種物件之間透過原型屬性來連接的機制。當存取物件的屬性時，如果物件本身沒有這個屬性，JavaScript 會沿著原型鏈往上查找，直到找到該屬性或到達原型鏈的頂端。

原型鏈的建立和存取
每個物件都有一個內部屬性叫做[[Prototype]]，它指向該物件所繼承的原型物件。透過這個屬性，JavaScript 創建了原型鏈。

我們可以透過物件的 __proto__ 屬性來存取其原型對象，也可以透過 Object.getPrototypeOf(obj) 方法來取得原型對象。

下面是一個範例，演示了物件之間透過原型鏈的連接：

function Animal() {
  this.type = "animal";
}

Animal.prototype.sayType = function() {
  console.log("I am a " + this.type);
};

function Dog() {
  this.breed = "dog";
}

Dog.prototype = new Animal();

var dog = new Dog();
dog.sayType();  // 输出：I am a animal

登入後複製