JavaScript中原型與原型鏈的程式碼講解

這篇文章帶給大家的內容是關於JavaScript中原型與原型鏈的程式碼講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

對於許多前端開發者而言，JavaScript中原型與原型鍊是一個比較容易疑惑的點，所以本文記錄了自己對應這方面的一點理解，以後有更深的理解再來更新。

物件

想要了解原型與原型鏈，首先要了解什麼是物件？物件導向程式設計（Object Oriented Programming，縮寫為 OOP）是目前主流的程式設計範式，即把實際上各種複雜關係抽象化為多個物件後對它們進行分工合作從而完成對現實環境的模擬。因此物件是單一實物的抽象，抽象所得的物件是一個容器，擁有屬性（property）和方法（method）。例如，我們把學生抽象化為student對象，那麼屬性就可以用來記錄具體是哪一個年級的學生（如初一、高一等），用方法來表示學生的某種行為（如學習、玩耍等）。

建構子（constructor）、實例物件與繼承

當我們想要使用物件導向程式設計時，首要任務就是產生物件。在JavaScript中，建構函式（constructor）就是專門用來產生實例物件的。一個建構函數，可以產生多個實例對象，這些實例物件都有相同的結構。

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

特別要注意的是：

• 以上程式碼中，Student就是建構函數，但是為了與普通函數區分，其名字的首字母要大寫。

• 函數體內部使用了this關鍵字，代表了所要產生的物件實例。

• 產生物件的時候，必須使用new指令。只有new了才會產生新的實例物件。

除了用new指令產生新的實例對象，我們也可以透過Object.create() 來創建，這種方法適用於我們沒有辦法拿到建構子而只能拿到一個現有的對象。

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

上面程式碼中，Object.create方法以student1物件為原型，產生了student2物件。 student2繼承了student1的所有屬性和方法。

原型物件（prototype）

首先讓我們來了解為什麼會有原型物件（prototype）？

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

從以上程式碼可以看到，透過建構函式實例出的對象，雖然都具有greeting方法，但是因為這個方法是產生在自身的每個實例物件上，也就是每產生一個實例就會新建一個greeting方法。但其實greeting方法都是一樣的，沒有必要多次產生造成資源浪費，於是JavaScript的原型物件就誕生了。 JavaScript規定，每個函數都有prototype屬性，指向一個物件。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

上面程式碼中，建構子Animal的prototype屬性，就是實例物件cat1和cat2的原型物件。原型物件上新增一個color屬性，結果，實例物件都共享了該屬性。

原型物件的屬性不是實例物件本身的屬性。只要修改原型對象，變動立刻就會體現在所有實例對像上。

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

如果實例物件本身就有某個屬性或方法，它就不會再去原型物件尋找這個屬性或方法。

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

原型鏈（prototype chain）

JavaScript 規定，所有物件都有自己的原型物件（prototype）。一方面，任何一個對象，都可以充當其他對象的原型；另一方面，由於原型對像也是對象，所以它也有自己的原型。因此，就會形成一個「原型鏈」（prototype chain）：物件到原型，再到原型的原型…

#如果一層層地上溯，所有物件的原型最終都可以上溯到Object. prototype，即Object建構函式的prototype屬性。也就是說，所有物件都繼承了Object.prototype的屬性。 Object.prototype的原型是null。 null沒有任何屬性和方法，也沒有自己的原型。因此，原型鏈的盡頭就是null。

#

以上是JavaScript中原型與原型鏈的程式碼講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！