javascript每日必學(xué)之繼承
朋友們大家好,我們今天這一講就接著前面的封裝繼續(xù)講解,今天就是在前面內(nèi)容上面的升級,OOP思想中的繼承,我們就先來解釋一下繼承到底是什么意思,我們在什么地方會用到繼續(xù)。
繼承就是,后代繼續(xù)祖先的一系列屬性,行為。后代仍然算是與祖先同族,下面我們再用一些具體描述,來理解一下什么是繼承
中國人,跟美國人都是 繼承自 人類祖先,所以我們具有相同的屬性行為,但是還有一定的差異,后面我們們將繼續(xù)講到的多態(tà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("吃飯"); } //說話 Human.prototype.Say = function(){ console.log("大家好我是地球人"); } //行走 Human.prototype.Walk = function(){ console.log("我是人類,天生就可以兩條腿直立行走"); } //繁衍 Human.prototype.Multiply = function(){ console.log("跟老婆一起做羞羞的事,就是為了人類的繁榮"); } //中國人 function Chinese(){ //調(diào)用繼承函數(shù) Extend(this,Human); } //美國人 function American(){ //調(diào)用繼承函數(shù) Extend(this,Human); }
我們就這樣寫,就模擬了高級語言中的繼承,下面我們看看運(yùn)行后,有沒有問題
運(yùn)行后,我們發(fā)現(xiàn)了問題,這樣寫,我們已經(jīng)可以實現(xiàn)原型鏈接的繼承了,而且也大大的節(jié)省了很多代碼,我們在寫Chinese和American函數(shù)的時候,是不是只寫了少量代碼,我們就把父類行為給繼承過來了,而實例也能調(diào)用父類所擁有的行為函數(shù),但是這樣寫,我們還沒有完全實現(xiàn)繼承,因為我們在調(diào)用hair屬性的時候就根本沒有起到作用,那么,我們再修改一下代碼,就可以實現(xiàn)完全繼承了
//遺傳繼承函數(shù) function Extend(Children,Parent){ //現(xiàn)在我們是從父類實例來繼承,所以屬性和方法都會被繼承的 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("吃飯"); } //說話 Human.prototype.Say = function(){ console.log("大家好我是地球人"); } //行走 Human.prototype.Walk = function(){ console.log("我是人類,天生就可以兩條腿直立行走"); } //繁衍 Human.prototype.Multiply = function(){ console.log("跟老婆一起做羞羞的事,就是為了人類的繁榮"); } //中國人 function Chinese(){ //調(diào)用繼承函數(shù) Extend(this,new Human()); } //美國人 function American(){ //調(diào)用繼承函數(shù) Extend(this,new Human()); }
我們還是要看一下運(yùn)行的效果是不是跟我們想象中的一樣?
通過上在的代碼我們不難看出,現(xiàn)在的繼承函數(shù)實際上是從Human類的具體實例中復(fù)制的屬性及行為,這樣我們就更進(jìn)一步模擬出了類的繼承,在上面有一句,我還需要給大家解釋一下
if(typeof Children[p] == "undefined"){ ...... }
這里出現(xiàn)的typeof關(guān)鍵字其實是一個運(yùn)算符,是查看某個變量是什么類型,如果是未定義的情況,運(yùn)算出的結(jié)果就是 "undefined" ,所以我就是這樣比較,如果子類沒有定義過這樣的屬性或者行為函數(shù),那么就從父類繼承(注:這里的解釋是為了后面的多態(tài)作鋪墊)。
接下來我們再來看一下可不可以多重繼承,前面我們已經(jīng)提到Chinese與American兩個類都是繼承自Human類,下面我們再寫一個類來繼承自Chinese
//四川人 function SiChuanMan(){ Extend(this,new Chinese()); }
現(xiàn)在我們已經(jīng)寫出很健壯的繼承代碼,理解也非常的簡單,只要在聲明新類的時候,在構(gòu)造函數(shù)里面調(diào)用一下繼承函數(shù),我們就可以實現(xiàn)屬性及行為函數(shù)的完全繼承,這樣,我們就可以省下大量的代碼,OOP思想的優(yōu)勢再一次地被體現(xiàn)了出來,如果我們要模擬中國每個省份的人,如果我每個省份都照著Human類的方式去寫,從太陽出來寫到第二天的太陽落坡都寫不完。繼承的寫法多種多樣,每個人都有自己的寫法,這里,我就是以一種最簡單的方式給大家講解的,到后面大家能熟練使用時候,也可以以自己喜歡的方式去寫,javascript本身就是一門很靈活的語言。
總結(jié)一下,我們今天在封裝基礎(chǔ)上進(jìn)一步做了升級,這樣我們就實現(xiàn)了對象的繼承,書寫的代碼量被進(jìn)一步被壓縮,想想能提高工作的效率,更能提高代碼的優(yōu)雅度,是不是有一點(diǎn)的小激動呢,只要跟著我腳步走,我們就可以用最簡單的方式去理解最復(fù)雜的東西,其實程序并不復(fù)雜,復(fù)雜的原因是大家沒有得到正確的帶領(lǐng),本來很簡單的一個東西,被不同的人理解及解釋成不同的東西,這樣學(xué)習(xí)起來就復(fù)雜了,更多的是沒有連續(xù)的教程一步一步地帶領(lǐng)大家向正確的方向邁進(jìn),所以很長時間都很難得到提升。
相關(guān)文章
echart簡介_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了echart簡介,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié)
這篇文章介紹了javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié),有需要的朋友可以參考一下2013-08-08ES6模塊化的import和export用法方法總結(jié)
這篇文章主要介紹了ES6模塊化的import和export用法方法總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08js控制臺報錯Uncaught TypeError: Cannot read p
本文主要介紹了js控制臺報錯Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07