摘要:這個做法借鑒自其他語言,主要是為了區(qū)別于中的其他函數(shù)因為構(gòu)造函數(shù)本身也是函數(shù),只不過可以用來創(chuàng)建對象而已。
面向?qū)ο蟮恼Z言有一個標志,那就是它們都有類的概念,而通過類可以創(chuàng)建任意多個具有相同屬性和方法的對象
創(chuàng)建對象雖然Object構(gòu)造函數(shù)或者對象字面量都可以用來創(chuàng)建單個對象,但這些方式有個明顯的缺點:使用同一個接口創(chuàng)建很多對象,會產(chǎn)生大量重復(fù)代碼(為什么或產(chǎn)生大量重復(fù)的代碼?)。
工廠模式function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("Nicholas", 29, "Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor");
工廠模式的特點:解決了創(chuàng)建多個相似對象的問題,但卻沒有解決對象識別的問題(即怎么知道一個對象的類型);
構(gòu)造函數(shù)模式構(gòu)造函數(shù)始終都應(yīng)該以一個大寫字母開頭,而非構(gòu)造函數(shù)則應(yīng)該以一個小寫字母開頭。這個做法借鑒自其他 OO 語言,主要是為了區(qū)別于 ECMAScript中的其他函數(shù);因為構(gòu)造函數(shù)本身也是函數(shù),只不過可以用來創(chuàng)建對象而已。
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");
要創(chuàng)建 Person 的新實例,必須使用 new 操作符。這中方式調(diào)用構(gòu)造函數(shù)實際上回會經(jīng)歷4個步驟
創(chuàng)建一個對象
將構(gòu)造函數(shù)的作用域賦給新對象(因此this就指向了這個新對象)
執(zhí)行構(gòu)造函數(shù)中的代碼(為這個新對象添加屬性)
返回新對象
缺點: 每個方法都要在每個實例上重新創(chuàng)建一遍。
原型模式每一個函數(shù)都有一個 prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以有特定類型的所有實例共享的屬性和方法。
function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //"Nicholas" var person2 = new Person(); person2.sayName(); //"Nicholas" alert(person1.sayName == person2.sayName); //true
新對象的這些屬性和方法是由所有實例共享的。換句話說,person1 和 person2 訪問的都是同一組屬性和同一個 sayName()函數(shù)
理解原型對象構(gòu)造函數(shù)、原型和實例的關(guān)系:每個構(gòu)造函數(shù)都有一個原型對象(prototype屬性),原型對象都包含一個指向構(gòu)造函數(shù)的指針(constructor(構(gòu)造函數(shù))屬性),而實例有包含一個指向原型對象的內(nèi)部指針([[Prototype]]、Firefox、Safari 和 Chrome 在每個對象上都支持一個屬性__proto__)
更簡單的原型語法function Person(){ } Person.prototype = { constructor : Person, // name : "Nicholas", age : 29, job: "Software Engineer", sayName : function () { alert(this.name); } };
本質(zhì)上完全重寫了默認的 prototype 對象,因此 constructor 屬性也就變成了新對象的 constructor 屬性(指向 Object 構(gòu)造函數(shù)),不再指向 Person 函數(shù)。所以需要手動設(shè)置 constructor 屬性,并將它的值設(shè)置為 Person,確保通過該屬性能夠訪問到適當?shù)闹怠?/p> 原型與in操作符 原型的動態(tài)性 原生對象的原型
原型模式的重要性不僅體現(xiàn)在創(chuàng)建自定義類型方面,就連所有原生的引用類型,都是采用這種模式創(chuàng)建的。所有原生引用類型(Object、Array、String等)都在期構(gòu)造函數(shù)的原型定義了方法。例如,在Array.prototype中可以找到sort()方法,而在String.prototype中可以找到substring()方法。
alert(typeof Array.prototype.sort); //"function" alert(typeof String.prototype.substring); //"function"
通過原生對象的原型,不僅可以取得所有默認方法的引用,而且也可以定義新方法。可以像修改自定義對象的原型一樣修改原型對象的原型,因此可以隨時添加方法。下面的代碼就給基本包裝類型String添加了一個名為 startsWith()的方法。
String.prototype.startsWith = function (text) { return this.indexOf(text) == 0; }; var msg = "Hello world!"; alert(msg.startsWith("Hello")); //true原型對象的問題
缺點:
因為省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié),結(jié)果所有在默認情況下都將取得相同的屬性值
最大問題是由其共享的本性所導(dǎo)致的。
原型中所有屬性是被很多實例共享的,這種共享對于函數(shù)非常合適。對于那些包含基本值的屬性倒也說的過去,畢竟(如前面的例子所示),通過在實例上添加同一個同名屬性,可以隱藏在原型中的對應(yīng)屬性。然而,對于包含引用類型值的屬性來說,問題就比較突出了。
function Person(){ } Person.prototype = { constructor: Person, name : "Nicholas", age : 29, job : "Software Engineer", friends : ["Shelby", "Court"], sayName : function () { alert(this.name); } }; var person1 = new Person(); var person2 = new Person(); person1.friends.push("Van"); alert(person1.friends); //"Shelby,Court,Van" alert(person2.friends); //"Shelby,Court,Van" alert(person1.friends === person2.friends); //true繼承 原型鏈
基本思想:利用原型讓一個引用類型繼承另一個類型的屬性和方法。
function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //繼承了 SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this.subproperty; }; var instance = new SubType(); alert(instance.getSuperValue()); //true
原型的搜索機制:當以讀取模式方式訪問一個實例屬性時,首先會在實例中搜索該屬性。如果沒有找到改屬性,則會繼續(xù)搜索實例的原型。在通過原型鏈實現(xiàn)繼承的情況,搜索過程就得以沿著原型鏈繼續(xù)向上。在找不到屬性或方法的情況下,搜索過程是要一環(huán)一環(huán)地前行到原型鏈末端才會停下來。
默認的原型我們引用類型默認都繼承了Object,而這個繼承也是通過原型鏈實現(xiàn)的。大家要記住,所有函數(shù)的默認原型都是Object的實例,因此默認原型都會包含一個內(nèi)部指針,指向Object.prototype。這也正式所有自定義類型都會繼承toString()、valueOf()等默認方法的根本原因。
完整的原型鏈:
主要問題來自于包含引用類型的原型(引用類型值的原型屬性會被所有實例共享)。在通過原型來實現(xiàn)繼承時,原型實際上回變成另一個類型的實例。于是,原先的實例屬性也就順理成章地變成了現(xiàn)在的原型屬性了。
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ } //繼承了 SuperType SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black"
原型鏈的第二個問題是:在創(chuàng)建子類型的實例時,不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。實際上,應(yīng)該說是沒有辦法在不影響所有對象實例的情況下,給超類型的構(gòu)造函數(shù)傳遞參數(shù)。有鑒于此,在加上前面剛剛討論過的由于原型中包含引用類型值所帶來的問題,實踐中很少會多帶帶使用原型鏈。
借用構(gòu)造函數(shù)基本思想:在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。通過apply()和call()方法也可以在(將來)新創(chuàng)建的對子那個上執(zhí)行構(gòu)造函數(shù)
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //繼承了 SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green"優(yōu)點
傳遞參數(shù).借用構(gòu)造函數(shù)可以在子類型構(gòu)造函數(shù)中向超類型構(gòu)造函數(shù)傳遞參數(shù)
function SuperType(name){ this.name = name; } function SubType(){ //繼承了 SuperType,同時還傳遞了參數(shù) SuperType.call(this, "Nicholas"); //實例屬性 this.age = 29; } var instance = new SubType(); alert(instance.name); //"Nicholas"; alert(instance.age); //29問題
構(gòu)造函數(shù)存在的問題——方法都在構(gòu)造函數(shù)定義,因此函數(shù)就無法復(fù)用。而且在超類型的原型中定義方法,對子類型而言也是不可見的,結(jié)果所有類型都只能在使用構(gòu)造函數(shù)模式
組合繼承組合繼承:有時候也叫偽經(jīng)典繼承,指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊,從而發(fā)揮二者之長的一種繼承模式。
基本思想: 使用原型鏈實現(xiàn)對原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。這樣,即通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用,又能夠保證每個實例都有它自己的屬性。
function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ //繼承屬性 SuperType.call(this, name); this.age = age; } //繼承方法 SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27
instanceof 和 isPrototypeOf()也能夠用于識別基于組合繼承創(chuàng)建的對象
小結(jié)ECMAScript 支持面向?qū)ο螅∣O)編程,但不使用類或者接口。對象可以在代碼執(zhí)行過程中創(chuàng)建和增強,因此具有動態(tài)性而非嚴格定義的實體。在沒有類的情況下,可以采用下列模式創(chuàng)建對象。
工廠模式,使用簡單的函數(shù)創(chuàng)建對象,為對象添加屬性和方法,然后返回對象。這個模式后來被構(gòu)造函數(shù)模式所取代。
構(gòu)造函數(shù)模式,可以創(chuàng)建自定義引用類型,可以像創(chuàng)建內(nèi)置對象實例一樣使用new操作符。不過,構(gòu)造函數(shù)模式也有缺點,即它的每個成員都無法得到復(fù)用,包括函數(shù)。由于函數(shù)可以不局限于任何對象(即與對象具有松散耦合的特點),因此沒有理由在多個對象間共享函數(shù)。
原型模式,使用構(gòu)造函數(shù)的prototype屬性來指定那些應(yīng)該共享的屬性和方法。組合使用構(gòu)造函數(shù)模式和原型模式時,使用構(gòu)造函數(shù)定義實例屬性,而使用原型定義共享的屬性和方法。
JavaScript主要通過原型鏈實現(xiàn)繼承。原型鏈的構(gòu)建是通過講一個類型的實例賦值給另一個構(gòu)造函數(shù)的原型實現(xiàn)的。這樣,子類型就能夠訪問超類型的所有屬性和方法,這一點與基于類的繼承很相似。原型鏈的問題是對象實例共享所有繼承的屬性和方法,因此不適宜多帶帶使用。解決這個問題的技術(shù)是借用構(gòu)造函數(shù),即在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。這樣就可以做到每個實例都具有自己的屬性,同時還能保只使用構(gòu)造函數(shù)模式來定義類型。使用最多的繼承模式是組合繼承,這種模式使用原型鏈繼承共享的屬性和方法,而通過借用構(gòu)造函數(shù)繼承實例屬性。
此外,還存在下列可供選擇的繼承模式。
原型式繼承,可以在不必預(yù)先定義構(gòu)造函數(shù)的情況下實現(xiàn)繼承,其本質(zhì)是執(zhí)行對給定對象的淺復(fù)制。而復(fù)制得到的副本還可以得到進一步改造。
寄生式繼承,與原型式繼承非常相似,也是基于對象或某些寫信創(chuàng)建一個對象,然后增強對象。最后返回對象。為了解決組合繼承模式由于多次調(diào)用超類型構(gòu)造函數(shù)而導(dǎo)致的低效率問題,可以將這個模式與組合繼承一起使用。
寄生組合式繼承,集寄生式繼承和組合繼承的有點與一身,是實現(xiàn)基于類型繼承的最有效方式
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/103549.html
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:說到底面向?qū)ο蟛攀浅绦蛘Z言的根本。其實面向?qū)ο缶幊陶f的就是自定義對象。里并沒有類的概念,所以嚴格上來講這是個假的面向?qū)ο罄锏拿嫦驅(qū)ο缶幊态F(xiàn)在好了,終于聽到別人鄙視我們了,給我們提供了類這個概念,其實是向傳統(tǒng)語言更靠齊了。 通過前兩篇文章,我們了解了對象的概念以及面向?qū)ο罄锏南嚓P(guān)概念等知識,那前面說了對象分類里的前兩種,這篇文章要詳細去說第三種自定義對象,那真正的好戲這就來了! 面向?qū)ο?..
摘要:用代碼可以這樣描述安全到達國外面向過程既然說了面向?qū)ο螅敲磁c之對應(yīng)的就是面向過程。小結(jié)在這篇文章中,介紹了什么是面向?qū)ο蠛兔嫦蜻^程,以及中對象的含義。 這是 javascript 面向?qū)ο蟀鎵K的第一篇文章,主要講解對面向?qū)ο笏枷氲囊粋€理解。先說說什么是對象,其實這個還真的不好說。我們可以把自己當成一個對象,或者過年的時候相親,找對象,那么你未來的老婆也是一個對象。我們就要一些屬性,比...
閱讀 2005·2023-04-25 16:53
閱讀 1446·2021-10-13 09:39
閱讀 611·2021-09-08 09:35
閱讀 1646·2019-08-30 13:03
閱讀 2126·2019-08-30 11:06
閱讀 1835·2019-08-30 10:59
閱讀 3194·2019-08-29 17:00
閱讀 2293·2019-08-23 17:55