JS繼承 筆記
更新時(shí)間:2011年07月13日 23:41:56 作者:
JavaScript中沒有類的概念,與類相關(guān)的繼承的概念更是無從談起,但是我們可以通過特殊的語法來模擬面向?qū)ο笳Z言中的繼承。
JS繼承
JavaScript中沒有類的概念,與類相關(guān)的繼承的概念更是無從談起,但是我們可以通過特殊的語法來
模擬面向?qū)ο笳Z言中的繼承。
在JS中模擬繼承有多種方式,其中寄生組合模式是一種比較容易簡單的模擬繼承模式,下面我們就來
介紹一下用寄生組合模式模擬繼承。
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ù)對象)。
function Animal(name){
this.name=name;
}
再創(chuàng)建一個(gè)Lion“類”,“繼承”于Animal
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)備存儲Lion對象
2)修改Lion對象本身的執(zhí)行環(huán)境,使得Lion函數(shù)的this指向了Lion函數(shù)對象本身。
3)調(diào)用Lion“類”的“構(gòu)造函數(shù)”,創(chuàng)建Lion對象
4)將Lion函數(shù)對象的堆地址賦值給變量l,這個(gè)時(shí)候l就指向了這個(gè)Lion函數(shù)對象
所以經(jīng)過new關(guān)鍵字以后Animal.apply(this, ["獅子"])中的this已經(jīng)指向了Lion函數(shù)對象本身了,所
以這段代碼就將Animal函數(shù)的執(zhí)行環(huán)境改變成了Lion函數(shù)中,相當(dāng)于以下代碼:
function Lion(){
function Animal(name){
this.name=name;
}
}
而此時(shí)的this已經(jīng)是Lion函數(shù)對象了所以上段代碼進(jìn)一步相當(dāng)于:
function Lion(){
this.name=name;
}
這樣就給Lion函數(shù)對象添加了name屬性,也模擬了Lion函數(shù)繼承于Animal函數(shù)的效果。
2方法的繼承
在JS中每一個(gè)“類”(即函數(shù),注意不是函數(shù)對象)都有一個(gè)prototype屬性,prototype表示該函數(shù)
的原型,也表示一個(gè)類的成員的集合(通常是方法的集合)。我們可以通過函數(shù)的prototype屬性來實(shí)現(xiàn)方
法的繼承。
我們同樣首先創(chuàng)建一個(gè)Animal“類”:
function Animal(name){
this.name=name;
}
給Animal的原型中加入一個(gè)eat方法:
Animal.prototype.eat=function(){
alter("我能吃!~");
}
創(chuàng)建一個(gè)Lion“類”,同時(shí)完成對Animal“類”的屬性的繼承
function Lion(){
Animal.apply(this, ["獅子"]);
}
注意下面的代碼,我們馬上要完成方法的繼承了
Lion.prototype=new Animal();
這樣就把一個(gè)Animal函數(shù)對象儲存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其實(shí)也
包含了屬性)。這樣就模擬了Lion函數(shù)對Animal的繼承。
JavaScript中沒有類的概念,與類相關(guān)的繼承的概念更是無從談起,但是我們可以通過特殊的語法來
模擬面向?qū)ο笳Z言中的繼承。
在JS中模擬繼承有多種方式,其中寄生組合模式是一種比較容易簡單的模擬繼承模式,下面我們就來
介紹一下用寄生組合模式模擬繼承。
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ù)對象)。
復(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)備存儲Lion對象
2)修改Lion對象本身的執(zhí)行環(huán)境,使得Lion函數(shù)的this指向了Lion函數(shù)對象本身。
3)調(diào)用Lion“類”的“構(gòu)造函數(shù)”,創(chuàng)建Lion對象
4)將Lion函數(shù)對象的堆地址賦值給變量l,這個(gè)時(shí)候l就指向了這個(gè)Lion函數(shù)對象
所以經(jīng)過new關(guān)鍵字以后Animal.apply(this, ["獅子"])中的this已經(jīng)指向了Lion函數(shù)對象本身了,所
以這段代碼就將Animal函數(shù)的執(zhí)行環(huán)境改變成了Lion函數(shù)中,相當(dāng)于以下代碼:
復(fù)制代碼 代碼如下:
function Lion(){
function Animal(name){
this.name=name;
}
}
而此時(shí)的this已經(jīng)是Lion函數(shù)對象了所以上段代碼進(jìn)一步相當(dāng)于:
復(fù)制代碼 代碼如下:
function Lion(){
this.name=name;
}
這樣就給Lion函數(shù)對象添加了name屬性,也模擬了Lion函數(shù)繼承于Animal函數(shù)的效果。
2方法的繼承
在JS中每一個(gè)“類”(即函數(shù),注意不是函數(shù)對象)都有一個(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í)完成對Animal“類”的屬性的繼承
復(fù)制代碼 代碼如下:
function Lion(){
Animal.apply(this, ["獅子"]);
}
注意下面的代碼,我們馬上要完成方法的繼承了
Lion.prototype=new Animal();
這樣就把一個(gè)Animal函數(shù)對象儲存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其實(shí)也
包含了屬性)。這樣就模擬了Lion函數(shù)對Animal的繼承。
您可能感興趣的文章:
- 不錯(cuò)的一篇關(guān)于javascript-prototype繼承
- Javascript 繼承機(jī)制的實(shí)現(xiàn)
- Extjs學(xué)習(xí)筆記之八 繼承和事件基礎(chǔ)
- 前端開發(fā)必須知道的JS之原型和繼承
- JS繼承--原型鏈繼承和類式繼承
- 深入了解javascript中的prototype與繼承
- ExtJS4中使用mixins實(shí)現(xiàn)多繼承示例
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- js的2種繼承方式詳解
- 學(xué)習(xí)javascript面向?qū)ο?javascript實(shí)現(xiàn)繼承的方式
相關(guān)文章
- new fun的執(zhí)行過程分析,學(xué)習(xí)面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2010-08-08
收集的幾個(gè)不錯(cuò)的javascript類小例子
自己比較喜歡javascript類,主要是方便擴(kuò)展。2007-12-12JavaScript 使用簡略語法創(chuàng)建對象的代碼
JavaScript 使用簡略語法創(chuàng)建對象的代碼 ,需要的朋友可以參考下。2010-01-01JavaScript RegExp方法獲取地址欄參數(shù)(面向?qū)ο?
個(gè)人認(rèn)為循環(huán)用得多不是什么好事。這里推薦一種利用OO思想加上RegExp的方法,使它更靈活、高效。2009-03-03javscript對象原型的小技巧。學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2010-09-09javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
單體是在腳本加載時(shí)創(chuàng)建的,能將一系列有關(guān)聯(lián)的變量和方法組織為一個(gè)邏輯單元,邏輯單元里面的內(nèi)容通過單一的變量進(jìn)行訪問,也是筆記基礎(chǔ)與常用的面向?qū)ο蟮亩x方法。2010-04-04最新評論