前  言

在之前的兩篇博客中，我們?cè)敿?xì)探討了JavaScript OOP中的各種知識(shí)點(diǎn)（JS OOP基礎(chǔ)與JS 中This指向詳解 、 成員屬性、靜態(tài)屬性、原型屬性與JS原型鏈）。今天我們來(lái)繼續(xù)探討剩余的內(nèi)容吧。

我們都知道，面向?qū)ο蟮娜筇卣鳌庋b、繼承、多態(tài)。 封裝無(wú)非就是屬性和方法的私有化，所以我們JS中提供了私有屬性和私有方法。 而JS中并沒(méi)有多態(tài)，因此我們說(shuō)JS是一門基于對(duì)象的語(yǔ)言，而非面向?qū)ο蟮恼Z(yǔ)言。 那么，面向?qū)ο笕筇卣髦校贘S中最重要的就是繼承了。

一、繼承的基本概念

使用一個(gè)子類繼承另一個(gè)父類，子類可以自動(dòng)擁有父類的屬性和方法。

>>>繼承的兩方，發(fā)生在兩個(gè)類之間。

所以，所謂的繼承，無(wú)非就是讓子類，擁有父類的所有屬性和方法。那么，在JS中，我們要模擬實(shí)現(xiàn)這一步，有三種常用的方法可以實(shí)現(xiàn)。

分別是：擴(kuò)展Object的prototype實(shí)現(xiàn)繼承、使用call和apply實(shí)現(xiàn)繼承、使用原型實(shí)現(xiàn)繼承。

二、擴(kuò)展Object的prototype實(shí)現(xiàn)繼承

擴(kuò)展Object實(shí)現(xiàn)繼承的本質(zhì)，是我們自己寫了一個(gè)方法，將父類的所有屬性和方法通過(guò)遍歷循環(huán)，逐個(gè)復(fù)制給子類。

詳細(xì)步驟如下：

1：定義父類

functionParent(){}

2：定義子類

funtion Son(){}

3：通過(guò)原型給Object對(duì)象添加一個(gè)擴(kuò)展方法。

Object.prototype.customExtend =function(parObj){
for(variinparObj){//通過(guò)for-in循環(huán)，把父類的所有屬性方法，賦值給自己
this[i] =parObj[i];
}
}

4：子類對(duì)象調(diào)用擴(kuò)展方法

Son.customExtend(Parent);

三、使用call和apply實(shí)現(xiàn)繼承

首先，要使用這種方式顯示繼承，我們?cè)賮?lái)回顧一下call和apply兩個(gè)函數(shù)的作用：

call和apply：通過(guò)函數(shù)名調(diào)用方法，強(qiáng)行將函數(shù)中的this指向某個(gè)對(duì)象；

call寫法：func.call(func的this指向的obj,參數(shù)1,參數(shù)2...);

apply寫法：func.apply(func的this指向的obj,[參數(shù)1,參數(shù)2...]);

那么，我們使用這兩個(gè)函數(shù)實(shí)現(xiàn)繼承的思路就是：在子類中，使用父類函數(shù)調(diào)用call或apply，并將父類的this，強(qiáng)行綁定為子類的this。 那這樣，父類綁定在this上的屬性和方法，不就順利成章的綁定到子類的this上了嗎？

詳細(xì)步驟如下：

1：定義父類

funtion Parent(){}

2：定義子類

functionSon(){}

3：在子類中通過(guò)call方法或者apply方法去調(diào)用父類。

functionSon(){
Parent.call(this,....);//將父類函數(shù)中的this，強(qiáng)行綁定為子類的this}

四、使用原型實(shí)現(xiàn)繼承

使用原型實(shí)現(xiàn)繼承，是比較簡(jiǎn)單而且比較好理解的一種，就是將子類的prototype指向父類的對(duì)象就可以啦。

詳細(xì)步驟如下：

1：定義父類

functionParent(){}

2：定義子類

functionSon(){}

3：把在子類對(duì)象的原型對(duì)象聲明為父類的實(shí)例。

Son.prototype =newParent();

五、閉包

要理解閉包，首先，我們要了解一下JS中的作用域：

1、JS中的作用域

全局變量：函數(shù)外聲明的變量

局部變量：函數(shù)內(nèi)聲明的變量

在JS中，函數(shù)為唯一的局部作用域，而if、for等其他{}沒(méi)有自己的作用域

所以，函數(shù)外不能訪問(wèn)局部變量。其實(shí)，變量在函數(shù)執(zhí)行完畢以后，占用的內(nèi)存就會(huì)被釋放。

2、閉包

在概述中，我剛剛提到，面向?qū)ο蟮娜筇卣髦械摹胺庋b”，我們可以用函數(shù)的私有屬性來(lái)實(shí)現(xiàn)。這個(gè)私有屬性，其實(shí)也就是局部變量。

但是我們都知道，封裝是限制外部的訪問(wèn)，并不是直接拒絕外部的訪問(wèn)，那么我們?cè)诤瘮?shù)中私有的屬性，怎么才能在外部訪問(wèn)呢？答案就是閉包！

JS中，提供了一種"閉包"的概念：在函數(shù)內(nèi)部，定義一個(gè)子函數(shù)，可以用子函數(shù)訪問(wèn)父函數(shù)的私有變量。執(zhí)行完操作以后，將子函數(shù)通過(guò)return返回。

代碼示例：

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10;
alert(sum);
}returnfunc3;
}varf =func2();
f();

3、閉包的作用：

① 訪問(wèn)函數(shù)的私有變量；

② 讓函數(shù)的變量始終存在于內(nèi)存中，而不被釋放。

4、閉包的典型應(yīng)用

我們來(lái)做這樣一個(gè)功能：頁(yè)面中有6個(gè)li，要求實(shí)現(xiàn)點(diǎn)擊每個(gè)li，彈出這個(gè)li對(duì)應(yīng)的序號(hào)。

HTML代碼很簡(jiǎn)單：

那JS代碼呢？我覺(jué)得很大一部分同學(xué)會(huì)這樣寫：

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[i].onclick=function(){
alert("您/點(diǎn)擊了第"+i+"個(gè)li！");
}

那么，這樣對(duì)嗎？不對(duì)！??！我們來(lái)分析一下：頁(yè)面加載的時(shí)候，JS代碼會(huì)全部執(zhí)行，也就是上面的for循環(huán)在頁(yè)面加載完就已經(jīng)執(zhí)行完了！那，這個(gè)i就已經(jīng)變成了lis.length。也就是說(shuō)，你在點(diǎn)擊li的時(shí)候，無(wú)論點(diǎn)擊第幾個(gè)，彈出的都是lis.length。

那么，我們應(yīng)該怎么修改呢？看代碼！

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[j].onclick=function(){
alert("您/點(diǎn)擊了第"+j+"個(gè)li！");
}
}();
}

區(qū)別在哪？明眼人一眼就看穿我們?cè)趂or循環(huán)外面嵌套了一層自執(zhí)行函數(shù)！這種函數(shù)套函數(shù)的形式，就形成了閉包！

那作用呢？我們剛才強(qiáng)調(diào)，閉包的自執(zhí)行函數(shù)會(huì)有自己的作用域。在函數(shù)里面的代碼沒(méi)有執(zhí)行的時(shí)候，自執(zhí)行函數(shù)中的j是不會(huì)被釋放掉的！

也就是說(shuō)，循環(huán)轉(zhuǎn)了6次！生成了6個(gè)獨(dú)立的函數(shù)空間，每個(gè)空間中有自己獨(dú)立的j變量，所以最終不會(huì)出現(xiàn)所有l(wèi)i點(diǎn)擊都是lis.length的情況！

總結(jié)

以上所述是小編給大家介紹的JS繼承與閉包及JS實(shí)現(xiàn)繼承的三種方式，希望對(duì)大家有所幫助！

最新評(píng)論