《javascript設計模式》學習筆記二:Javascript面向?qū)ο蟪绦蛟O計繼承用法分析
本文實例講述了Javascript面向?qū)ο蟪绦蛟O計繼承用法。分享給大家供大家參考,具體如下:
1.關于繼承:
百度百科對繼承的解釋是:繼承是指一個對象直接使用另一對象的屬性和方法。
(話說百科對于計算機概念的繼承的解釋也太簡略了)
繼承的好處,優(yōu)點學過面向?qū)ο蟮耐瑢W都知道,就不贅述了。
javascript中的繼承有三種(不同的書上對這三中的名稱翻譯都不一樣,我按照我的理解來命名吧):
- a.構造函數(shù)繼承(類式繼承,組合繼承,偽經(jīng)典繼承)
- b.原型繼承
- c.原型賦值(遍歷)繼承(寄生式繼承)
2.構造函數(shù)繼承
所謂的構造函數(shù)繼承,就是通過創(chuàng)建一個新對象,調(diào)用父類構造函數(shù)實現(xiàn)的一種繼承;
(知識點:函數(shù)對象的原型會有一個屬性叫constructor, constructor實際指向的是這個函數(shù))
function person(name){ this.name = name; } extend(author, person); function extend(subclass, superclass){ var f= function(){}; f.prototype = superclass.prototype;//f.prototype.constructor = superclass subclass.prototype = new f();//這里調(diào)用的實際上是superclass(),這樣subclass.prototype.construcor = superclass subclass.prototype.constructor = subclass;//將subclass的構造函數(shù)改寫為正常的自身的構造函數(shù) }
3.原型式繼承
我們知道javascript在引用一個對象的屬性時,首先會去讀這個對象是否有這個屬性,如果沒有會繼續(xù)看這個對象的原型是否有這個屬性;
var person ={} var author = clone(person); function clone(obj){ function F(){}; F.prototype = obj; return new F; }
clone函數(shù)的作用就是把父類的所有成員都給了新對象的prototype,成為了新對象prototype的成員,因此子類在引用一個父類屬性時,都能在prototype中找到,但是這種方式繼承是的所有克隆出來的對象都共享每個屬性和方法的唯一實例(因為都是通過原型讀取),只有在直接設置了某個克隆出來的對象的屬性和方法(變?yōu)閷ο螵毩傩裕?,情況才會有變化。
4.原型賦值(遍歷)繼承
這種賦值比原型賦值好的一點在于它控制繼承的范圍
var person = {}; augment(author, person); //參數(shù)最少兩個,超過兩個則表示指定要繼承的成員 function augment(receivingclass, givingclass){ if(arguments[2]){ for(var i=2;i<arguments.length;i++){ receivingclass.prototype[arguments[i]] = givingclass.prototype[arguments[i]]; } } else{ for(methodname in givingclass.prototype){ receivingclass.prototype[methodname] = givingclass.prototype[methodname]; } } }
這種方式比較適用于var obj這樣定義的對象,而不是用函數(shù)來定義的對象,如果使用函數(shù)定義的對象,同時又要指定繼承的成員,別忘了constructor
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
- javascript設計模式 – 簡單工廠模式原理與應用實例分析
- 《javascript設計模式》學習筆記五:Javascript面向?qū)ο蟪绦蛟O計工廠模式實例分析
- JavaScript設計模式之工廠模式和抽象工廠模式定義與用法分析
- JavaScript設計模式之工廠模式和構造器模式
- 《javascript設計模式》學習筆記七:Javascript面向?qū)ο蟪绦蛟O計組合模式詳解
- 《javascript設計模式》學習筆記四:Javascript面向?qū)ο蟪绦蛟O計鏈式調(diào)用實例分析
- 《javascript設計模式》學習筆記三:Javascript面向?qū)ο蟪绦蛟O計單例模式原理與實現(xiàn)方法分析
- 《javascript設計模式》學習筆記一:Javascript面向?qū)ο蟪绦蛟O計對象成員的定義分析
- javascript設計模式 – 工廠模式原理與應用實例分析
相關文章
淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)
下面小編就為大家分享一篇淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01JS使用單鏈表統(tǒng)計英語單詞出現(xiàn)次數(shù)
這篇文章主要為大家詳細介紹了JS使用單鏈表統(tǒng)計英語單詞出現(xiàn)次數(shù)的相關資料,列出所有單詞及其出現(xiàn)次數(shù),感興趣的小伙伴們可以參考一下2016-06-06JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼
這篇文章介紹了JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼,有需要的朋友可以參考一下2013-07-07JS Html轉(zhuǎn)義和反轉(zhuǎn)義(html編碼和解碼)的實現(xiàn)與使用方法總結
這篇文章主要介紹了JS Html轉(zhuǎn)義和反轉(zhuǎn)義(html編碼和解碼)的實現(xiàn)與使用方法,結合實例形式總結分析了JS Html轉(zhuǎn)義和反轉(zhuǎn)義、html編碼和解碼相關封裝類定義與具體使用技巧,需要的朋友可以參考下2020-03-03