品才網(wǎng)>設(shè)計(jì)>JS繼承設(shè)計(jì)模式

JS繼承設(shè)計(jì)模式

時(shí)間：2022-06-28 04:46:24 設(shè)計(jì) 我要投稿

相關(guān)推薦

JS繼承設(shè)計(jì)模式

　　JavaScript中沒有類的概念，與類相關(guān)的繼承的概念更是無從談起，但是我們可以通過特殊的語法來模擬面向?qū)ο笳Z言中的繼承。在JS中模擬繼承有多種方式，其中寄生組合模式是一種比較容易簡(jiǎn)單的模擬繼承模式，下面我們就來介紹一下用寄生組合模式模擬繼承。JS的繼承包括屬性的繼承和方法的繼承，他們分別通過不同的方法來實(shí)現(xiàn)。

　　1屬性的繼承

　　屬性的繼承通過改變函數(shù)的執(zhí)行環(huán)境來實(shí)現(xiàn)的。而改變函數(shù)的執(zhí)行環(huán)境可以使用call()和apply()兩種方法來實(shí)現(xiàn)。

　　我們首先創(chuàng)建一個(gè)Animal“類”（因?yàn)镴S中沒有類的概念，這里只是一個(gè)模擬，它實(shí)際上只是一個(gè)Function函數(shù)對(duì)象）。

　　復(fù)制代碼代碼如下:function Animal(name){this.name=name;}

　　再創(chuàng)建一個(gè)Lion“類”，“繼承”于Animal復(fù)制代碼代碼如下:function Lion(){Animal.apply(this, ["獅子"]);}

　　這里使用了Animal的apply方法，把Animal的執(zhí)行環(huán)境改成Lion被調(diào)用時(shí)的執(zhí)行環(huán)境。

　　這里要解釋一下，我們要想使用Lion這個(gè)“類”，通常需要new一個(gè)Lion。如：var l = new Lion();

　　而new關(guān)鍵字是十分偉大的，在上段代碼中，new關(guān)鍵字完成了以下幾項(xiàng)工作:

　　1)開辟堆空間，以準(zhǔn)備存儲(chǔ)Lion對(duì)象

　　2)修改Lion對(duì)象本身的執(zhí)行環(huán)境，使得Lion函數(shù)的this指向了Lion函數(shù)對(duì)象本身。

　　3)調(diào)用Lion“類”的“構(gòu)造函數(shù)”，創(chuàng)建Lion對(duì)象

　　4)將Lion函數(shù)對(duì)象的堆地址賦值給變量l，這個(gè)時(shí)候l就指向了這個(gè)Lion函數(shù)對(duì)象

　　所以經(jīng)過new關(guān)鍵字以后Animal.apply(this, ["獅子"])中的this已經(jīng)指向了Lion函數(shù)對(duì)象本身了，所

　　以這段代碼就將Animal函數(shù)的執(zhí)行環(huán)境改變成了Lion函數(shù)中，相當(dāng)于以下代碼：

　　復(fù)制代碼代碼如下:

　　function Lion(){function Animal(name){this.name=name;}}

　　而此時(shí)的this已經(jīng)是Lion函數(shù)對(duì)象了所以上段代碼進(jìn)一步相當(dāng)于：

　　復(fù)制代碼代碼如下:function Lion(){this.name=name;}

　　這樣就給Lion函數(shù)對(duì)象添加了name屬性，也模擬了Lion函數(shù)繼承于Animal函數(shù)的效果。

　　2方法的繼承

　　在JS中每一個(gè)“類”（即函數(shù)，注意不是函數(shù)對(duì)象）都有一個(gè)prototype屬性，prototype表示該函數(shù)的原型，也表示一個(gè)類的成員的集合（通常是方法的集合）。我們可以通過函數(shù)的prototype屬性來實(shí)現(xiàn)方法的繼承。我們同樣首先創(chuàng)建一個(gè)Animal“類”：復(fù)制代碼代碼如下:

　　function Animal(name){this.name=name;}

　　給Animal的原型中加入一個(gè)eat方法：復(fù)制代碼代碼如下:

　　Animal.prototype.eat=function(){alter("我能吃！~")；}

　　創(chuàng)建一個(gè)Lion“類”，同時(shí)完成對(duì)Animal“類”的屬性的繼承

　　復(fù)制代碼代碼如下:function Lion(){Animal.apply(this, ["獅子"]);}

　　注意下面的代碼，我們馬上要完成方法的繼承了 Lion.prototype=new Animal();

　　這樣就把一個(gè)Animal函數(shù)對(duì)象儲(chǔ)存在了Lion的原型中了，Lion也就包含了Animal中的方法了（其實(shí)也包含了屬性）。這樣就模擬了Lion函數(shù)對(duì)Animal的繼承。

【JS繼承設(shè)計(jì)模式】相關(guān)文章：

端午節(jié)js07-01

js函數(shù)遞歸問題?07-09

Python設(shè)計(jì)模式:工廠方法模式講解06-29

設(shè)計(jì)模式課程設(shè)計(jì)報(bào)告07-03