導(dǎo)言：

在以類(lèi)為中心的面向?qū)ο缶幊陶Z(yǔ)言中，類(lèi)和對(duì)象的關(guān)系可以想象成鑄模和鑄件的關(guān)系汽烦，對(duì)象總是總類(lèi)中創(chuàng)建而來(lái)涛菠。而在原型編程思想中，類(lèi)并不是必須的刹缝，對(duì)象也不必要從類(lèi)中創(chuàng)建而來(lái)碗暗，一個(gè)對(duì)象是克隆另外一個(gè)對(duì)象創(chuàng)建而來(lái)的，原型模式不僅僅是一種設(shè)計(jì)模式梢夯，也是一種編程范式

1.使用克隆的原型模式

如果要使用原型模式言疗，那么我們只需要負(fù)責(zé)調(diào)用克隆的方法，便能完成克隆對(duì)象的功能颂砸。原型模式的實(shí)現(xiàn)關(guān)鍵是語(yǔ)言本身是否提供了克隆方法噪奄，ECMAscript5提供了一個(gè)方法可以用來(lái)克隆對(duì)象這個(gè)方法是Object.creat().代碼如下：

var Plane = function () {

? ? ? this.blood = 100;

? ? ? this.attracklevel=1;

? ? ? this.defenselevel=0.5

}

var plane = new Plane()

plane.blood = 500;

plane.attracklevel=10

var clonePlane = Object.create(plane) ?// 克隆對(duì)象

clonePlane.blood // ?500

以上代碼是通過(guò)使用Object.cteate()來(lái)克隆一個(gè)對(duì)象的副本，但是有些瀏覽器并不支持Object.create()方法人乓，那么這是我們?yōu)榱俗黾嫒菘梢赃M(jìn)行這樣的處理勤篮，代碼如下：

Object.create = Object.create || function (obj) { // obj是要被克隆的對(duì)象

? ? // 通過(guò)構(gòu)造函數(shù)的方式來(lái)克隆

? ? var F = function () {}

? ? F.prototype = obj;

? ? return new F()

}

在瀏覽器控制臺(tái)運(yùn)行這段代碼：

var a = {name: 'steve'}

var b = Object.create(a) // 得到對(duì)象a的一個(gè)副本，但是對(duì)象a和對(duì)象b的地址引用肯定是不相等的

console.log(b) ?// 得到的是steve

2.克隆是創(chuàng)建對(duì)象的手段

????上面的代碼中我們知道了如何通過(guò)原型模式來(lái)克隆出一個(gè)對(duì)象色罚，但是原型模式的真正目的并不是創(chuàng)建出一個(gè)一模一樣的對(duì)象碰缔，而是提供了便捷的方式去創(chuàng)建某個(gè)類(lèi)型的對(duì)象，克隆只是創(chuàng)建對(duì)象的過(guò)程和手段戳护。

? ? 我們?cè)谶M(jìn)行編程的時(shí)候有一個(gè)非常重要的原則金抡，那就是依賴導(dǎo)致原則，那么什么是依賴倒置原則了腌且？所謂的依賴倒置就是說(shuō)創(chuàng)建對(duì)象的時(shí)候避免依賴具體的類(lèi)型梗肝，就像java等靜態(tài)類(lèi)型的語(yǔ)言進(jìn)行編程的時(shí)候，類(lèi)型之間的解耦是非常重要的铺董，通過(guò)new XXX的方式創(chuàng)建對(duì)象顯得很僵硬巫击，因此就有了工廠方法和抽象工廠模式方法來(lái)幫助我們解決這個(gè)問(wèn)題，但是這兩種方法帶來(lái)的結(jié)果是最終會(huì)出現(xiàn)很多平行的工廠類(lèi)精续，這就會(huì)導(dǎo)致額外的代碼坝锰，如有一個(gè)創(chuàng)建狗的工廠：

function dogFactory (name,age) {

? ? var obj = new Object();

? ? obj.name = name;

? ? obj.age = age

? ? return obj

}

有一個(gè)創(chuàng)建貓的工廠：

function catFactory (name,age) {

var obj = new Object();

obj.name = name;

obj.age = age

return obj

}

很明顯創(chuàng)建狗的工廠和創(chuàng)建貓的工廠的內(nèi)部的代碼是一模一樣的，只是工廠名字變了驻右，由此可見(jiàn)這兩個(gè)平行的工廠額外的增加了代碼量什黑，這顯然是不期望的。在js中堪夭，原型模式為我們提供了另外一種創(chuàng)建對(duì)象的方式愕把，就是通過(guò)克隆對(duì)象拣凹，而不是像上面一樣從一個(gè)工廠類(lèi)中創(chuàng)建對(duì)象。通過(guò)克隆對(duì)象我們就不在關(guān)心對(duì)象的具體類(lèi)型是什么了恨豁，因此通過(guò)原型模式創(chuàng)建對(duì)象就會(huì)顯得非常容易嚣镜，也不存在類(lèi)型耦合的問(wèn)題。其實(shí)javascript的對(duì)象系統(tǒng)就是通過(guò)原型模式來(lái)搭建的橘蜜，所有的對(duì)象都是從某個(gè)對(duì)象上克隆而來(lái)的菊匿。既然整個(gè)對(duì)象系統(tǒng)是基于原型搭建的，那么這種原型模式也一定遵循一些編程規(guī)范计福，接下來(lái)了解一下原型編程規(guī)范的基本規(guī)則

3原型編程規(guī)范基本規(guī)則

1.所有的數(shù)據(jù)都是對(duì)象跌捆，例如前面的var F = function(){}，這個(gè)函數(shù)不僅僅是一個(gè)函數(shù)象颖，他也是一個(gè)對(duì)象佩厚，其實(shí)函數(shù)在js中就是一等公民，也就是說(shuō)函數(shù)就是對(duì)象说订，具體一點(diǎn)的解釋如下：

javascript在設(shè)計(jì)的時(shí)候抄瓦，模仿java引入了兩套類(lèi)型機(jī)制，基本類(lèi)型和引用類(lèi)型陶冷，基本類(lèi)型包括

undefined,number,bool,string,function,object,但是這并不是一個(gè)好的想法钙姊，按照javascript設(shè)計(jì)者本意的想法是出來(lái)undefined,其余的都是對(duì)象，為了實(shí)現(xiàn)這一目標(biāo)埂伦，number,bool,string這幾種基本類(lèi)型數(shù)據(jù)可以通過(guò)包裝類(lèi)型的方式變成對(duì)象類(lèi)型數(shù)據(jù)來(lái)處理煞额。什么意思了？有點(diǎn)不明白沾谜，function 立镶，object是對(duì)象是可以接受的，但是number,bool,string 不就是一個(gè)數(shù)字类早，一個(gè)布爾值，一個(gè)字符串嗎嗜逻，怎么能成為對(duì)象了涩僻，這顯然很矛盾，但時(shí)當(dāng)我們知道了包裝類(lèi)型的時(shí)候問(wèn)題就會(huì)立馬得到解決栈顷，所謂的包裝類(lèi)型就是javascript提供了Numer,Bool,String這樣的構(gòu)造函數(shù)逆日，通過(guò)將上面幾個(gè)基本類(lèi)型的首字母換成大寫(xiě)字母就得到了對(duì)應(yīng)的包裝類(lèi)型，如通過(guò)var s = String('abc')可以將字符創(chuàng)abc轉(zhuǎn)換為對(duì)象類(lèi)型來(lái)處理,

事實(shí)上萄凤，我們并不能說(shuō)在javascript中所有的數(shù)據(jù)都是對(duì)象室抽，但可以說(shuō)絕大部分是對(duì)象，那么我們相信在js中一定會(huì)有一個(gè)根對(duì)象存在靡努，其實(shí)這個(gè)根對(duì)象就是Object.prototype(是Object構(gòu)造器的原型)坪圾，這個(gè)對(duì)象是一個(gè)空的對(duì)象晓折，其實(shí)我們遇到的每一個(gè)對(duì)象最終都是從Object.prototype克隆而來(lái)的。如：

創(chuàng)建兩個(gè)對(duì)象obj1和obj2兽泄，

var obj1 = {} ;var obj2 = new Object();利用es5提供的getPrototypeOf()來(lái)查看這兩個(gè)對(duì)象的原型

console.log(Object.getPrototypeOf(obj1) === Object.prototype) // true

console.log(Object.getPrototypeOf(obj2) === Object.prototype) ?// true

2.要得到一個(gè)對(duì)象不是通過(guò)實(shí)例化類(lèi)漓概，而是找到一個(gè)對(duì)象作為原型并且克隆他。

如：找到一個(gè)對(duì)象a = {name: 'steve'},將啊作為F的原型來(lái)克隆a

var creatObj = function () {

? ? var F = function () {}

? ? F.prototype = a

? ? return new F() // 得到一個(gè)a的副本,到這一步我們應(yīng)該很困惑病梢，為什么沒(méi)有類(lèi)的概念胃珍，而在這里卻用了new，其實(shí)這里的F比不是類(lèi)蜓陌，而是一個(gè)構(gòu)造函數(shù)觅彰，這里使用new運(yùn)算符來(lái)創(chuàng)建兌現(xiàn)的過(guò)程實(shí)際上也只是先克隆Object.prototype對(duì)象，然后在進(jìn)行一些其他額外的操作

}

可已通過(guò)下面的代碼來(lái)理解new運(yùn)算的過(guò)程

// 創(chuàng)建一個(gè)構(gòu)造函數(shù)Person

function Person (name) {

? ? ? ? this.name = name

}

// 在構(gòu)造函數(shù)的原型對(duì)象上掛在一個(gè)方法

Person.prototype.getName = function () {

? return this.name

}

// 創(chuàng)建一個(gè)克隆兌現(xiàn)的工廠

var objFactory = function () {

? ? // 創(chuàng)建一個(gè)對(duì)象钮热，將其加工處理后最終返回出去

? ? var obj ?= ?new Object()

? ? Consructor = [].shift.call(arguments) // 拿到第一個(gè)參數(shù)填抬，這里是一個(gè)構(gòu)造函數(shù)，shift會(huì)改變?cè)瓟?shù)組

? ? obj._proto_ = Constructor.prototype ?// 讓obj指向正確的原型

? ? var ret = Constructor.apply(obj,arguments) // 借用外部傳入的構(gòu)造器給obj設(shè)置屬性霉旗，也就是我前面說(shuō)的對(duì)obj進(jìn)行加工處理

? ? return ?typeof ret === 'object' ? ret : obj // 既然是對(duì)象工廠痴奏，那么最終一定要返回出去一個(gè)對(duì)象

}

var a = objFactory(Person,'steve')

console.log(a.name) // steve

console.log(a.getName()) // steve

console.log(Object.getPrototypeOf(a) === Person.prototype)// true, 很明顯得到兌現(xiàn)的原型就是對(duì)應(yīng)構(gòu)造函數(shù)的原型

3.對(duì)象會(huì)記住他的原型： 所有的對(duì)象都有一個(gè)_proto_屬性，對(duì)象就是通過(guò)這個(gè)屬性來(lái)記住他的原型的

4.如果對(duì)象無(wú)法響應(yīng)某個(gè)請(qǐng)求厌秒，那么就會(huì)把請(qǐng)求委托給他的原型