JS繼承與閉包及JS實現繼承的三種方式

前  言

在之前的兩篇博客中，我們詳細探討了JavaScript OOP中的各種知識點（JS OOP基礎與JS 中This指向詳解 、 成員屬性、靜態屬性、原型屬性與JS原型鏈）。今天我們來繼續探討剩余的內容吧。

我們都知道，面向對象的三大特征——封裝、繼承、多態。 封裝無非就是屬性和方法的私有化，所以我們JS中提供了私有屬性和私有方法。 而JS中并沒有多態，因此我們說JS是一門基于對象的語言，而非面向對象的語言。 那么，面向對象三大特征中，在JS中最重要的就是繼承了。

一、繼承的基本概念

使用一個子類繼承另一個父類，子類可以自動擁有父類的屬性和方法。

>>>繼承的兩方，發生在兩個類之間。

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

分別是：擴展Object的prototype實現繼承、使用call和apply實現繼承、使用原型實現繼承。

二、擴展Object的prototype實現繼承

擴展Object實現繼承的本質，是我們自己寫了一個方法，將父類的所有屬性和方法通過遍歷循環，逐個復制給子類。

詳細步驟如下：

1：定義父類

functionParent(){}

2：定義子類

funtion Son(){}

3：通過原型給Object對象添加一個擴展方法。

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

4：子類對象調用擴展方法

Son.customExtend(Parent);

三、使用call和apply實現繼承

首先，要使用這種方式顯示繼承，我們再來回顧一下call和apply兩個函數的作用：

call和apply：通過函數名調用方法，強行將函數中的this指向某個對象；

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

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

那么，我們使用這兩個函數實現繼承的思路就是：在子類中，使用父類函數調用call或apply，并將父類的this，強行綁定為子類的this。 那這樣，父類綁定在this上的屬性和方法，不就順利成章的綁定到子類的this上了嗎？

詳細步驟如下：

1：定義父類

funtion Parent(){}

2：定義子類

functionSon(){}

3：在子類中通過call方法或者apply方法去調用父類。

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

四、使用原型實現繼承

使用原型實現繼承，是比較簡單而且比較好理解的一種，就是將子類的prototype指向父類的對象就可以啦。

詳細步驟如下：

1：定義父類

functionParent(){}

2：定義子類

functionSon(){}

3：把在子類對象的原型對象聲明為父類的實例。

Son.prototype =newParent();

五、閉包

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

1、JS中的作用域

全局變量：函數外聲明的變量

局部變量：函數內聲明的變量

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

所以，函數外不能訪問局部變量。其實，變量在函數執行完畢以后，占用的內存就會被釋放。

2、閉包

在概述中，我剛剛提到，面向對象的三大特征中的“封裝”，我們可以用函數的私有屬性來實現。這個私有屬性，其實也就是局部變量。

但是我們都知道，封裝是限制外部的訪問，并不是直接拒絕外部的訪問，那么我們在函數中私有的屬性，怎么才能在外部訪問呢？答案就是閉包！

JS中，提供了一種"閉包"的概念：在函數內部，定義一個子函數，可以用子函數訪問父函數的私有變量。執行完操作以后，將子函數通過return返回。

代碼示例：

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

3、閉包的作用：

① 訪問函數的私有變量；

② 讓函數的變量始終存在于內存中，而不被釋放。

4、閉包的典型應用

我們來做這樣一個功能：頁面中有6個li，要求實現點擊每個li，彈出這個li對應的序號。

HTML代碼很簡單：

那JS代碼呢？我覺得很大一部分同學會這樣寫：

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

那么，這樣對嗎？不對！！！我們來分析一下：頁面加載的時候，JS代碼會全部執行，也就是上面的for循環在頁面加載完就已經執行完了！那，這個i就已經變成了lis.length。也就是說，你在點擊li的時候，無論點擊第幾個，彈出的都是lis.length。

那么，我們應該怎么修改呢？看代碼！

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

區別在哪？明眼人一眼就看穿我們在for循環外面嵌套了一層自執行函數！這種函數套函數的形式，就形成了閉包！

那作用呢？我們剛才強調，閉包的自執行函數會有自己的作用域。在函數里面的代碼沒有執行的時候，自執行函數中的j是不會被釋放掉的！

也就是說，循環轉了6次！生成了6個獨立的函數空間，每個空間中有自己獨立的j變量，所以最終不會出現所有li點擊都是lis.length的情況！

總結

以上所述是小編給大家介紹的JS繼承與閉包及JS實現繼承的三種方式，希望對大家有所幫助！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com