摘要:參考內容關于本文本文轉自大叔的深入理解系列深入理解系列文章,包括了原創,翻譯,轉載,整理等各類型文章,原文是大叔的一個非常不錯的專題,現將其重新整理發布。
前言
JavaScript 不包含傳統的類繼承模型,而是使用 prototypal 原型模型。
雖然這經常被當作是 JavaScript 的缺點被提及,其實基于原型的繼承模型比傳統的類繼承還要強大。實現傳統的類繼承模型是很簡單,但是實現 JavaScript 中的原型繼承則要困難的多。
由于 JavaScript 是唯一一個被廣泛使用的基于原型繼承的語言,所以理解兩種繼承模式的差異是需要一定時間的,今天我們就來了解一下原型和原型鏈。
原型14年前,我(TOM大叔)剛學習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種方式的任何一種,我們的主要目的是看如何將k對象設置到真正的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)); //2 alert(calc.decimalDigits); //undefined重寫原型
在使用第三方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,不要對代碼運行的環境做任何假設,不要假設原生對象是否已經被擴展了。
總結原型極大地豐富了我們的開發代碼,但是在平時使用的過程中一定要注意上述提到的一些注意事項。
參考內容:http://bonsaiden.github.com/JavaScript-Garden/zh/
關于本文本文轉自TOM大叔的深入理解JavaScript系列
【深入理解JavaScript系列】文章,包括了原創,翻譯,轉載,整理等各類型文章,原文是TOM大叔的一個非常不錯的專題,現將其重新整理發布。謝謝大叔。如果你覺得本文不錯,請幫忙點個推薦,支持一把,感激不盡。
更多優秀文章歡迎關注我的專欄
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78449.html
摘要:深入之繼承的多種方式和優缺點深入系列第十五篇,講解各種繼承方式和優缺點。對于解釋型語言例如來說,通過詞法分析語法分析語法樹,就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎,再讓我...
摘要:設計模式是以面向對象編程為基礎的,的面向對象編程和傳統的的面向對象編程有些差別,這讓我一開始接觸的時候感到十分痛苦,但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程,否則只會讓你自己更痛苦。 JavaScript 中的構造函數 學習總結。知識只有分享才有存在的意義。 是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...
摘要:深入系列的第一篇,從原型與原型鏈開始講起,如果你想知道構造函數的實例的原型,原型的原型,原型的原型的原型是什么,就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇,從原型與原型鏈開始講起,如果你想知道構造函數的實例的原型,原型的原型,原型的原型的原型是什么,就來看看這篇文章吧。 構造函數創建對象 我們先...
摘要:綜上所述有原型鏈繼承,構造函數繼承經典繼承,組合繼承,寄生繼承,寄生組合繼承五種方法,寄生組合式繼承,集寄生式繼承和組合繼承的優點于一身是實現基于類型繼承的最有效方法。 一、前言 繼承是面向對象(OOP)語言中的一個最為人津津樂道的概念。許多面對對象(OOP)語言都支持兩種繼承方式::接口繼承 和 實現繼承 。 接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由于js中方法沒有簽名...
摘要:理解的函數基礎要搞好深入淺出原型使用原型模型,雖然這經常被當作缺點提及,但是只要善于運用,其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法,包括,,。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。 怎樣使用 this 因為本人屬于偽前端,因此文中只看懂了 8 成左右,希望能夠給大家帶來幫助....(據說是阿里的前端妹子寫的) this 的值到底...
閱讀 2502·2023-04-25 22:09
閱讀 1018·2021-11-17 17:01
閱讀 1535·2021-09-04 16:45
閱讀 2615·2021-08-03 14:02
閱讀 811·2019-08-29 17:11
閱讀 3249·2019-08-29 12:23
閱讀 1081·2019-08-29 11:10
閱讀 3277·2019-08-26 13:48