JavaScript之原型深入詳解

理解原型

原型是一個物件，其他物件可以通過它實現屬性繼承。任何一個物件都可以成為繼承，所有物件在預設的情況下都有一個原型，因為原型本身也是物件，所以每個原型自身又有一個原型。任何一個物件都有一個prototype的屬性，記為:__proto__。每當我們定義一個物件，其__proto__屬性就指向了其prototype。示例如下：

var foo = { 
x: 10, 
y: 20 
};

即使我們不指定prototype，該屬性也會預留。如果我們有明確指向的話，那麼連結串列就連起來了。需要注意的是，prototype自己也有指向，就是最高階的object.prototype。示例如下：

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 
} 
}; 
var b = { 
y: 20, 
__proto__: a 
}; 

var c = { 
y: 30, 
__proto__: a 
}; 

// call the inherited method 
b.calculate(30); // 60

使用原型

理解了原型的原理之後，如何使用原型呢？或者說原型有什麼作用呢？

一般的初學者，在剛剛學習了基本的javascript語法後，都是通過面向函式來程式設計的。如下程式碼：

var decimalDigits = 2,
	tax = 5;

function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

//alert(add(1, 3));

通過執行各個函式來得到最後的結果。但是利用原型，我們可以優化一些我們的程式碼，使用建構函式：

首先，函式本體中只存放變數：

var Calculator = function (decimalDigits, tax) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};

其具體的方法通過prototype屬性來設定：

Calculator.prototype = {
    add: function (x, y) {
        return x + y;
    },

    subtract: function (x, y) {
        return x - y;
    }
};
//alert((new Calculator()).add(1, 3));

這樣就可以通過例項化物件後進行相應的函式操作。這也是一般的js框架採用的方法。

原型還有一個作用就是用來實現繼承。首先，定義父物件：

var BaseCalculator = function() {
    this.decimalDigits = 2;
};

BaseCalculator.prototype = {
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

然後定義子物件，將子物件的原型指向父元素的例項化：

var Calculator = function () {
    //為每個例項都宣告一個稅收數字
    this.tax = 5;
};

Calculator.prototype = new BaseCalculator();

我們可以看到Calculator的原型是指向到BaseCalculator的一個例項上，目的是讓Calculator整合它的add(x,y)和subtract(x,y)這2個function，還有一點要說的是，由於它的原型是BaseCalculator的一個例項，所以不管你建立多少個Calculator物件例項，他們的原型指向的都是同一個例項。

上面的程式碼，執行以後，我們可以看到因為Calculator的原型是指向BaseCalculator的例項上的，所以可以訪問他的decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的建構函式裡宣告的屬性值，那怎麼辦呢？只需要將Calculator指向BaseCalculator的原型而不是例項就行了。程式碼如下：

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;

在使用第三方庫的時候，有時候他們定義的原型方法不能滿足我們的需要，我們就可以自己新增一些方法，程式碼如下：

//覆蓋前面Calculator的add() function 
Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));

原型鏈

物件的原型指向物件的父，而父的原型又指向父的父，這種原型層層的關係，叫做原型鏈。

在查詢一個物件的屬性時，javascript會向上遍歷原型鏈，直到找到給定名稱的屬性為止，當查詢到達原型鏈的頂部，也即是Object.prototype，仍然沒有找到指定的屬性，就會返回undefined。

示例如下：

function foo() {
    this.add = function (x, y) {
        return x + y;
    }
}

foo.prototype.add = function (x, y) {
    return x + y + 10;
}

Object.prototype.subtract = function (x, y) {
    return x - y;
}

var f = new foo();
alert(f.add(1, 2)); //結果是3，而不是13
alert(f.subtract(1, 2)); //結果是-1

我們可以發現，subtrace是按照向上找的原則，而add則出了意外。原因就是，屬性在查詢的時候是先查詢自身的屬性，如果沒有再查詢原型。

說到Object.prototype，就不得不提它的一個方法，hasOwnProperty。它能判斷一個物件是否包含自定義屬性而不是原型鏈上的屬性，它是javascript中唯一一個處理屬性但是不查詢原型鏈的函式。使用程式碼如下：

// 修改Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

而為了判斷prototype物件和某個例項之間的關係，又不得不介紹isPrototyleOf方法，演示如下：

alert(Cat.prototype.isPrototypeOf(cat2)); //true