javascript每日必學(xué)之繼承
朋友們大家好,我們今天這一講就接著前面的封裝繼續(xù)講解,今天就是在前面內(nèi)容上面的升級(jí),OOP思想中的繼承,我們就先來(lái)解釋一下繼承到底是什么意思,我們?cè)谑裁吹胤綍?huì)用到繼續(xù)。
繼承就是,后代繼續(xù)祖先的一系列屬性,行為。后代仍然算是與祖先同族,下面我們?cè)儆靡恍┚唧w描述,來(lái)理解一下什么是繼承

中國(guó)人,跟美國(guó)人都是 繼承自 人類祖先,所以我們具有相同的屬性行為,但是還有一定的差異,后面我們們將繼續(xù)講到的多態(tài),所以通過(guò)上面的示例圖,我們可以清晰的知道,人與人之前其實(shí)大同小異,所以我們?cè)倏纯聪旅娴氖纠a,我們就知道,用代碼來(lái)模擬繼承,我們就又可以知道一種方法來(lái)寫盡量少的代碼達(dá)到做盡量多的事。
//遺傳繼承函數(shù)
function Extend(Children,Parent){
//這里僅僅只是繼承的原型鏈接定義的行為
for(var p in Parent.prototype){
Children[p] = Parent.prototype[p];
}
}
//人類祖先
function Human(){
this.weight = "50kg";
this.height = "180cm";
this.hair = "棕色";
}
//吃飯
Human.prototype.Eat = function(){
console.log("吃飯");
}
//說(shuō)話
Human.prototype.Say = function(){
console.log("大家好我是地球人");
}
//行走
Human.prototype.Walk = function(){
console.log("我是人類,天生就可以兩條腿直立行走");
}
//繁衍
Human.prototype.Multiply = function(){
console.log("跟老婆一起做羞羞的事,就是為了人類的繁榮");
}
//中國(guó)人
function Chinese(){
//調(diào)用繼承函數(shù)
Extend(this,Human);
}
//美國(guó)人
function American(){
//調(diào)用繼承函數(shù)
Extend(this,Human);
}
我們就這樣寫,就模擬了高級(jí)語(yǔ)言中的繼承,下面我們看看運(yùn)行后,有沒(méi)有問(wèn)題

運(yùn)行后,我們發(fā)現(xiàn)了問(wèn)題,這樣寫,我們已經(jīng)可以實(shí)現(xiàn)原型鏈接的繼承了,而且也大大的節(jié)省了很多代碼,我們?cè)趯慍hinese和American函數(shù)的時(shí)候,是不是只寫了少量代碼,我們就把父類行為給繼承過(guò)來(lái)了,而實(shí)例也能調(diào)用父類所擁有的行為函數(shù),但是這樣寫,我們還沒(méi)有完全實(shí)現(xiàn)繼承,因?yàn)槲覀冊(cè)谡{(diào)用hair屬性的時(shí)候就根本沒(méi)有起到作用,那么,我們?cè)傩薷囊幌麓a,就可以實(shí)現(xiàn)完全繼承了
//遺傳繼承函數(shù)
function Extend(Children,Parent){
//現(xiàn)在我們是從父類實(shí)例來(lái)繼承,所以屬性和方法都會(huì)被繼承的
for(var p in Parent){
if(typeof Children[p] == "undefined"){
Children[p] = Parent[p];
}
}
}
//人類祖先
function Human(){
this.weight = "50kg";
this.height = "180cm";
this.hair = "棕色";
}
//吃飯
Human.prototype.Eat = function(){
console.log("吃飯");
}
//說(shuō)話
Human.prototype.Say = function(){
console.log("大家好我是地球人");
}
//行走
Human.prototype.Walk = function(){
console.log("我是人類,天生就可以兩條腿直立行走");
}
//繁衍
Human.prototype.Multiply = function(){
console.log("跟老婆一起做羞羞的事,就是為了人類的繁榮");
}
//中國(guó)人
function Chinese(){
//調(diào)用繼承函數(shù)
Extend(this,new Human());
}
//美國(guó)人
function American(){
//調(diào)用繼承函數(shù)
Extend(this,new Human());
}
我們還是要看一下運(yùn)行的效果是不是跟我們想象中的一樣?

通過(guò)上在的代碼我們不難看出,現(xiàn)在的繼承函數(shù)實(shí)際上是從Human類的具體實(shí)例中復(fù)制的屬性及行為,這樣我們就更進(jìn)一步模擬出了類的繼承,在上面有一句,我還需要給大家解釋一下
if(typeof Children[p] == "undefined"){
......
}
這里出現(xiàn)的typeof關(guān)鍵字其實(shí)是一個(gè)運(yùn)算符,是查看某個(gè)變量是什么類型,如果是未定義的情況,運(yùn)算出的結(jié)果就是 "undefined" ,所以我就是這樣比較,如果子類沒(méi)有定義過(guò)這樣的屬性或者行為函數(shù),那么就從父類繼承(注:這里的解釋是為了后面的多態(tài)作鋪墊)。
接下來(lái)我們?cè)賮?lái)看一下可不可以多重繼承,前面我們已經(jīng)提到Chinese與American兩個(gè)類都是繼承自Human類,下面我們?cè)賹懸粋€(gè)類來(lái)繼承自Chinese
//四川人
function SiChuanMan(){
Extend(this,new Chinese());
}

現(xiàn)在我們已經(jīng)寫出很健壯的繼承代碼,理解也非常的簡(jiǎn)單,只要在聲明新類的時(shí)候,在構(gòu)造函數(shù)里面調(diào)用一下繼承函數(shù),我們就可以實(shí)現(xiàn)屬性及行為函數(shù)的完全繼承,這樣,我們就可以省下大量的代碼,OOP思想的優(yōu)勢(shì)再一次地被體現(xiàn)了出來(lái),如果我們要模擬中國(guó)每個(gè)省份的人,如果我每個(gè)省份都照著Human類的方式去寫,從太陽(yáng)出來(lái)寫到第二天的太陽(yáng)落坡都寫不完。繼承的寫法多種多樣,每個(gè)人都有自己的寫法,這里,我就是以一種最簡(jiǎn)單的方式給大家講解的,到后面大家能熟練使用時(shí)候,也可以以自己喜歡的方式去寫,javascript本身就是一門很靈活的語(yǔ)言。
總結(jié)一下,我們今天在封裝基礎(chǔ)上進(jìn)一步做了升級(jí),這樣我們就實(shí)現(xiàn)了對(duì)象的繼承,書(shū)寫的代碼量被進(jìn)一步被壓縮,想想能提高工作的效率,更能提高代碼的優(yōu)雅度,是不是有一點(diǎn)的小激動(dòng)呢,只要跟著我腳步走,我們就可以用最簡(jiǎn)單的方式去理解最復(fù)雜的東西,其實(shí)程序并不復(fù)雜,復(fù)雜的原因是大家沒(méi)有得到正確的帶領(lǐng),本來(lái)很簡(jiǎn)單的一個(gè)東西,被不同的人理解及解釋成不同的東西,這樣學(xué)習(xí)起來(lái)就復(fù)雜了,更多的是沒(méi)有連續(xù)的教程一步一步地帶領(lǐng)大家向正確的方向邁進(jìn),所以很長(zhǎng)時(shí)間都很難得到提升。
- Extjs學(xué)習(xí)筆記之八 繼承和事件基礎(chǔ)
- 前端開(kāi)發(fā)必須知道的JS之原型和繼承
- Javascript面向?qū)ο缶幊蹋ǘ?構(gòu)造函數(shù)的繼承
- Javascript面向?qū)ο缶幊蹋ㄈ?非構(gòu)造函數(shù)的繼承
- JS繼承--原型鏈繼承和類式繼承
- 深入了解javascript中的prototype與繼承
- ExtJS4中使用mixins實(shí)現(xiàn)多繼承示例
- 深入理解JavaScript是如何實(shí)現(xiàn)繼承的
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- js的2種繼承方式詳解
相關(guān)文章
微信公眾平臺(tái)開(kāi)發(fā)教程(六)獲取個(gè)性二維碼的實(shí)例
二維碼的用處有很多,本篇文章主要介紹了微信公眾平臺(tái)開(kāi)發(fā)教程(六)獲取個(gè)性二維碼的實(shí)例,有興趣的可以了解一下。2016-12-12
詳解JavaScript?(!!)?中的雙感嘆號(hào)是干什么用的
JavaScript?不是靜態(tài)語(yǔ)言,而是動(dòng)態(tài)語(yǔ)言,這意味著變量可以引用或保存任何類型的值,此外,該類型可以隨時(shí)更改,這篇文章主要介紹了JavaScript?(!!)?中的雙感嘆號(hào)作用,需要的朋友可以參考下2022-09-09
學(xué)習(xí)掌握J(rèn)avaScript中this的使用技巧
這篇文章主要幫助大家學(xué)習(xí)并熟練掌握J(rèn)avaScript中this的使用技巧,感興趣的小伙伴們可以參考一下2016-08-08
javascript基于定時(shí)器實(shí)現(xiàn)進(jìn)度條功能實(shí)例
這篇文章主要介紹了javascript基于定時(shí)器實(shí)現(xiàn)進(jìn)度條功能,簡(jiǎn)單分析了javascript定時(shí)器的功能、使用方法并給出了基于定時(shí)器實(shí)現(xiàn)的進(jìn)度條功能實(shí)例,需要的朋友可以參考下2017-10-10
JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運(yùn)動(dòng)小球,canvas被稱為畫布,可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫效果,下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
js獲取URL的參數(shù)的方法(getQueryString)示例
getQueryString方法默認(rèn)返回的是 string如果是int類型,則JS使用的時(shí)候,要進(jìn)行轉(zhuǎn)換一下,下面有個(gè)不錯(cuò)的示例,大家可以參考下2013-09-09
offsetHeight在OnLoad中獲取為0的現(xiàn)象
需要獲取div的高度時(shí),往往需要用到offsetHeight,有時(shí)會(huì)碰到offsetHeight獲取到為0的現(xiàn)象,感興趣的朋友可以參考下面的代碼片段2013-07-07

