JS繼承 筆記
更新時間:2011年07月13日 23:41:56 作者:
JavaScript中沒有類的概念,與類相關的繼承的概念更是無從談起,但是我們可以通過特殊的語法來模擬面向對象語言中的繼承。
JS繼承
JavaScript中沒有類的概念,與類相關的繼承的概念更是無從談起,但是我們可以通過特殊的語法來
模擬面向對象語言中的繼承。
在JS中模擬繼承有多種方式,其中寄生組合模式是一種比較容易簡單的模擬繼承模式,下面我們就來
介紹一下用寄生組合模式模擬繼承。
JS的繼承包括屬性的繼承和方法的繼承,他們分別通過不同的方法來實現(xiàn)。
1屬性的繼承
屬性的繼承通過改變函數(shù)的執(zhí)行環(huán)境來實現(xiàn)的。而改變函數(shù)的執(zhí)行環(huán)境可以使用call()和apply()兩種
方法來實現(xiàn)。
我們首先創(chuàng)建一個Animal“類”(因為JS中沒有類的概念,這里只是一個模擬,它實際上只是一個
Function函數(shù)對象)。
function Animal(name){
this.name=name;
}
再創(chuàng)建一個Lion“類”,“繼承”于Animal
function Lion(){
Animal.apply(this, ["獅子"]);
}
這里使用了Animal的apply方法,把Animal的執(zhí)行環(huán)境改成Lion被調用時的執(zhí)行環(huán)境。
這里要解釋一下,我們要想使用Lion這個“類”,通常需要new一個Lion。如:
var l = new Lion();
而new關鍵字是十分偉大的,在上段代碼中,new關鍵字完成了以下幾項工作:
1)開辟堆空間,以準備存儲Lion對象
2)修改Lion對象本身的執(zhí)行環(huán)境,使得Lion函數(shù)的this指向了Lion函數(shù)對象本身。
3)調用Lion“類”的“構造函數(shù)”,創(chuàng)建Lion對象
4)將Lion函數(shù)對象的堆地址賦值給變量l,這個時候l就指向了這個Lion函數(shù)對象
所以經(jīng)過new關鍵字以后Animal.apply(this, ["獅子"])中的this已經(jīng)指向了Lion函數(shù)對象本身了,所
以這段代碼就將Animal函數(shù)的執(zhí)行環(huán)境改變成了Lion函數(shù)中,相當于以下代碼:
function Lion(){
function Animal(name){
this.name=name;
}
}
而此時的this已經(jīng)是Lion函數(shù)對象了所以上段代碼進一步相當于:
function Lion(){
this.name=name;
}
這樣就給Lion函數(shù)對象添加了name屬性,也模擬了Lion函數(shù)繼承于Animal函數(shù)的效果。
2方法的繼承
在JS中每一個“類”(即函數(shù),注意不是函數(shù)對象)都有一個prototype屬性,prototype表示該函數(shù)
的原型,也表示一個類的成員的集合(通常是方法的集合)。我們可以通過函數(shù)的prototype屬性來實現(xiàn)方
法的繼承。
我們同樣首先創(chuàng)建一個Animal“類”:
function Animal(name){
this.name=name;
}
給Animal的原型中加入一個eat方法:
Animal.prototype.eat=function(){
alter("我能吃!~");
}
創(chuàng)建一個Lion“類”,同時完成對Animal“類”的屬性的繼承
function Lion(){
Animal.apply(this, ["獅子"]);
}
注意下面的代碼,我們馬上要完成方法的繼承了
Lion.prototype=new Animal();
這樣就把一個Animal函數(shù)對象儲存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其實也
包含了屬性)。這樣就模擬了Lion函數(shù)對Animal的繼承。
JavaScript中沒有類的概念,與類相關的繼承的概念更是無從談起,但是我們可以通過特殊的語法來
模擬面向對象語言中的繼承。
在JS中模擬繼承有多種方式,其中寄生組合模式是一種比較容易簡單的模擬繼承模式,下面我們就來
介紹一下用寄生組合模式模擬繼承。
JS的繼承包括屬性的繼承和方法的繼承,他們分別通過不同的方法來實現(xiàn)。
1屬性的繼承
屬性的繼承通過改變函數(shù)的執(zhí)行環(huán)境來實現(xiàn)的。而改變函數(shù)的執(zhí)行環(huán)境可以使用call()和apply()兩種
方法來實現(xiàn)。
我們首先創(chuàng)建一個Animal“類”(因為JS中沒有類的概念,這里只是一個模擬,它實際上只是一個
Function函數(shù)對象)。
復制代碼 代碼如下:
function Animal(name){
this.name=name;
}
再創(chuàng)建一個Lion“類”,“繼承”于Animal
復制代碼 代碼如下:
function Lion(){
Animal.apply(this, ["獅子"]);
}
這里使用了Animal的apply方法,把Animal的執(zhí)行環(huán)境改成Lion被調用時的執(zhí)行環(huán)境。
這里要解釋一下,我們要想使用Lion這個“類”,通常需要new一個Lion。如:
var l = new Lion();
而new關鍵字是十分偉大的,在上段代碼中,new關鍵字完成了以下幾項工作:
1)開辟堆空間,以準備存儲Lion對象
2)修改Lion對象本身的執(zhí)行環(huán)境,使得Lion函數(shù)的this指向了Lion函數(shù)對象本身。
3)調用Lion“類”的“構造函數(shù)”,創(chuàng)建Lion對象
4)將Lion函數(shù)對象的堆地址賦值給變量l,這個時候l就指向了這個Lion函數(shù)對象
所以經(jīng)過new關鍵字以后Animal.apply(this, ["獅子"])中的this已經(jīng)指向了Lion函數(shù)對象本身了,所
以這段代碼就將Animal函數(shù)的執(zhí)行環(huán)境改變成了Lion函數(shù)中,相當于以下代碼:
復制代碼 代碼如下:
function Lion(){
function Animal(name){
this.name=name;
}
}
而此時的this已經(jīng)是Lion函數(shù)對象了所以上段代碼進一步相當于:
復制代碼 代碼如下:
function Lion(){
this.name=name;
}
這樣就給Lion函數(shù)對象添加了name屬性,也模擬了Lion函數(shù)繼承于Animal函數(shù)的效果。
2方法的繼承
在JS中每一個“類”(即函數(shù),注意不是函數(shù)對象)都有一個prototype屬性,prototype表示該函數(shù)
的原型,也表示一個類的成員的集合(通常是方法的集合)。我們可以通過函數(shù)的prototype屬性來實現(xiàn)方
法的繼承。
我們同樣首先創(chuàng)建一個Animal“類”:
復制代碼 代碼如下:
function Animal(name){
this.name=name;
}
給Animal的原型中加入一個eat方法:
復制代碼 代碼如下:
Animal.prototype.eat=function(){
alter("我能吃!~");
}
創(chuàng)建一個Lion“類”,同時完成對Animal“類”的屬性的繼承
復制代碼 代碼如下:
function Lion(){
Animal.apply(this, ["獅子"]);
}
注意下面的代碼,我們馬上要完成方法的繼承了
Lion.prototype=new Animal();
這樣就把一個Animal函數(shù)對象儲存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其實也
包含了屬性)。這樣就模擬了Lion函數(shù)對Animal的繼承。
相關文章
JavaScript 使用簡略語法創(chuàng)建對象的代碼
JavaScript 使用簡略語法創(chuàng)建對象的代碼 ,需要的朋友可以參考下。2010-01-01JavaScript RegExp方法獲取地址欄參數(shù)(面向對象)
個人認為循環(huán)用得多不是什么好事。這里推薦一種利用OO思想加上RegExp的方法,使它更靈活、高效。2009-03-03