小編給大家分享一下JS繼承與閉包及JS實(shí)現(xiàn)繼承的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站備案、服務(wù)器租用、空間域名、軟件開發(fā)、重慶小程序開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站聯(lián)系熱線：13518219792

JS是什么

JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加美觀。

一、繼承的基本概念

使用一個(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代碼呢？我覺得很大一部分同學(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的情況！

以上是“JS繼承與閉包及JS實(shí)現(xiàn)繼承的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：JS繼承與閉包及JS實(shí)現(xiàn)繼承的方法有哪些
網(wǎng)址分享：http://www.rwnh.cn/article38/pgsspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、微信公眾號(hào)、網(wǎng)站維護(hù)、網(wǎng)站營(yíng)銷、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)