JavaScript之強大的原型和原型鏈

　　JavaScript 不包含傳統的類(lèi)繼承模型，而是使用 prototypal 原型模型。為此YJBYS小編下文將為大家講解JavaScript之強大的原型和原型鏈，歡迎大家學(xué)習!

　　雖然這經(jīng)常被當作是 JavaScript 的缺點(diǎn)被提及，其實(shí)基于原型的繼承模型比傳統的類(lèi)繼承還要強大。實(shí)現傳統的類(lèi)繼承模型是很簡(jiǎn)單，但是實(shí)現 JavaScript 中的原型繼承則要困難的多。

　　由于 JavaScript 是唯一一個(gè)被廣泛使用的基于原型繼承的語(yǔ)言，所以理解兩種繼承模式的差異是需要一定時(shí)間的，今天我們就來(lái)了解一下原型和原型鏈。

　　原型

　　10年前，我剛學(xué)習JavaScript的時(shí)候，一般都是用如下方式來(lái)寫(xiě)代碼：

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

　　通過(guò)執行各個(gè)function來(lái)得到結果，學(xué)習了原型之后，我們可以使用如下方式來(lái)美化一下代碼。

　　原型使用方式1：

　　在使用原型之前，我們需要先將代碼做一下小修改：

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

　　然后，通過(guò)給Calculator對象的prototype屬性賦值對象字面量來(lái)設定Calculator對象的原型。

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

　　這樣，我們就可以new Calculator對象以后，就可以調用add方法來(lái)計算結果了。

　　原型使用方式2：

　　第二種方式是，在賦值原型prototype的時(shí)候使用function立即執行的表達式來(lái)賦值，即如下格式：

　　Calculator.prototype = function () { } ();

　　它的好處在前面的帖子里已經(jīng)知道了，就是可以封裝私有的function，通過(guò)return的形式暴露出簡(jiǎn)單的使用名稱(chēng)，以達到public/private的效果，修改后的代碼如下：

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

　　同樣的方式，我們可以new Calculator對象以后調用add方法來(lái)計算結果了。

　　再來(lái)一點(diǎn)

　　分步聲明：

　　上述使用原型的時(shí)候，有一個(gè)限制就是一次性設置了原型對象，我們再來(lái)說(shuō)一下如何分來(lái)設置原型的每個(gè)屬性吧。

　　var BaseCalculator = function () { //為每個(gè)實(shí)例都聲明一個(gè)小數位數 this.decimalDigits = 2;}; //使用原型給BaseCalculator擴展2個(gè)對象方法BaseCalculator.prototype.add = function (x, y) { return x + y;};BaseCalculator.prototype.subtract = function (x, y) { return x - y;};

　　首先，聲明了一個(gè)BaseCalculator對象，構造函數里會(huì )初始化一個(gè)小數位數的屬性decimalDigits，然后通過(guò)原型屬性設置2個(gè)function，分別是add(x,y)和subtract(x,y)，當然你也可以使用前面提到的2種方式的任何一種，我們的主要目的是看如何將BaseCalculator對象設置到真正的Calculator的原型上。

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

　　創(chuàng )建完上述代碼以后，我們來(lái)開(kāi)始：

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

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

　　var calc = new Calculator();alert(calc.add(1, 1));//BaseCalculator 里聲明的decimalDigits屬性，在 Calculator里是可以訪(fǎng)問(wèn)到的alert(calc.decimalDigits);

　　上面的代碼，運行以后，我們可以看到因為Calculator的原型是指向BaseCalculator的實(shí)例上的，所以可以訪(fǎng)問(wèn)他的decimalDigits屬性值，那如果我不想讓Calculator訪(fǎng)問(wèn)BaseCalculator的構造函數里聲明的屬性值，那怎么辦呢?這么辦：

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

　　通過(guò)將BaseCalculator的原型賦給Calculator的原型，這樣你在Calculator的實(shí)例上就訪(fǎng)問(wèn)不到那個(gè)decimalDigits值了，如果你訪(fǎng)問(wèn)如下代碼，那將會(huì )提升出錯。

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

　　重寫(xiě)原型：

　　在使用第三方JS類(lèi)庫的時(shí)候，往往有時(shí)候他們定義的原型方法是不能滿(mǎn)足我們的需要，但是又離不開(kāi)這個(gè)類(lèi)庫，所以這時(shí)候我們就需要重寫(xiě)他們的原型中的一個(gè)或者多個(gè)屬性或function，我們可以通過(guò)繼續聲明的同樣的add代碼的形式來(lái)達到覆蓋重寫(xiě)前面的add功能，代碼如下：

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

　　這樣，我們計算得出的結果就比原來(lái)多出了一個(gè)tax的值，但是有一點(diǎn)需要注意：那就是重寫(xiě)的代碼需要放在最后，這樣才能覆蓋前面的代碼。

　　原型鏈

　　在將原型鏈之前，我們先上一段代碼：

　　function Foo() { this.value = 42;}Foo.prototype = { method: function() {}};function Bar() {}// 設置Bar的prototype屬性為Foo的實(shí)例對象Bar.prototype = new Foo();Bar.prototype.foo = 'Hello World';// 修正Bar.prototype.constructor為Bar本身Bar.prototype.constructor = Bar;var test = new Bar() // 創(chuàng )建Bar的一個(gè)新實(shí)例// 原型鏈test [Bar的實(shí)例] Bar.prototype [Foo的實(shí)例] { foo: 'Hello World' } Foo.prototype {method: ...}; Object.prototype {toString: ... /* etc. */};

　　上面的例子中，test 對象從 Bar.prototype 和 Foo.prototype 繼承下來(lái);因此，它能訪(fǎng)問(wèn) Foo 的原型方法 method。同時(shí)，它也能夠訪(fǎng)問(wèn)那個(gè)定義在原型上的 Foo 實(shí)例屬性 value。需要注意的是 new Bar() 不會(huì )創(chuàng )造出一個(gè)新的 Foo 實(shí)例，而是重復使用它原型上的那個(gè)實(shí)例;因此，所有的 Bar 實(shí)例都會(huì )共享相同的 value 屬性。

　　屬性查找：

　　當查找一個(gè)對象的屬性時(shí)，JavaScript 會(huì )向上遍歷原型鏈，直到找到給定名稱(chēng)的屬性為止，到查找到達原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒(méi)有找到指定的屬性，就會(huì )返回 undefined，我們來(lái)看一個(gè)例子：

　　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

　　通過(guò)代碼運行，我們發(fā)現subtract是安裝我們所說(shuō)的向上查找來(lái)得到結果的，但是add方式有點(diǎn)小不同，這也是我想強調的，就是屬性在查找的時(shí)候是先查找自身的屬性，如果沒(méi)有再查找原型，再沒(méi)有，再往上走，一直插到Object的原型上，所以在某種層面上說(shuō)，用 for in語(yǔ)句遍歷屬性的時(shí)候，效率也是個(gè)問(wèn)題。

　　還有一點(diǎn)我們需要注意的是，我們可以賦值任何類(lèi)型的對象到原型上，但是不能賦值原子類(lèi)型的值，比如如下代碼是無(wú)效的：

　　function Foo() {}Foo.prototype = 1; // 無(wú)效

　　hasOwnProperty函數：

　　hasOwnProperty是Object.prototype的一個(gè)方法，它可是個(gè)好東西，他能判斷一個(gè)對象是否包含自定義屬性而不是原型鏈上的屬性，因為hasOwnProperty 是 JavaScript 中唯一一個(gè)處理屬性但是不查找原型鏈的函數。

　　// 修改Object.prototypeObject.prototype.bar = 1; var foo = {goo: undefined};foo.bar; // 1'bar' in foo; // truefoo.hasOwnProperty('bar'); // falsefoo.hasOwnProperty('goo'); // true

　　只有 hasOwnProperty 可以給出正確和期望的結果，這在遍歷對象的屬性時(shí)會(huì )很有用。 沒(méi)有其它方法可以用來(lái)排除原型鏈上的屬性，而不是定義在對象自身上的屬性。

　　但有個(gè)惡心的地方是：JavaScript 不會(huì )保護 hasOwnProperty 被非法占用，因此如果一個(gè)對象碰巧存在這個(gè)屬性，就需要使用外部的 hasOwnProperty 函數來(lái)獲取正確的結果。

　　var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons'};foo.hasOwnProperty('bar'); // 總是返回 false// 使用{}對象的 hasOwnProperty，并將其上下為設置為foo{}.hasOwnProperty.call(foo, 'bar'); // true

　　當檢查對象上某個(gè)屬性是否存在時(shí)，hasOwnProperty 是唯一可用的方法。同時(shí)在使用 for in loop 遍歷對象時(shí)，推薦總是使用 hasOwnProperty 方法，這將會(huì )避免原型對象擴展帶來(lái)的干擾，我們來(lái)看一下例子：

　　// 修改 Object.prototypeObject.prototype.bar = 1;var foo = {moo: 2};for(var i in foo) { console.log(i); // 輸出兩個(gè)屬性：bar 和 moo}

　　我們沒(méi)辦法改變for in語(yǔ)句的行為，所以想過(guò)濾結果就只能使用hasOwnProperty 方法，代碼如下：

　　// foo 變量是上例中的for(var i in foo) { if (foo.hasOwnProperty(i)) { console.log(i); }}

　　這個(gè)版本的代碼是唯一正確的寫(xiě)法。由于我們使用了 hasOwnProperty，所以這次只輸出 moo。如果不使用 hasOwnProperty，則這段代碼在原生對象原型(比如 Object.prototype)被擴展時(shí)可能會(huì )出錯。

　　總結：推薦使用 hasOwnProperty，不要對代碼運行的環(huán)境做任何假設，不要假設原生對象是否已經(jīng)被擴展了。

【JavaScript之強大的原型和原型鏈】相關(guān)文章：

理解JavaScript原型鏈教程09-02

JavaScript類(lèi)定義原型方法的兩種實(shí)現的區別07-11

Javascript函數的定義和用法分析08-15

網(wǎng)站內鏈和外鏈的定義及區別09-28

常用排序算法之JavaScript實(shí)現代碼段06-04

如何提高網(wǎng)站內鏈和外鏈的收錄?08-09

JavaScript學(xué)習歷程和心得范文（精選10篇）02-13

網(wǎng)站外鏈和內鏈怎么開(kāi)展SEO優(yōu)化06-23

對javascript的理解08-08

Javascript中arguments對象的詳解和使用方法08-20