js 原型和原型鏈

標籤：小數   數位   無效   nbsp   hive   efi   就會   怎麼辦   this   

原型使用方式

1.通過給Calculator對象的prototype屬性賦值對象字面量來設定Calculator對象的原型

 var Calculator = function (decimalDigits, tax) {            this.decimalDigits = decimalDigits;            this.tax = tax;        };Calculator.prototype = {            add: function (x, y) {                return x + y;            },            subtract: function (x, y) {                return x - y;            }        };(new Calculator()).add(1, 3);//4

2.在賦值原型prototype的時候使用function立即執行的運算式來賦值

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

分步聲明：

上述使用原型的時候，有一個限制就是一次性設定了原型對象，如何分開設定原型的每個屬性呢？

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;};

建立完上述代碼以後，我們來開始：

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();acalc.add(1, 1);//2//BaseCalculator 裡聲明的decimalDigits屬性，在 Calculator裡是可以訪問到的calc.decimalDigits; //2

上面的代碼，運行以後，我們可以看到因為Calculator的原型是指向BaseCalculator的執行個體上的，所以可以訪問他的decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的建構函式裡聲明的屬性值，那怎麼辦呢？

Calculator.prototype = BaseCalculator.prototype;

通過將BaseCalculator的原型賦給Calculator的原型，這樣你在Calculator的執行個體上就訪問不到那個decimalDigits值了

屬性尋找：

當尋找一個對象的屬性時，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();        f.add(1, 2); //結果是3，而不是13        f.subtract(1, 2); //結果是-1

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

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

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

hasOwnProperty函數：

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

// 修改Object.prototypeObject.prototype.bar = 1; var foo = {goo: undefined};foo.bar; // 1‘bar‘ in foo; // truefoo.hasOwnProperty(‘bar‘); // falsefoo.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

參考：http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html

 

js 原型和原型鏈