JavaScript 不包含傳統的類繼承模型，而是使用 prototypal 原型模型。為此YJBYS小編下文將為大家講解JavaScript之強大的原型和原型鏈，歡迎大家學習!
雖然這經常被當作是 JavaScript 的缺點被提及，其實基於原型的繼承模型比傳統的類繼承還要強大。實現傳統的類繼承模型是很簡單，但是實現 JavaScript 中的原型繼承則要困難的多。
由於 JavaScript 是唯一一個被廣泛使用的基於原型繼承的語言，所以理解兩種繼承模式的差異是需要一定時間的，今天我們就來了解一下原型和原型鏈。
原型
10年前，我剛學習JavaScript的時候，一般都是用如下方式來寫程式碼：
var decimalDigits = 2, tax = 5; function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } //alert(add(1, 3));
通過執行各個function來得到結果，學習了原型之後，我們可以使用如下方式來美化一下程式碼。
原型使用方式1：
在使用原型之前，我們需要先將程式碼做一下小修改：
var Calculator = function (decimalDigits, tax) { malDigits = decimalDigits; = tax; };
然後，通過給Calculator物件的prototype屬性賦值物件字面量來設定Calculator物件的原型。
otype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator())(1, 3));
這樣，我們就可以new Calculator物件以後，就可以呼叫add方法來計算結果了。
原型使用方式2：
第二種方式是，在賦值原型prototype的時候使用function立即執行的表示式來賦值，即如下格式：
otype = function () { } ();
它的好處在前面的帖子裡已經知道了，就是可以封裝私有的function，通過return的形式暴露出簡單的使用名稱，以達到public/private的效果，修改後的程式碼如下：
otype = function () { add = function (x, y) { return x + y; }, subtract = function (x, y) { return x - y; } return { add: add, subtract: subtract } } (); //alert((new Calculator())(11, 3));
同樣的方式，我們可以new Calculator物件以後呼叫add方法來計算結果了。
再來一點
分步宣告：
上述使用原型的時候，有一個限制就是一次性設定了原型物件，我們再來說一下如何分來設定原型的每個屬性吧。
var BaseCalculator = function () { //為每個例項都宣告一個小數位數 malDigits = 2;}; //使用原型給BaseCalculator擴充套件2個物件方法 = function (x, y) { return x + y;};ract = function (x, y) { return x - y;};
首先，聲明瞭一個BaseCalculator物件，建構函式裡會初始化一個小數位數的屬性decimalDigits，然後通過原型屬性設定2個function，分別是add(x,y)和subtract(x,y)，當然你也可以使用前面提到的2種方式的任何一種，我們的主要目的是看如何將BaseCalculator物件設定到真正的Calculator的原型上。
var BaseCalculator = function() { malDigits = 2;};otype = { add: function(x, y) { return x + y; }, subtract: function(x, y) { return x - y; }};
建立完上述程式碼以後，我們來開始：
var Calculator = function () { //為每個例項都宣告一個稅收數字 = 5;}; otype = new BaseCalculator();
我們可以看到Calculator的原型是指向到BaseCalculator的一個例項上，目的是讓Calculator整合它的add(x,y)和subtract(x,y)這2個function，還有一點要說的是，由於它的原型是BaseCalculator的一個例項，所以不管你建立多少個Calculator物件例項，他們的原型指向的都是同一個例項。
var calc = new Calculator();alert((1, 1));//BaseCalculator 裡宣告的decimalDigits屬性，在 Calculator裡是可以訪問到的alert(malDigits);
上面的程式碼，執行以後，我們可以看到因為Calculator的原型是指向BaseCalculator的例項上的，所以可以訪問他的decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的建構函式裡宣告的屬性值，那怎麼辦呢?這麼辦：
var Calculator = function () { = 5;};otype = otype;
通過將BaseCalculator的原型賦給Calculator的原型，這樣你在Calculator的.例項上就訪問不到那個decimalDigits值了，如果你訪問如下程式碼，那將會提升出錯。
var calc = new Calculator();alert((1, 1));alert(malDigits);
重寫原型：
在使用第三方JS類庫的時候，往往有時候他們定義的原型方法是不能滿足我們的需要，但是又離不開這個類庫，所以這時候我們就需要重寫他們的原型中的一個或者多個屬性或function，我們可以通過繼續宣告的同樣的add程式碼的形式來達到覆蓋重寫前面的add功能，程式碼如下：
//覆蓋前面Calculator的add() function = function (x, y) { return x + y + ;};var calc = new Calculator();alert((1, 1));
這樣，我們計算得出的結果就比原來多出了一個tax的值，但是有一點需要注意：那就是重寫的程式碼需要放在最後，這樣才能覆蓋前面的程式碼。
原型鏈
在將原型鏈之前，我們先上一段程式碼：
function Foo() { e = 42;}otype = { method: function() {}};function Bar() {}// 設定Bar的prototype屬性為Foo的例項物件otype = new Foo(); = 'Hello World';// 修正tructor為Bar本身tructor = Bar;var test = new Bar() // 建立Bar的一個新例項// 原型鏈test [Bar的例項] otype [Foo的例項] { foo: 'Hello World' } otype {method: ...}; otype {toString: ... /* etc. */};
上面的例子中，test 物件從 otype 和 otype 繼承下來;因此，它能訪問 Foo 的原型方法 method。同時，它也能夠訪問那個定義在原型上的 Foo 例項屬性 value。需要注意的是 new Bar() 不會創造出一個新的 Foo 例項，而是重複使用它原型上的那個例項;因此，所有的 Bar 例項都會共享相同的 value 屬性。
屬性查詢：
當查詢一個物件的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止，到查詢到達原型鏈的頂部 - 也就是 otype - 但是仍然沒有找到指定的屬性，就會返回 undefined，我們來看一個例子：
function foo() { = function (x, y) { return x + y; } } = function (x, y) { return x + y + 10; } ract = function (x, y) { return x - y; } var f = new foo(); alert((1, 2)); //結果是3，而不是13 alert(ract(1, 2)); //結果是-1
通過程式碼執行，我們發現subtract是安裝我們所說的向上查詢來得到結果的，但是add方式有點小不同，這也是我想強調的，就是屬性在查詢的時候是先查詢自身的屬性，如果沒有再查詢原型，再沒有，再往上走，一直插到Object的原型上，所以在某種層面上說，用 for in語句遍歷屬性的時候，效率也是個問題。
還有一點我們需要注意的是，我們可以賦值任何型別的物件到原型上，但是不能賦值原子型別的值，比如如下程式碼是無效的：
function Foo() {}otype = 1; // 無效
hasOwnProperty函式：
hasOwnProperty是otype的一個方法，它可是個好東西，他能判斷一個物件是否包含自定義屬性而不是原型鏈上的屬性，因為hasOwnProperty 是 JavaScript 中唯一一個處理屬性但是不查詢原型鏈的函式。
// 修改 = 1; var foo = {goo: undefined};; // 1'bar' in foo; // wnProperty('bar'); // wnProperty('goo'); // true
只有 hasOwnProperty 可以給出正確和期望的結果，這在遍歷物件的屬性時會很有用。 沒有其它方法可以用來排除原型鏈上的屬性，而不是定義在物件自身上的屬性。
但有個噁心的地方是：JavaScript 不會保護 hasOwnProperty 被非法佔用，因此如果一個物件碰巧存在這個屬性，就需要使用外部的 hasOwnProperty 函式來獲取正確的結果。
var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons'};wnProperty('bar'); // 總是返回 false// 使用{}物件的 hasOwnProperty，並將其上下為設定為foo{}(foo, 'bar'); // true
當檢查物件上某個屬性是否存在時，hasOwnProperty 是唯一可用的方法。同時在使用 for in loop 遍歷物件時，推薦總是使用 hasOwnProperty 方法，這將會避免原型物件擴充套件帶來的干擾，我們來看一下例子：
// 修改 = 1;var foo = {moo: 2};for(var i in foo) { (i); // 輸出兩個屬性：bar 和 moo}
我們沒辦法改變for in語句的行為，所以想過濾結果就只能使用hasOwnProperty 方法，程式碼如下：
// foo 變數是上例中的for(var i in foo) { if (wnProperty(i)) { (i); }}
這個版本的程式碼是唯一正確的寫法。由於我們使用了 hasOwnProperty，所以這次只輸出 moo。如果不使用 hasOwnProperty，則這段程式碼在原生物件原型(比如 otype)被擴充套件時可能會出錯。
總結：推薦使用 hasOwnProperty，不要對程式碼執行的環境做任何假設，不要假設原生物件是否已經被擴充套件了。
