理解原型

原型是一個(gè)對(duì)象，其他對(duì)象可以通過它實(shí)現(xiàn)屬性繼承。任何一個(gè)對(duì)象都可以成為繼承，所有對(duì)象在默認(rèn)的情況下都有一個(gè)原型，因?yàn)樵捅旧硪彩菍?duì)象，所以 每個(gè)原型自身又有一個(gè)原型。任何一個(gè)對(duì)象都有一個(gè)prototype的屬性，記為:__proto__。每當(dāng)我們定義一個(gè)對(duì)象，其__proto__屬性 就指向了其prototype。示例如下：

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

即使我們不指定prototype，該屬性也會(huì)預(yù)留。如果我們有明確指向的話，那么鏈表就連起來了。需要注意的是，prototype自己也有指向，就是***級(jí)的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 

使用原型

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

一般的初學(xué)者，在剛剛學(xué)習(xí)了基本的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í)行各個(gè)函數(shù)來得到***的結(jié)果。但是利用原型，我們可以優(yōu)化一些我們的代碼，使用構(gòu)造函數(shù)：

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

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

其具體的方法通過prototype屬性來設(shè)置：

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

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

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

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

然后定義子對(duì)象，將子對(duì)象的原型指向父元素的實(shí)例化：

var Calculator = function () { 
    //為每個(gè)實(shí)例都聲明一個(gè)稅收數(shù)字 
    this.tax = 5; 
}; 
 
Calculator.prototype = new BaseCalculator(); 

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

上面的代碼，運(yùn)行以后，我們可以看到因?yàn)镃alculator的原型是指向BaseCalculator的實(shí)例上的，所以可以訪問他的 decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的構(gòu)造函數(shù)里聲明的屬性值，那怎么辦呢？只需要 將Calculator指向BaseCalculator的原型而不是實(shí)例就行了。代碼如下：

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

在使用第三方庫的時(shí)候，有時(shí)候他們定義的原型方法不能滿足我們的需要，我們就可以自己添加一些方法，代碼如下：

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

原型鏈

對(duì)象的原型指向?qū)ο蟮母福傅脑陀种赶蚋傅母?，這種原型層層的關(guān)系，叫做原型鏈。

在查找一個(gè)對(duì)象的屬性時(shí)，javascript會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止，當(dāng)查找到達(dá)原型鏈的頂部，也即是Object.prototype，仍然沒有找到指定的屬性，就會(huì)返回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)); //結(jié)果是3，而不是13 
alert(f.subtract(1, 2)); //結(jié)果是-1 

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

說到Object.prototype，就不得不提它的一個(gè)方法，hasOwnProperty。它能判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性，它是javascript中唯一一個(gè)處理屬性但是不查找原型鏈的函數(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對(duì)象和某個(gè)實(shí)例之間的關(guān)系，又不得不介紹isPrototyleOf方法，演示如下：

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