深入理解JavaScript系列(6) 強大的原型和原型鏈

來源:互聯網
上載者:User

前言
JavaScript 不包含傳統的類繼承模型,而是使用 prototypal 原型模型。

雖然這經常被當作是 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) {
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 方法,代碼如下: 複製代碼 代碼如下:// foo 變數是上例中的
for(var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i);
}
}

這個版本的代碼是唯一正確的寫法。由於我們使用了 hasOwnProperty,所以這次只輸出 moo。如果不使用 hasOwnProperty,則這段代碼在原生對象原型(比如 Object.prototype)被擴充時可能會出錯。

總結:推薦使用 hasOwnProperty,不要對代碼啟動並執行環境做任何假設,不要假設原生對象是否已經被擴充了。

總結
原型極大地豐富了我們的開發代碼,但是在平時使用的過程中一定要注意上述提到的一些注意事項。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.