<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

        javascript繼承的六大模式小結(jié)_javascript技巧

        來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:36:56
        文檔

        javascript繼承的六大模式小結(jié)_javascript技巧

        javascript繼承的六大模式小結(jié)_javascript技巧:1.原型鏈 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //繼
        推薦度:
        導(dǎo)讀javascript繼承的六大模式小結(jié)_javascript技巧:1.原型鏈 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //繼

        1.原型鏈

        實(shí)現(xiàn)的本質(zhì)是重寫原型對(duì)象,代之以一個(gè)新類型的實(shí)例。

        2.借用構(gòu)造函數(shù)

        如果僅僅是借用構(gòu)造函數(shù),那么也將無法避免構(gòu)造函數(shù)模式存在的問題——方法都在構(gòu)造函數(shù)中定義,因此函數(shù)復(fù)用就無從談起了。而且,在超類型的原型中定義的方法,對(duì)子類型而言也是不可見的,結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式??紤]到這些問題,借用構(gòu)造函數(shù)的技術(shù)也是很少單獨(dú)使用的。

        3.組合繼承

        在這個(gè)例子中,SuperType 構(gòu)造函數(shù)定義了兩個(gè)屬性:name 和colors。SuperType 的原型定義了一個(gè)方法sayName()。SubType 構(gòu)造函數(shù)在調(diào)用SuperType 構(gòu)造函數(shù)時(shí)傳入了name 參數(shù),緊接著又定義了它自己的屬性age。然后,將SuperType 的實(shí)例賦值給SubType 的原型,然后又在該新原型上定義了方法sayAge()。這樣一來,就可以讓兩個(gè)不同的SubType 實(shí)例既分別擁有自己屬性——包括colors 屬性,又可以使用相同的方法了。

        組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷,融合了它們的優(yōu)點(diǎn),成為JavaScript 中最常用的繼承模式。而且,instanceof 和isPrototypeOf()也能夠用于識(shí)別基于組合繼承創(chuàng)建的對(duì)象。

        4.原型式繼承

        在object()函數(shù)內(nèi)部,先創(chuàng)建了一個(gè)臨時(shí)性的構(gòu)造函數(shù),然后將傳入的對(duì)象作為這個(gè)構(gòu)造函數(shù)的原型,最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。從本質(zhì)上講,object()對(duì)傳入其中的對(duì)象執(zhí)行了一次淺復(fù)制。來看下面的例子。

        克羅克福德主張的這種原型式繼承,要求你必須有一個(gè)對(duì)象可以作為另一個(gè)對(duì)象的基礎(chǔ)。如果有這么一個(gè)對(duì)象的話,可以把它傳遞給object()函數(shù),然后再根據(jù)具體需求對(duì)得到的對(duì)象加以修改即可。在這個(gè)例子中,可以作為另一個(gè)對(duì)象基礎(chǔ)的是person 對(duì)象,于是我們把它傳入到object()函數(shù)中,然后該函數(shù)就會(huì)返回一個(gè)新對(duì)象。這個(gè)新對(duì)象將person 作為原型,所以它的原型中就包含一個(gè)基本類型值屬性和一個(gè)引用類型值屬性。這意味著person.friends 不僅屬于person 所有,而且也會(huì)被anotherPerson以及yetAnotherPerson 共享。實(shí)際上,這就相當(dāng)于又創(chuàng)建了person 對(duì)象的兩個(gè)副本。

        ECMAScript 5 通過新增Object.create()方法規(guī)范化了原型式繼承。這個(gè)方法接收兩個(gè)參數(shù):一個(gè)用作新對(duì)象原型的對(duì)象和(可選的)一個(gè)為新對(duì)象定義額外屬性的對(duì)象。在傳入一個(gè)參數(shù)的情況下,Object.create()與object()方法的行為相同。

        Object.create()方法的第二個(gè)參數(shù)與Object.defineProperties()方法的第二個(gè)參數(shù)格式相同:每個(gè)屬性都是通過自己的描述符定義的。以這種方式指定的任何屬性都會(huì)覆蓋原型對(duì)象上的同名屬性。例如:

        支持Object.create()方法的瀏覽器有IE9+、Firefox 4+、Safari 5+、Opera 12+和Chrome。

        在沒有必要興師動(dòng)眾地創(chuàng)建構(gòu)造函數(shù),而只想讓一個(gè)對(duì)象與另一個(gè)對(duì)象保持類似的情況下,原型式繼承是完全可以勝任的。不過別忘了,包含引用類型值的屬性始終都會(huì)共享相應(yīng)的值,就像使用原型模式一樣。

        5.寄生式繼承

        寄生式(parasitic)繼承是與原型式繼承緊密相關(guān)的一種思路,并且同樣也是由克羅克福德推而廣之的。寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似,即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù),該函數(shù)在內(nèi)部以某種方式來增強(qiáng)對(duì)象,最后再像真地是它做了所有工作一樣返回對(duì)象。以下代碼示范了寄生式繼承模式。

        在這個(gè)例子中,createAnother()函數(shù)接收了一個(gè)參數(shù),也就是將要作為新對(duì)象基礎(chǔ)的對(duì)象。然后,把這個(gè)對(duì)象(original)傳遞給object()函數(shù),將返回的結(jié)果賦值給clone。再為clone 對(duì)象添加一個(gè)新方法sayHi(),最后返回clone 對(duì)象??梢韵裣旅孢@樣來使用createAnother()函數(shù):

        這個(gè)例子中的代碼基于person 返回了一個(gè)新對(duì)象——anotherPerson。新對(duì)象不僅具有person的所有屬性和方法,而且還有自己的sayHi()方法。
        在主要考慮對(duì)象而不是自定義類型和構(gòu)造函數(shù)的情況下,寄生式繼承也是一種有用的模式。前面示范繼承模式時(shí)使用的object()函數(shù)不是必需的;任何能夠返回新對(duì)象的函數(shù)都適用于此模式。

        使用寄生式繼承來為對(duì)象添加函數(shù),會(huì)由于不能做到函數(shù)復(fù)用而降低效率;這一
        點(diǎn)與構(gòu)造函數(shù)模式類似。

        6.寄生組合式繼承

        前面說過,組合繼承是JavaScript 最常用的繼承模式;不過,它也有自己的不足。組合繼承最大的問題就是無論什么情況下,都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型的時(shí)候,另一次是在子類型構(gòu)造函數(shù)內(nèi)部。沒錯(cuò),子類型最終會(huì)包含超類型對(duì)象的全部實(shí)例屬性,但我們不得不在調(diào)用子類型構(gòu)造函數(shù)時(shí)重寫這些屬性。再來看一看下面組合繼承的例子。

        加粗字體的行中是調(diào)用SuperType 構(gòu)造函數(shù)的代碼。在第一次調(diào)用SuperType 構(gòu)造函數(shù)時(shí),SubType.prototype 會(huì)得到兩個(gè)屬性:name 和colors;它們都是SuperType 的實(shí)例屬性,只不過現(xiàn)在位于SubType 的原型中。當(dāng)調(diào)用SubType 構(gòu)造函數(shù)時(shí),又會(huì)調(diào)用一次SuperType 構(gòu)造函數(shù),這一次又在新對(duì)象上創(chuàng)建了實(shí)例屬性name 和colors。于是,這兩個(gè)屬性就屏蔽了原型中的兩個(gè)同名屬性。圖6-6 展示了上述過程。
        如圖6-6 所示,有兩組name 和colors 屬性:一組在實(shí)例上,一組在SubType 原型中。這就是調(diào)用兩次SuperType 構(gòu)造函數(shù)的結(jié)果。好在我們已經(jīng)找到了解決這個(gè)問題方法——寄生組合式繼承。

        所謂寄生組合式繼承,即通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法。其背后的基本思路是:不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù),我們所需要的無非就是超類型原型的一個(gè)副本而已。本質(zhì)上,就是使用寄生式繼承來繼承超類型的原型,然后再將結(jié)果指定給子類型的原型。寄生組合式繼承的基本模式如下所示。

        這個(gè)示例中的inheritPrototype()函數(shù)實(shí)現(xiàn)了寄生組合式繼承的最簡單形式。這個(gè)函數(shù)接收兩個(gè)參數(shù):子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。在函數(shù)內(nèi)部,第一步是創(chuàng)建超類型原型的一個(gè)副本。第二步是為創(chuàng)建的副本添加constructor 屬性,從而彌補(bǔ)因重寫原型而失去的默認(rèn)的constructor 屬性。最后一步,將新創(chuàng)建的對(duì)象(即副本)賦值給子類型的原型。這樣,我們就可以用調(diào)用inherit-Prototype()函數(shù)的語句,去替換前面例子中為子類型原型賦值的語句了,例如

        這個(gè)例子的高效率體現(xiàn)在它只調(diào)用了一次SuperType 構(gòu)造函數(shù),并且因此避免了在SubType.prototype 上面創(chuàng)建不必要的、多余的屬性。與此同時(shí),原型鏈還能保持不變;因此,還能夠正常使用instanceof 和isPrototypeOf()。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。

        YUI 的YAHOO.lang.extend()方法采用了寄生組合繼承,從而讓這種模式首次出現(xiàn)在了一個(gè)應(yīng)用非常廣泛的JavaScript 庫中。要了解有關(guān)YUI 的更多信息,請(qǐng)?jiān)L問http://developer. yahoo.com/yui/。

        以上所述就是本文的全部內(nèi)容了,希望對(duì)大家學(xué)習(xí)javascript繼承有所幫助。

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        javascript繼承的六大模式小結(jié)_javascript技巧

        javascript繼承的六大模式小結(jié)_javascript技巧:1.原型鏈 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //繼
        推薦度:
        標(biāo)簽: 技巧 javascript 六種
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲明星合成图综合区在线| 毛茸茸bbw亚洲人| 亚洲第一精品电影网| 3344在线看片免费| 亚洲AV中文无码字幕色三| 成人无码精品1区2区3区免费看| 免费在线观看黄网| 国产成人高清亚洲一区久久| 四虎永久在线精品免费观看地址| 日韩国产欧美亚洲v片 | 永久免费无码网站在线观看个| 永久免费视频v片www| 亚洲AV日韩综合一区| 亚洲成A∨人片天堂网无码| 国产福利在线观看永久免费| 国产亚洲精品va在线| 未满十八18禁止免费无码网站| 亚洲黄色免费网址| 毛片免费全部免费观看| 亚洲6080yy久久无码产自国产| 亚洲高清偷拍一区二区三区| 久久国产精品免费一区二区三区| 亚洲av无码国产精品色午夜字幕 | 成人毛片100免费观看| 亚洲va中文字幕无码久久| 国产成人精品免费午夜app | 国产精品亚洲精品久久精品| 亚洲国产免费综合| 无码国产精品一区二区免费3p | 一区二区三区免费看| 亚洲av中文无码乱人伦在线咪咕 | 亚洲国产成人VA在线观看| 免费国产午夜高清在线视频| 亚洲天堂2016| 亚洲欧洲日产国码一级毛片| 久久久久国色av免费看| 亚洲精品无码专区在线播放| 亚洲精品无码鲁网中文电影| a级毛片无码免费真人| a级毛片免费播放| 亚洲人成网站18禁止|