《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記二:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法分析
本文實(shí)例講述了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法。分享給大家供大家參考,具體如下:
1.關(guān)于繼承:
百度百科對(duì)繼承的解釋是:繼承是指一個(gè)對(duì)象直接使用另一對(duì)象的屬性和方法。
(話說(shuō)百科對(duì)于計(jì)算機(jī)概念的繼承的解釋也太簡(jiǎn)略了)
繼承的好處,優(yōu)點(diǎn)學(xué)過(guò)面向?qū)ο蟮耐瑢W(xué)都知道,就不贅述了。
javascript中的繼承有三種(不同的書上對(duì)這三中的名稱翻譯都不一樣,我按照我的理解來(lái)命名吧):
- a.構(gòu)造函數(shù)繼承(類式繼承,組合繼承,偽經(jīng)典繼承)
- b.原型繼承
- c.原型賦值(遍歷)繼承(寄生式繼承)
2.構(gòu)造函數(shù)繼承
所謂的構(gòu)造函數(shù)繼承,就是通過(guò)創(chuàng)建一個(gè)新對(duì)象,調(diào)用父類構(gòu)造函數(shù)實(shí)現(xiàn)的一種繼承;
(知識(shí)點(diǎn):函數(shù)對(duì)象的原型會(huì)有一個(gè)屬性叫constructor, constructor實(shí)際指向的是這個(gè)函數(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)用的實(shí)際上是superclass(),這樣subclass.prototype.construcor = superclass
subclass.prototype.constructor = subclass;//將subclass的構(gòu)造函數(shù)改寫為正常的自身的構(gòu)造函數(shù)
}
3.原型式繼承
我們知道javascript在引用一個(gè)對(duì)象的屬性時(shí),首先會(huì)去讀這個(gè)對(duì)象是否有這個(gè)屬性,如果沒(méi)有會(huì)繼續(xù)看這個(gè)對(duì)象的原型是否有這個(gè)屬性;
var person ={}
var author = clone(person);
function clone(obj){
function F(){};
F.prototype = obj;
return new F;
}
clone函數(shù)的作用就是把父類的所有成員都給了新對(duì)象的prototype,成為了新對(duì)象prototype的成員,因此子類在引用一個(gè)父類屬性時(shí),都能在prototype中找到,但是這種方式繼承是的所有克隆出來(lái)的對(duì)象都共享每個(gè)屬性和方法的唯一實(shí)例(因?yàn)槎际峭ㄟ^(guò)原型讀取),只有在直接設(shè)置了某個(gè)克隆出來(lái)的對(duì)象的屬性和方法(變?yōu)閷?duì)象獨(dú)立屬性),情況才會(huì)有變化。
4.原型賦值(遍歷)繼承
這種賦值比原型賦值好的一點(diǎn)在于它控制繼承的范圍
var person = {};
augment(author, person);
//參數(shù)最少兩個(gè),超過(guò)兩個(gè)則表示指定要繼承的成員
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這樣定義的對(duì)象,而不是用函數(shù)來(lái)定義的對(duì)象,如果使用函數(shù)定義的對(duì)象,同時(shí)又要指定繼承的成員,別忘了constructor
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記五:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)工廠模式實(shí)例分析
- JavaScript設(shè)計(jì)模式之工廠模式和抽象工廠模式定義與用法分析
- JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記七:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)組合模式詳解
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用實(shí)例分析
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記三:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法分析
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記一:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義分析
- javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
相關(guān)文章
使用JS實(shí)現(xiàn)圖片輪播的實(shí)例(前后首尾相接)
下面小編就為大家?guī)?lái)一篇使用JS實(shí)現(xiàn)圖片輪播的實(shí)例(前后首尾相接)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript隱式類型轉(zhuǎn)換例子總結(jié)
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換例子總結(jié),熟練掌握類型轉(zhuǎn)換,理解其中的規(guī)律??梢宰屇愕拇a更簡(jiǎn)潔更安全,下文圍繞主題JS隱式轉(zhuǎn)換,需要的朋友可以參考一下2022-08-08
javascript學(xué)習(xí)小結(jié)之prototype
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用,包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的,本節(jié)主要介紹prototype.2015-12-12
使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試實(shí)例詳解
這篇文章主要介紹了使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試,結(jié)合實(shí)例形式詳細(xì)分析了使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試具體原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-04-04
JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互
這篇文章主要介紹了用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互2006-10-10
防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方法
這篇文章主要介紹了防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方式的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10

