範文齋

位置:首頁 > 行業範文 > 設計

JS繼承設計模式

設計2.58W

JavaScript中沒有類的概念,與類相關的繼承的概念更是無從談起,但是我們可以通過特殊的語法來模擬面向對象語言中的繼承。在JS中模擬繼承有多種方式,其中寄生組合模式是一種比較容易簡單的模擬繼承模式,下面我們就來介紹一下用寄生組合模式模擬繼承。JS的繼承包括屬性的繼承和方法的繼承,他們分別通過不同的方法來實現。

JS繼承設計模式

1屬性的繼承

屬性的繼承通過改變函數的執行環境來實現的。而改變函數的執行環境可以使用call()和apply()兩種方法來實現。

我們首先創建一個Animal“類”(因爲JS中沒有類的概念,這裏只是一個模擬,它實際上只是一個Function函數對象)。

複製代碼 代碼如下:function Animal(name){=name;}

再創建一個Lion“類”,“繼承”於Animal複製代碼 代碼如下:function Lion(){y(this, ["獅子"]);}

這裏使用了Animal的apply方法,把Animal的執行環境改成Lion被調用時的執行環境。

這裏要解釋一下,我們要想使用Lion這個“類”,通常需要new一個Lion。如:var l = new Lion();

而new關鍵字是十分偉大的,在上段代碼中,new關鍵字完成了以下幾項工作:

1)開闢堆空間,以準備存儲Lion對象

2)修改Lion對象本身的執行環境,使得Lion函數的this指向了Lion函數對象本身。

3)調用Lion“類”的“構造函數”,創建Lion對象

4)將Lion函數對象的堆地址賦值給變量l,這個時候l就指向了這個Lion函數對象

所以經過new關鍵字以後y(this, ["獅子"])中的已經指向了Lion函數對象本身了,所

以這段代碼就將Animal函數的執行環境改變成了Lion函數中,相當於以下代碼:

複製代碼 代碼如下:

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

而此時的this已經是Lion函數對象了所以上段代碼進一步相當於:

複製代碼 代碼如下:function Lion(){=name;}

這樣就給Lion函數對象添加了name屬性,也模擬了Lion函數繼承於Animal函數的效果。

2方法的繼承

在JS中每一個“類”(即函數,注意不是函數對象)都有一個prototype屬性,prototype表示該函數的原型,也表示一個類的成員的集合(通常是方法的集合)。我們可以通過函數的prototype屬性來實現方法的繼承。我們同樣首先創建一個Animal“類”:複製代碼 代碼如下:

function Animal(name){=name;}

給Animal的原型中加入一個eat方法:複製代碼 代碼如下:

=function(){alter("我能吃!~");}

創建一個Lion“類”,同時完成對Animal“類”的屬性的繼承

複製代碼 代碼如下:function Lion(){y(this, ["獅子"]);}

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

這樣就把一個Animal函數對象儲存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其實也包含了屬性)。這樣就模擬了Lion函數對Animal的繼承。