JavaScript探祕：強大的原型和原型鏈

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

JavaScript 不包含傳統的類繼承模型，而是使用 prototypal 原型模型。雖然這常常被看成是 JavaScript 的缺點被說起，其實基於原型的繼承模型比傳統的類繼承還要強大。實現傳統的類繼承模型是很簡單，可是實現 JavaScript 中的原型繼承則要困難的多。

因爲 JavaScript 是惟一一個被普遍使用的基於原型繼承的語言，因此理解兩種繼承模式的差別是須要必定時間的，今天咱們就來了解一下原型和原型鏈。

原型

10年前，我剛學習JavaScript的時候，通常都是用以下方式來寫代碼：

<pre name="code" class="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) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};

而後，經過給Calculator對象的prototype屬性賦值對象字面量來設定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方法來計算結果了。

原型使用方式2

第二種方式是，在賦值原型prototype的時候使用function當即執行的表達式來賦值，即以下格式：

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

它的好處在前面的帖子裏已經知道了，就是能夠封裝私有的function，經過return的形式暴露出簡單的使用名稱，以達到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方法來計算結果了。

分步聲明

上述使用原型的時候，有一個限制就是一次性設置了原型對象，咱們再來講一下如何分來設置原型的每一個屬性吧。

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

BaseCalculator.prototype.subtract = function (x, y) {
    return x - y;
};

首先，聲明瞭一個BaseCalculator對象，構造函數裏會初始化一個小數位數的屬性decimalDigits，而後經過原型屬性設置2個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;
    }
};

建立完上述代碼之後，咱們來開始：

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

咱們能夠看到Calculator的原型是指向到BaseCalculator的一個實例上，目的是讓Calculator集成它的add(x,y)和subtract(x,y)這2個function，還有一點要說的是，因爲它的原型是BaseCalculator的一個實例，因此無論你建立多少個Calculator對象實例，他們的原型指向的都是同一個實例。

var calc = new Calculator();
alert(calc.add(1, 1));
//BaseCalculator 裏聲明的decimalDigits屬性，在 Calculator裏是能夠訪問到的
alert(calc.decimalDigits); 

上面的代碼，運行之後，咱們能夠看到由於Calculator的原型是指向BaseCalculator的實例上的，因此能夠訪問他的decimalDigits屬性值，那若是我不想讓Calculator訪問BaseCalculator的構造函數裏聲明的屬性值，那怎麼辦呢？這麼辦：

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

Calculator.prototype = BaseCalculator.prototype;

經過將BaseCalculator的原型賦給Calculator的原型，這樣你在Calculator的實例上就訪問不到那個decimalDigits值了，若是你訪問以下代碼，那將會提高出錯。

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

重寫原型

在使用第三方JS類庫的時候，每每有時候他們定義的原型方法是不能知足咱們的須要，可是又離不開這個類庫，因此這時候咱們就須要重寫他們的原型中的一個或者多個屬性或function，咱們能夠經過繼續聲明的一樣的add代碼的形式來達到覆蓋重寫前面的add功能，代碼以下：

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

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

這樣，咱們計算得出的結果就比原來多出了一個tax的值，可是有一點須要注意：那就是重寫的代碼須要放在最後，這樣才能覆蓋前面的代碼。

原型鏈

在將原型鏈以前，咱們先上一段代碼：

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 設置Bar的prototype屬性爲Foo的實例對象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor爲Bar自己
Bar.prototype.constructor = Bar;

var test = new Bar() // 建立Bar的一個新實例

// 原型鏈
test [Bar的實例]
    Bar.prototype [Foo的實例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};

上面的例子中，test 對象從 Bar.prototype 和 Foo.prototype 繼承下來；所以，它能訪問 Foo 的原型方法 method。同時，它也可以訪問那個定義在原型上的 Foo 實例屬性 value。須要注意的是 new Bar() 不會創造出一個新的 Foo 實例，而是重複使用它原型上的那個實例；所以，全部的 Bar 實例都會共享相同的 value 屬性。

屬性查找

當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性爲止，到查找到達原型鏈的頂部 - 也就是 Object.prototype - 可是仍然沒有找到指定的屬性，就會返回 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)); //結果是3，而不是13
alert(f.subtract(1, 2)); //結果是-1

經過代碼運行，咱們發現subtract是安裝咱們所說的向上查找來獲得結果的，可是add方式有點小不一樣，這也是我想強調的，就是屬性在查找的時候是先查找自身的屬性，若是沒有再查找原型，再沒有，再往上走，一直插到Object的原型上，因此在某種層面上說，用 for in語句遍歷屬性的時候，效率也是個問題。

還有一點咱們須要注意的是，咱們能夠賦值任何類型的對象到原型上，可是不能賦值原子類型的值，好比以下代碼是無效的：

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

hasOwnProperty函數

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

// 修改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

只有 hasOwnProperty 能夠給出正確和指望的結果，這在遍歷對象的屬性時會頗有用。 沒有其它方法能夠用來排除原型鏈上的屬性，而不是定義在對象自身上的屬性。

但有個噁心的地方是：JavaScript 不會保護 hasOwnProperty 被非法佔用，所以若是一個對象碰巧存在這個屬性，就須要使用外部的 hasOwnProperty 函數來獲取正確的結果。

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // 老是返回 false

// 使用{}對象的 hasOwnProperty，並將其上下爲設置爲foo
{}.hasOwnProperty.call(foo, 'bar'); // true

當檢查對象上某個屬性是否存在時，hasOwnProperty 是惟一可用的方法。同時在使用 for in loop 遍歷對象時，推薦老是使用 hasOwnProperty 方法，這將會避免原型對象擴展帶來的干擾，咱們來看一下例子：

// 修改 Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // 輸出兩個屬性：bar 和 moo
}

咱們沒辦法改變for in語句的行爲，因此想過濾結果就只能使用hasOwnProperty 方法，代碼以下：

這個版本的代碼是惟一正確的寫法。因爲咱們使用了 hasOwnProperty，因此此次只輸出 moo。若是不使用 hasOwnProperty，則這段代碼在原生對象原型（好比 Object.prototype）被擴展時可能會出錯。

總結：推薦使用 hasOwnProperty，不要對代碼運行的環境作任何假設，不要假設原生對象是否已經被擴展了。