理解原型

原型是一個對象，其他對象可以通過它實現(xiàn)屬性繼承。任何一個對象都可以成為繼承，所有對象在默認的情況下都有一個原型，因為原型本身也是對象，所以 每個原型自身又有一個原型。任何一個對象都有一個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語法后，都是通過面向函數(shù)來編程的。如下代碼：

var decimalDigits = 2, 
tax = 5; 
 
function add(x, y) { 
    return x + y; 
} 
 
function subtract(x, y) { 
    return x - y; 
} 
 
//alert(add(1, 3)); 

通過執(zhí)行各個函數(shù)來得到***的結果。但是利用原型，我們可以優(yōu)化一些我們的代碼，使用構造函數(shù)：

首先，函數(shù)本體中只存放變量：

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)); 

這樣就可以通過實例化對象后進行相應的函數(shù)操作。這也是一般的js框架采用的方法。

原型還有一個作用就是用來實現(xiàn)繼承。首先，定義父對象：

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 () { 
    //為每個實例都聲明一個稅收數(shù)字 
    this.tax = 5; 
}; 
 
Calculator.prototype = new BaseCalculator(); 

我們可以看到Calculator的原型是指向到BaseCalculator的一個實例上，目的是讓Calculator集成它的 add(x,y)和subtract(x,y)這2個function，還有一點要說的是，由于它的原型是BaseCalculator的一個實例，所以 不管你創(chuàng)建多少個Calculator對象實例，他們的原型指向的都是同一個實例。

上面的代碼，運行以后，我們可以看到因為Calculator的原型是指向BaseCalculator的實例上的，所以可以訪問他的 decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的構造函數(shù)里聲明的屬性值，那怎么辦呢？只需要 將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 

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

說到Object.prototype，就不得不提它的一個方法，hasOwnProperty。它能判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，它是javascript中唯一一個處理屬性但是不查找原型鏈的函數(shù)。使用代碼如下：

// 修改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