JS原型和原型鏈

原型使用方式1

個人理解，之前寫JS都是這樣:

var decimalDigits = 2,
            tax = 5;

        function add(x, y) {
            return x + y;
        }

        function subtract(x, y) {
            return x - y;
        }

        //alert(add(1, 3));

但是，這個並不能體現OOP思想，看了原型與原型鏈之后覺得OOP一目了然:

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

然后給Calculator的prototype屬性賦值對象字面量來設定Calculator對象的原型。(個人覺得這里的原型就如同C#中類的概念,prototype則是用來給類添加屬性，方法的)

 Calculator.prototype = {
            add: function (x, y) {
                return x + y;
            },

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

這樣，通過new 一個對象就可以調用里面的公開的方法，屬性。

原型使用方式2

當我們把一堆方法寫到Calculator中，但是有些方法我們不想對外公開，即實現public/private，那么我們只能返回公開的方法:

var Calculaotr = function(x, y) {
    this.x = x;
    this.y = y;
};
Calculaotr.prototype = function() {
    add= function (x,y) {
        return x + y;
    },
    subtract=function (x,y) {
        return x - y;
    }
    return {
        A:add,
        S:subtract
    } 
}();

這里用利用函數自執行在加載文件同時，執行上面的JS代碼，那么我們就可以訪問對外公開的方法和屬性，如果不通過自執行，則會報異常:

在C#中，我們可能會遇到這樣的情況，類A的一個屬性是類B型，在JS中，可以通過以下方式實現:

var BaseCalculator = function() {
    this.decimalDigits = 2;
};
BaseCalculator.prototype = {
    A: function(x, y) {
        return x + y;
    },
    S: function(x, y) {
        return x - y;
    }
};
var Calculator = function() {
    this.tax = 3;
};
Calculator.prototype = new BaseCalculator();

這里我們可以看到Calculator的原型是指向到BaseCalculator的一個實例上，目的是讓Calculator集成它的add(x,y)和subtract(x,y)這2個function，

還有一點要說的是，由於它的原型是BaseCalculator的一個實例，所以不管你創建多少個Calculator對象實例，他們的原型指向的都是同一個實例。

如果我們不想讓Calculator對象訪問BaseCalculator的decimalDigits屬性，可以這樣:

var BaseCalculator = function() {
    this.decimalDigits = 2;
};
BaseCalculator.prototype = {
    A: function(x, y) {
        return x + y;
    },
    S: function(x, y) {
        return x - y;
    }
};
var Calculator = function() {
    this.tax = 3;
};
Calculator.prototype =new prototype;

 

通過以上兩種原型使用方式，結合C#中的繼承，不難想到JS中如何重寫原型。

重寫原型:

在項目中，引入外部JS庫，但是有些方法並不是我們想要的，此時我們通過重寫原型，就可以達到我們想要的結果:

//重寫原型
Calculaotor.prototype.add = function(x, y) {
    return x + y + this.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 屬性。

屬性查找

當查找一個對象的屬性時，會遍歷原型鏈，一直往頂層Object找，如果沒有找到，則返回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

以上add函數返回的是3，而不是13則說明，屬性查找時，優先查找自己的屬性。然后在往上一級找，最后找Object，這樣看來，在遍歷時用for in效率就是個問題。

還有一點，我們可以賦值任何類型的對象到原型上，但是不能賦值原子類型的值，比如如下代碼是無效的：

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

hasOwnProperty函數

hasOwnProperty是判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，是JS中唯一一個查找屬性，但不查找原型鏈的函數。

但是JS不會保護hasOwnProperty函數，如果剛好某個對象中也有hasOwnProperty函數，則我們可以通過以下方式正確獲得想要的結果:

 

alert({}.hasOwnProperty.call(c, 'tax'));//返回true

這里的c是Calculator的一個對象,tax是我們要找的屬性。

當我面在for in loop 語句中查找屬性時，用hasOwnProperty函數，提高效率:

 Object.prototype.bar = 1;
    var foo={moo : 1}
    for (var i in foo) {
        if(foo.hasOwnProperty(i)) {
            alert(console.log(i));
        } 
    }//此時只會輸出moo屬性

 

 

原文地址:http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html