JavaScript閉包實(shí)例講解
這帶來(lái)的好處是內(nèi)部函數(shù)可以訪問(wèn)定義它們的外部函數(shù)的參數(shù)和變量。
首先，我們來(lái)構(gòu)造一個(gè)簡(jiǎn)單的對(duì)象。
var testObj = {
value: 10,
add: function(inc){
this.value += (typeof inc === "number") ? inc : 1;
}
};
testObj.add();
testObj.value; // 11
testObj.add(2);
testObj.value; // 13
這樣寫就有一個(gè)問(wèn)題，value值不能保證不會(huì)被非法修改，可以按如下的方法進(jìn)行修改。
var testObj = (function(){
var value = 10;
return {
add: function(inc){
value += (typeof inc === "number") ? inc : 1;
},
getValue: function(){
return value;
}
};
})();
testObj.add();
testObj.getValue(); // 11
testObj.add(2);
testObj.getValue(); // 13
我們可以通用調(diào)用一個(gè)函數(shù)的形式去初始化testObj，該函數(shù)會(huì)返回一個(gè)對(duì)象字面量，函數(shù)里定義了一個(gè)value變量，該變量對(duì)add和getValue方法總是可用的，但函數(shù)的作用域使得它對(duì)其他的程序來(lái)說(shuō)是不可見(jiàn)的。同時(shí)，我們還可以得出一個(gè)結(jié)論，內(nèi)部函數(shù)擁有比它的外部函數(shù)更長(zhǎng)的生命周期。
我們?cè)倮^續(xù)看一個(gè)構(gòu)造函數(shù)調(diào)用的例子。
var MyObj = function(str){
this.status = str;
};
MyObj.prototype.getStatus = function(){
return this.status;
};
var obj = new MyObj("javascript");
obj.getStatus(); // "javascript"
這樣寫并沒(méi)有錯(cuò)，但是會(huì)有一點(diǎn)“多此一舉”，為什么要用一個(gè)getStatus方法去訪問(wèn)一個(gè)本可以直接訪問(wèn)到的屬性呢？如果status是私有屬性，那當(dāng)然才有意義。
var obj = function(status){
return {
getStatus: function(){
return status;
}
};
};
var myObj = obj("javascript");
myObj.getStatus(); // "javascript"
這里當(dāng)我們調(diào)用obj的時(shí)候，它返回包含getStatus方法的一個(gè)新對(duì)象，該對(duì)象的一個(gè)引用保存在myObj中，即使obj已經(jīng)返回了，但getStatus方法仍然享有訪問(wèn)obj對(duì)象的status屬性的特權(quán)。getStatus方法并不是訪問(wèn)該參數(shù)的一個(gè)副本，它訪問(wèn)的就是該參數(shù)本身。這是可能的，因?yàn)樵摵瘮?shù)可以訪問(wèn)它被創(chuàng)建時(shí)所處的上下文環(huán)境，這被稱為閉包。
相關(guān)文章
JavaScript原型式繼承實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript原型式繼承實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧(干貨總結(jié))
這篇文章主要介紹了中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧(干貨總結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記)
這篇文章主要介紹了js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Auto.js自動(dòng)收取自己和好友螞蟻森林能量腳本
這篇文章主要為大家詳細(xì)介紹了Auto.js自動(dòng)收取自己和好友螞蟻森林能量腳本，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
本文主要介紹了SyntaxHighlighter的配置及代碼的使用，并附上在博客園中使用SyntaxHighlighter 3.0.83的案例，非常實(shí)用，這里推薦給大家。2015-01-01
JS實(shí)現(xiàn)"上次操作未完成禁止新操作"邏輯特事特辦方案
這篇文章主要介紹了詳解JS如何實(shí)現(xiàn)"上次操作未完成禁止新操作"的邏輯及思路,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊(duì)列結(jié)構(gòu)詳解
隊(duì)列指的是一種受限的線性表，先進(jìn)先出，今天通過(guò)本文帶領(lǐng)大家認(rèn)識(shí)隊(duì)列及隊(duì)列的應(yīng)用，對(duì)JS數(shù)據(jù)結(jié)構(gòu)與算法-隊(duì)列結(jié)構(gòu)相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了javascript如何實(shí)現(xiàn)暫停功能,，Javascript本身沒(méi)有暫停功能,同時(shí)vbscript也不能使用doEvents，故編寫此函數(shù)實(shí)現(xiàn)此功能， 需要的朋友可以參考下2015-11-11
基于JavaScript實(shí)現(xiàn)帶數(shù)據(jù)驗(yàn)證和復(fù)選框的表單提交
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)帶數(shù)據(jù)驗(yàn)證和復(fù)選框的表單提交功能,需要的朋友可以參考下2017-08-08
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)心情記事本
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的心情記事本，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01