本文實(shí)例講述了JavaScript原型與原型鏈用法。分享給大家供大家參考，具體如下：

一句話說(shuō)明什么是原型：原型就是一個(gè)JavaScript對(duì)象，原型能存儲(chǔ)我們的方法，構(gòu)造函數(shù)創(chuàng)建出來(lái)的實(shí)例對(duì)象能夠引用原型中的方法。

一、傳統(tǒng)構(gòu)造函數(shù)的問(wèn)題

有如下代碼

function Foo(){ this.sayHello = function(){ }}

由于對(duì)象是調(diào)用new Foo()所創(chuàng)建出來(lái)的，因此每一個(gè)對(duì)象在創(chuàng)建的時(shí)候，函數(shù) sayHello 都會(huì)唄創(chuàng)建一次

那么有沒(méi)一個(gè)對(duì)象都含有一個(gè)獨(dú)立的，不同的，但是功能邏輯一樣的函數(shù)，比如：{} == {}。

在代碼中方法就會(huì)消耗性能，最典型的資源就越是內(nèi)存

這里最好的方法就是將函數(shù)放在構(gòu)造函數(shù)之外，那么在構(gòu)造函數(shù)中引用該函數(shù)即可

function sayHello () {}function Foo () { this.say = sayHello；}

會(huì)在開(kāi)發(fā)中變得困難：引入框架危險(xiǎn)，代碼繁冗不好維護(hù)。解決方法就是如果外面的函數(shù)不占用其名字，而且在函數(shù)名下。

每一個(gè)函數(shù)在定義的時(shí)候，有一個(gè)神秘對(duì)象（就是原型對(duì)象，暫且這么稱(chēng)呼）被創(chuàng)建出來(lái)。

每一個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)默認(rèn)的連接到該神秘對(duì)象上。

var f1 = new Foo();var f2 = new Foo();f1.sayHello(); //如果f1沒(méi)有sayHello那么就會(huì)在Foo.prototype中去找

由構(gòu)造函數(shù)創(chuàng)建出來(lái)的眾多對(duì)象共享一個(gè)對(duì)象就是：構(gòu)造函數(shù).prototype

只需要將共享的東西，重復(fù)會(huì)多占用內(nèi)存的東西放到構(gòu)造函數(shù).prototype中，那么所有的對(duì)象就可以共享了。

function Foo(){}Foo.prototype.sayHello = function(){ console.log('….');}var f1 = new Foo();f1.sayHello();var f2 = new Foo();f2.sayHello();console.log(f1.sayHello === f2.sayHello); // true二、一些相關(guān)概念

類(lèi)class：在JS中就是構(gòu)造函數(shù)

在傳統(tǒng)的面向?qū)ο笳Z(yǔ)言中，使用一個(gè)叫類(lèi)的東西定義模板，然后使用模板創(chuàng)建對(duì)象。 在構(gòu)造方法中也具有類(lèi)似的功能，因此也稱(chēng)其為類(lèi)

實(shí)例（instance）與對(duì)象（object）

實(shí)例一般是指某一個(gè)構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象，我們稱(chēng)為XXXX 構(gòu)造函數(shù)的實(shí)例 實(shí)例就是對(duì)象。對(duì)象是一個(gè)泛稱(chēng) 實(shí)例與對(duì)象是一個(gè)近義詞

鍵值對(duì)與屬性和方法

在JS中鍵值對(duì)的集合稱(chēng)為對(duì)象 如果值為數(shù)據(jù)（非函數(shù)），就稱(chēng)該鍵值對(duì)為屬性 如果值為函數(shù)（方法），就稱(chēng)該鍵值對(duì)為方法method

父類(lèi)與子類(lèi)（基類(lèi)和派生類(lèi)）

傳統(tǒng)的面向?qū)ο笳Z(yǔ)言中使用類(lèi)來(lái)實(shí)現(xiàn)繼承那么就有父類(lèi)、子類(lèi)的概念 父類(lèi)又稱(chēng)為基類(lèi)，子類(lèi)又稱(chēng)為派生類(lèi) 在JS中沒(méi)有類(lèi)的概念，在JS中常常稱(chēng)為父對(duì)象，子對(duì)象，基對(duì)象，派生對(duì)象。三、認(rèn)識(shí)原型

在JavaScript中，原型也是一個(gè)對(duì)象，通過(guò)原型可以實(shí)現(xiàn)對(duì)象的屬性繼承，JavaScript的對(duì)象中都包含了一個(gè)[[Prototype]]內(nèi)部屬性，這個(gè)屬性所對(duì)應(yīng)的就是該對(duì)象的原型。

[[Prototype]]作為對(duì)象的內(nèi)部屬性，是不能被直接訪問(wèn)的。所以為了方便查看一個(gè)對(duì)象的原型，F(xiàn)irefox和Chrome中提供了__proto__這個(gè)非標(biāo)準(zhǔn)（不是所有瀏覽器都支持）的訪問(wèn)器（ECMA引入了標(biāo)準(zhǔn)對(duì)象原型訪問(wèn)器'Object.getPrototype(object)'）。

下面通過(guò)一個(gè)例子來(lái)看看原型相關(guān)概念：

function Person() {}// 神秘對(duì)象就是Person.prototype//那么只有使用構(gòu)造函數(shù)才可以訪問(wèn)它var o = new Person();//以前不能直接使用o來(lái)訪問(wèn)神秘對(duì)象//現(xiàn)在有了__proto__后，o.__proto__也可以直接訪問(wèn)神秘對(duì)象//那么o.__proto__ === Person.prototype

神秘對(duì)象（原型）中都有一個(gè)屬性constructor，翻譯為 構(gòu)造器 。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來(lái)的。

__proto__有什么用？可以訪問(wèn)原型。由于在開(kāi)發(fā)中除非特殊要求，不要使用實(shí)例去修改原型的成員，因此該屬性開(kāi)發(fā)時(shí)使用較少。但是在調(diào)試過(guò)程中非常方便，可以輕易的訪問(wèn)原型進(jìn)行查看成員

如果在早期的瀏覽器中使用實(shí)例需要訪問(wèn)原型如何處理？可以使用實(shí)例對(duì)象訪問(wèn)構(gòu)造器，然后使用構(gòu)造器訪問(wèn)原型

var o = new Person();o.constructor.prototype

如果給實(shí)例繼承自原型的屬性賦值

function Foo();Foo.prototype.name = 'test';var o1 = new Foo();var o2 = new Foo();o1.name = '張三'; // 不是修改原型中的name而是自己增加了一個(gè)name屬性console.log(o1.name + ’，’+ o2.name); // 張三，test四、構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖

對(duì)于如下代碼：

function Person(){}var p = new Person()console.log(Person.prototype.constructor); //function Person(){}console.log(Person.prototype.constructor.name); //Personconsole.log(typeof Person.prototype.constructor); //functionconsole.log(p.__prop__);console.log(p.__prop__ === Person.prototype);//true

于是他們的關(guān)系圖如下：

五、對(duì)象的原型鏈

凡是對(duì)象就有原型，原型也是對(duì)象。因此凡是給定一個(gè)對(duì)象，那么就可以找到他的原型，原型還有原型，那么如此下去，就構(gòu)成一個(gè)對(duì)象的序列，稱(chēng)該結(jié)構(gòu)為原型鏈。

問(wèn)題：

原型鏈到底到什么時(shí)候是一個(gè)頭？ 一個(gè)默認(rèn)的原型鏈結(jié)構(gòu)是怎樣的？ 原型鏈結(jié)構(gòu)對(duì)已知語(yǔ)法的修正5.1 原型鏈的結(jié)構(gòu)

凡是使用構(gòu)造函數(shù)，創(chuàng)建出對(duì)象，并且沒(méi)有利用賦值的方式修改原型，就說(shuō)該對(duì)象保留默認(rèn)的原型鏈。

默認(rèn)原型鏈結(jié)構(gòu)是什么樣子呢？

function Person(){}var p = new Person();//p 具有默認(rèn)的原型鏈

默認(rèn)的原型鏈結(jié)構(gòu)就是：當(dāng)前對(duì)象 -> 構(gòu)造函數(shù).prototype -> Object.prototype -> null

在實(shí)現(xiàn)繼承的時(shí)候，有時(shí)候會(huì)利用替換原型鏈結(jié)構(gòu)的方式實(shí)現(xiàn)原型繼承，那么原型鏈結(jié)構(gòu)就會(huì)發(fā)送改變

function DunizbCollection(){}DunizbCollection.prototype = [];var arr = new DunizbCollection();// arr -> [] -> Array.prototype -> Object.prototype -> null

六、函數(shù)的構(gòu)造函數(shù)Function

在JS中使用Function可以實(shí)例化函數(shù)對(duì)象 。也就是說(shuō)在JS中函數(shù)與普通對(duì)象一樣，也是一個(gè)對(duì)象類(lèi)型。函數(shù)是JS中的一等公民。

函數(shù)是對(duì)象，就可以使用對(duì)象的動(dòng)態(tài)特性 函數(shù)是對(duì)象，就有構(gòu)造函數(shù)創(chuàng)建函數(shù) 函數(shù)是對(duì)象，可以創(chuàng)建其它對(duì)象 函數(shù)是唯一可以限定變量作用域的結(jié)果

要解決的問(wèn)題

Function 如何使用 Function 與函數(shù)的關(guān)系 函數(shù)的原型鏈結(jié)構(gòu)6.1 函數(shù)是Function的實(shí)例

語(yǔ)法

new Function( arg0,arg1,arg1,….argN, body );

Function 中的參數(shù)全部是字符串

該構(gòu)造函數(shù)的作用是將參數(shù)鏈接起來(lái)組成函數(shù)

如果參數(shù)只有一個(gè)，那么表示函數(shù)體 如果參數(shù)有多個(gè)，最后一個(gè)參數(shù)表示函數(shù)體，前面的所有參數(shù)表示函數(shù)的參數(shù) 如果沒(méi)有參數(shù)，表示創(chuàng)建一個(gè)空函數(shù)

舉例：創(chuàng)建一個(gè)打印一句話的函數(shù)

// 傳統(tǒng)的function foo () { console.log( ’你好’ );}//Functionvar func = new Function( ’console.log( '你好' );’ );// 功能上，這里foo 與 func 等價(jià)

再比如，創(chuàng)建一個(gè)空函數(shù)

//傳統(tǒng)function foo () {}//Functionvar func = new Function();func();

傳入函數(shù)內(nèi)一個(gè)數(shù)字，打印該函數(shù)

//傳統(tǒng)function foo ( num ) { console.log( num );}//Functionvar func = new Function( 'num' ,'console.log( num )' );func();6.2 函數(shù)的原型鏈結(jié)構(gòu)

任意的一個(gè)函數(shù)，都是相當(dāng)于Function的實(shí)例，類(lèi)似于{}與new Object()的關(guān)系。

function foo () {}

上面的代告訴解析器，有一個(gè)對(duì)象叫foo，它是一個(gè)函數(shù)；相當(dāng)于new Function（）得到一個(gè)函數(shù)對(duì)象

函數(shù)應(yīng)該有什么屬性？答：__proto__ 函數(shù)的構(gòu)造函數(shù)是什么？答：Function 函數(shù)應(yīng)該繼承自Function.prototype Function.prototype繼承自O(shè)bject.prototype

對(duì)于Function，我們還必須知道

Object函數(shù)是Function的一個(gè)實(shí)例

Object作為對(duì)象是繼承自Function.prototype的，又“Function.prototype”繼承自O(shè)bject.prototype

foo.prototype.__proto__ === Object.prototype // true Function是自己的構(gòu)造函數(shù) 在JS 中任何對(duì)象的老祖宗就是Object.prototype 在JS中任何函數(shù)的老祖宗就是Function.prototype

下面繪制出 Function 的構(gòu)造原型實(shí)例三角形結(jié)構(gòu)

6.3 為什么要使用Function？

Function是使用字符串構(gòu)建函數(shù)，那么就可以在程序運(yùn)行過(guò)程中構(gòu)建函數(shù).

以前的函數(shù)必須一開(kāi)始就寫(xiě)好，再經(jīng)過(guò)預(yù)解析，一步一步的運(yùn)行

假定從服務(wù)器里拿到“[1,2,3,4,5]”，將數(shù)組形式的字符串轉(zhuǎn)換成數(shù)組對(duì)象

var arr = ( new Function( ’return ’ + str + ’ ;’ ) )();

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。