<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關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題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關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        深入理解javascript原型鏈和繼承_javascript技巧

        來源:懂視網 責編:小采 時間:2020-11-27 21:27:24
        文檔

        深入理解javascript原型鏈和繼承_javascript技巧

        深入理解javascript原型鏈和繼承_javascript技巧:在上一篇文章中,介紹了原型的概念,了解到在javascript中構造函數、原型對象、實例三個好基友之間的關系:每一個構造函數都有一個守護神——原型對象,原型對象心里面也存著一個構造函數的位置,兩情相悅,而實例呢卻又暗戀著原型對象,她也在心
        推薦度:
        導讀深入理解javascript原型鏈和繼承_javascript技巧:在上一篇文章中,介紹了原型的概念,了解到在javascript中構造函數、原型對象、實例三個好基友之間的關系:每一個構造函數都有一個守護神——原型對象,原型對象心里面也存著一個構造函數的位置,兩情相悅,而實例呢卻又暗戀著原型對象,她也在心
        在上一篇文章中,介紹了原型的概念,了解到在javascript中構造函數、原型對象、實例三個好基友之間的關系:每一個構造函數都有一個“守護神”——原型對象,原型對象心里面也存著一個構造函數的“位置”,兩情相悅,而實例呢卻又“暗戀”著原型對象,她也在心里留存了一個原型對象的位置。

        javascript本身不是面向對象的語言,而是基于對象的語言,對于習慣了其他OO語言的人來說,起初有些不適應,因為在這里沒有“類”的概念,或者說“類”和“實例”不區分,更不要指望有“父類”、“子類”之分了。那么,javascript中這一堆對象這么聯系起來呢?
        幸運的是,javascript在設計之初就提供了“繼承”的實現方式,在認識“繼承”之前,我們現在先來了解下原型鏈的概念。

        原型鏈

        我們知道原型都有一個指向構造函數的指針,假如我們讓SubClass原型對象等于另一個類型的實例new SuperClass()會怎么樣?此時,SubClass原型對象包含一個指向SuperClass原型的指針,SuperClass原型中也包含一個指向SuperClass構造函數的指針。。這樣層層遞進下去,就形成了一個原型鏈。

        具體代碼如下:

        使用原型鏈實現繼承

        通過上面的代碼中可以看出SubClass繼承了SuperClass的屬性和方法,這個繼承的實現是通過將SuperClass的實例賦值給SubClass的原型對象,這樣SubClass的原型對象就被SuperClass的一個實例覆蓋掉了,擁有了它的全部屬性和方法,同時還擁有一個指向SuperClass原型對象的指針。

        在使用原型鏈實現繼承時有一些需要我們注意的地方:

        注意繼承后constructor的變化。此處sub的constructor指向的是SuperClass,因為SubClass的原型指向了SuperClass的原型。在了解原型鏈時,不要忽略掉在末端還有默認的Object對象,這也是我們能在所有對象中使用toString等對象內置方法的原因。

        通過原型鏈實現繼承時,不能使用字面量定義原型方法,因為這樣會重寫原型對象(在上一篇文章中也介紹過):

        實例共享的問題。在前面講解原型和構造函數時,我們曾經介紹過包含引用類型屬性的原型會被所有的實例共享,同樣,我們繼承而來的原型中也會共享“父類”原型中引用類型的屬性,當我們通過原型繼承修改了“父類”的引用類型屬性后,其他所有繼承自該原型的實例都會受到影響,這不僅浪費了資源,也是我們不愿看到的現象:

        注意:此處在數組中添加一個元素,所有繼承自SuperClass的實例都會受到影響,但是如果修改name屬性則不會影響到其他的實例,這是因為數組為引用類型,而name為基本類型。
        如何解決實例共享的問題呢?我們接著往下看...

        經典繼承(constructor stealing)

        正如我們介紹過很少單獨使用原型定義對象一樣,在實際開發中我們也很少單獨使用原型鏈,為了解決引用類型的共享問題,javascript開發者們引入了經典繼承的模式(也有人稱為借用構造函數繼承),它的實現很簡單就是在子類型構造函數中調用超類型的構造函數。我們需要借助javascript提供的call()或者apply()函數,我們看下示例:

        SuperClass.call(this);這一句話的意思是在SubClass的實例(上下文)環境中調用了SuperClass構造函數的初始化工作,這樣每一個實例就會有自己的一份bra屬性的副本了,互不產生影響了。
        但是,這樣的實現方式仍不是完美的,既然引入了構造函數,那么同樣我們也面臨著上篇中講到的構造函數存在的問題:如果在構造函數中有方法的定義,那么對于沒一個實例都存在一份單獨的Function引用,我們的目的其實是想共用這個方法,而且我們在超類型原型中定義的方法,在子類型實例中是無法調用到的:

        如果你看過上篇文章關于原型對象和構造函數的,想必你已經知道解決這個問題的答案了,那就是沿用上篇的套路,使用“組合拳”!

        組合式繼承

        組合式繼承就是結合原型鏈和構造函數的優勢,發出各自特長,組合起來實現繼承的一種方式,簡單來說就是使用原型鏈繼承屬性和方法,使用借用構造函數來實現實例屬性的繼承,這樣既解決了實例屬性共享的問題,也讓超類型的屬性和方法得到繼承:

        組合繼承的方式也是實際開發中我們最常用的實現繼承的方式,到此已經可以滿足你實際開發的需求了,但是人對完美的追求是無止境的,那么,必然會有人對這個模式“吹毛求疵”了:你這個模式調用了兩次超類型的構造函數耶!兩次耶。。你造嗎,這放大一百倍是多大的性能損失嗎?
        最有力的反駁莫過于拿出解決方案,好在開發者找到了解決這個問題的最優方案:

        寄生組合式繼承

        在介紹這個繼承方式前,我們先了解下寄生構造函數的概念,寄生構造函數類似于前面提到的工廠模式,它的思想是定義一個公共函數,這個函數專門用來處理對象的創建,創建完成后返回這個對象,這個函數很像構造函數,但構造函數是沒有返回值的:

        寄生式繼承的實現和寄生式構造函數類似,創建一個不依賴于具體類型的“工廠”函數,專門來處理對象的繼承過程,然后返回繼承后的對象實例,幸運的是這個不需要我們自己實現,道哥(道格拉斯)早已為我們提供了一種實現方式:

        在公共函數中提供了一個簡單的構造函數,然后將傳進來對象的實例賦予構造函數的原型對象,最后返回該構造函數的實例,很簡單,但療效很好,不是嗎?這個方式被后人稱為“原型式繼承”,而寄生式繼承正是在原型式基礎上,通過增強對象的自定義屬性實現的:

        寄生式繼承方式同樣面臨著原型中函數復用的問題,于是,人們又開始拼起了積木,誕生了——寄生組合式繼承,目的是解決在指定子類型原型時調用父類型構造函數的問題,同時,達到函數的最大化復用?;谝陨匣A實現方式如下:

        這個實現方式避免了超類型的兩次調用,而且也省掉了SubClass.prototype上不必要的屬性,同時還保持了原型鏈,到此真正的結束了繼承之旅,這個實現方式也成為了最理想的繼承實現方式!人們對于javascript的繼承的爭議還在繼續,有人提倡OO,有人反對在javascript做多余的努力去實現OO的特性,管他呢,至少又深入了解了些!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        深入理解javascript原型鏈和繼承_javascript技巧

        深入理解javascript原型鏈和繼承_javascript技巧:在上一篇文章中,介紹了原型的概念,了解到在javascript中構造函數、原型對象、實例三個好基友之間的關系:每一個構造函數都有一個守護神——原型對象,原型對象心里面也存著一個構造函數的位置,兩情相悅,而實例呢卻又暗戀著原型對象,她也在心
        推薦度:
        標簽: js 理解 javascript
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top 主站蜘蛛池模板: 国产亚洲国产bv网站在线| 国产成人毛片亚洲精品| 亚洲国产成人久久| 日韩电影免费在线观看| 亚洲AV无码精品色午夜果冻不卡| 乱人伦中文视频在线观看免费| 日韩电影免费在线| 狼人大香伊蕉国产WWW亚洲| 日韩a级毛片免费视频| 国产精品亚洲а∨无码播放麻豆| 日本二区免费一片黄2019| 久久精品国产亚洲av瑜伽| 国产美女做a免费视频软件| 亚洲精品无码av片| 四虎影永久在线高清免费| 日本一区二区三区免费高清在线| 亚洲精品无码专区久久同性男| 一级做a免费视频观看网站| 国产AV无码专区亚洲AV毛网站 | 国产成人精品免费视| 亚洲最新黄色网址| 成人免费视频一区二区三区| 亚洲国产成人AV网站| 亚洲日韩在线第一页| 99热在线免费观看| 中文字幕亚洲男人的天堂网络 | 久久青青草原亚洲av无码app| 18以下岁毛片在免费播放| 亚洲美国产亚洲AV| 亚洲精品成人a在线观看| 国产免费无码一区二区| 亚洲性色高清完整版在线观看| 免费观看大片毛片| 一级做a爰黑人又硬又粗免费看51社区国产精品视 | 亚洲精品一区二区三区四区乱码 | 国产无遮挡又黄又爽免费视频 | 午夜宅男在线永久免费观看网| 在线看亚洲十八禁网站| 亚洲av无码乱码国产精品| 黄色片在线免费观看| 日本黄页网址在线看免费不卡 |