理解原型與原型鏈

原型與原型鏈是學習JavaScript這門語言不能不理解的兩個重要概念，為什么？因為JavaScript是一門基於原型的語言。

怎么理解“JavaScript是一門基於原型的語言”？在軟件設計模式中，有一種模式叫做原型模式，JavaScript正是利用這種模式而被創建出來。先來了解下原型模式的概念：原型模式是用於創建重復的對象，同時又能保證性能。這種類型的設計模式屬於創建型模式，它提供了一種創建對象的最佳方式。這種模式是實現了一個原型接口，該接口用於創建當前對象的克隆。原型模式的目的是用原型實例指定創建對象的種類，並且通過拷貝這些原型創建新的對象。也就是說利用已有的一個原型對象，可以快速地生成和原型對象一樣的新對象實例。

 

原型：

原型到底是什么？原型是一個可以被復制（或者叫克隆）的一個類，通過復制原型可以創建一個一模一樣的新對象。通俗的說，原型就是一個模板，在設計語言中更准確的說是一個對象模板。

 

看下面一段代碼來理解原型：

var Person = function(name){
    this.name = name;
}
            
Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}
            
var joe = new Person("joe");
var john = new Person("john");
            
joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

從上面的代碼可以看出來，原型（Person）定義了一些公用的屬性和方法；利用原型（Person）創建出來的新對象實例（joe和john對象）會共享原型（Person）的所有屬性和方法。

 

把代碼修改一下：

"use strict";

var Person = function(name){
    this.name = name;
}
            
var joe = new Person("joe");
var john = new Person("john");

Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}
            
joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

這次把新創建的對象（joe和John）提前到原型（Person）的sayHi方法定義之前，並使用嚴格模式。原型（Person）的sayHi方法依然會被共享出去，所以原型（Person）的屬性和方法總是被原型實例所共享。

 

再來修改下代碼：

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

Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}

var joe = new Person("joe");
var john = new Person("john");

joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

joe.getName = function(){
    console.log(this.name);
}

joe.getName();    //joe
john.getName();   //undefined

 這次為新對象實例（joe)添加getName方法，最后只有實例（joe)擁有該方法，而另一個實例（john）並沒有getName方法，這說明：通過原型創建的新對象實例是相互獨立的。

也正是因為這樣對象的使用才能更加靈活、更加易於擴展。

 

原型鏈：

在javascript中，所有的對象都擁有一個__proto__屬性指向該對象的原型（prototype)。在上面的代碼中，執行console.log(joe.__proto__)后在控制台可以看到輸出了原型（Person），然后繼續執行console.log(Person.__proto__)，控制台打印的結果是function(){}，為什么Person的原型是function呢？這是因為Person是一個構造函數，它的本質就是一個函數。在javascript中函數是一等對象。

現在用箭頭符號來表示上面原型創建的過程：

joe.__proto__  =>  Person,

Person.__proto__  =>  function(){}

由此可見，原型鏈記錄了原型對象創建的整個過程，因此，我給原型鏈添加一個概念：原型鏈是原型對象創建過程的歷史記錄。

 

原型設計帶來的問題：

當查找一個對象的屬性時，JavaScript 會根據原型鏈向上遍歷對象的原型，直到找到給定名稱的屬性為止。直到到達原型鏈的頂部仍然沒有找到指定的屬性，就會返回 undefined。

 

使用 for in 循環可以遍歷對象所有的屬性，包括該對象在原型鏈中的屬性，如：

var A = {
    a:1,
    b:2
};
                
var B = Object.create(A);
var C = Object.create(B);
            
B.c = 3;
C.d = 4;

console.log(c)    //{d:4}
            
for(var key in c){
    console.log(c[key])
}

//會在控制台中依次打印出4 3 1 2 

注意在控制台中打印的順序是 4 3 1 2，而不是 1 2 3 4。為什么？因為C的原型是B，B的原型是A。C對象只有一個d屬性，執行for...in時先返回C.d，然后在從C的原型（B）中查找到並返回B.c，再從B的原型（A）中查找到並返回A.a和A.b，最后從A的原型（Object）中查找，發現Object中沒有任何屬性，於是結束for...in。所以最后的結果是 4 3 1 2。這就解釋了原型鏈繼承時查找屬性的過程是先查找自身屬性，當自身屬性不存在時，會在原型鏈中逐級查找。

有時只需檢查對象自身的屬性，那么，這種消耗就是一種浪費，怎么解決呢？

 

hasOwnProperty 函數：

hasOwnProperty 函數可以用來檢查對象自身是否含有某個屬性，返回值是布爾值，當屬性不存在時不會向上查找對象原型鏈。

 

在上面的代碼中添加下面的代碼，看看 hasOwnProperty 和 for in 的區別：

...

if（var "a" in C){
    console.log(c["a"]) //屬性 a 是原型鏈上的屬性， 輸出 1
}

if（C.hasOwnProperty("a")){
    console.log(c["a"]) //屬性 a 不是自身屬性，不會執行這一步
}

hasOwnProperty 函數只能檢查對象是否擁有某個屬性，那如何遍歷對象的自身屬性？

 

getOwnPropertyNames 函數：

getOwnPropertyNames 函數可以獲取對象所有的自身屬性，返回值是由對象自身屬性名稱組成的數組，同樣不會向上查找對象原型鏈。

如：

console.log(Object.getOwnPropertyNames(C))  //輸出 ["d"]

 

利用getOwnPropertyNames 函數遍歷所有對象所有自身屬性，例：

（fucntion(){
    var
    o = {a:1, b:2},
    propertys = Object.getOwnPropertyNames(o),
    len = propertys.length;

    for(var i = 0; i < len; i++){
        var key = propertys[i];
        console.log(o[key])      //輸出 1, 2
    }
})();