JavaScript 變量作用域及閉包第2/2頁
更新時(shí)間：2009年08月07日 22:57:34 作者：
作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過實(shí)例來進(jìn)行演示。
實(shí)例六：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
window.onload = function(){
var i = 1;
function test(){
alert(i);
}
// 彈出內(nèi)容為 1 的提示框
test();
}
</script>
分析：
內(nèi)部函數(shù)可以訪問外部函數(shù)的變量，這個(gè)就引出了一個(gè)新的概念，那就是閉包。
閉包
什么是閉包呢，簡(jiǎn)單的說就是一個(gè)函數(shù) A ，它的內(nèi)部函數(shù) B 可以訪問 A 內(nèi)定義的變量，即使函數(shù) A 已經(jīng)終止。下面通過實(shí)例進(jìn)行了解。
實(shí)例七：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
window.onload = function(){
var i = 1;
window.onunload = function(){
alert(i);
}
}
</script>
分析：
當(dāng)整個(gè)頁面加載完成時(shí)，會(huì)觸發(fā) onload 事件，這個(gè)onload 事件方法里給窗口的onunload 事件注冊(cè)了一個(gè)方法，這個(gè)方法里用到了onload 事件方法里聲明的變量，然后onload 事件方法運(yùn)行結(jié)束，這時(shí)候我們點(diǎn)擊關(guān)閉窗口，會(huì)彈出內(nèi)容為1的提示框，說明onunload 的事件方法成功的調(diào)用了onload 事件方法里聲明的變量。
為了進(jìn)一步了解閉包的特性，看下面的例子
實(shí)例八：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function initX(oarg){
// 定義一個(gè)變量
var x = oarg;
// 定義一個(gè)顯示變量的方法
var funGet = function(){
alert(x);
}
// 定義一個(gè)對(duì)變量進(jìn)行修改的方法
var funSet = function(iarg){
x = iarg;
}
// 返回這兩個(gè)方法
return [funGet,funSet];
}
// 運(yùn)行一個(gè)方法實(shí)例，返回值為包含 get 和 set 方法的數(shù)組
var funArr = initX(1);
// 得到 get 方法
var funGet = funArr[0];
// 得到 set 方法
var funSet = funArr[1];
// 運(yùn)行 get 方法，顯示initX方法實(shí)例內(nèi)的 x 變量，結(jié)果為 1
funGet();
// 運(yùn)行 set 方法，對(duì)initX方法實(shí)例內(nèi)的 x 變量進(jìn)行賦值
funSet(2);
// 運(yùn)行 get 方法，顯示initX方法實(shí)例內(nèi)的 x 變量，結(jié)果為 2
funGet();
</script>
分析：
當(dāng)內(nèi)部函數(shù)對(duì)外部函數(shù)定義的變量進(jìn)行調(diào)用時(shí)，實(shí)際上引用的是這個(gè)變量的內(nèi)存塊，所以當(dāng)我們調(diào)用內(nèi)部函數(shù)時(shí)，引用的變量值是當(dāng)前這個(gè)變量的實(shí)際內(nèi)容。
閉包功能雖然強(qiáng)大，但是如果不注意，它也會(huì)給我們帶來困擾?？聪旅娴睦印?
實(shí)例九：
復(fù)制代碼 代碼如下:
<button id="main">run</button>
<script type="text/javascript">
(function(){
var obj = document.getElementById("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<funArr.length; i++){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
}
})();
</script>
寫代碼的原意是給 id 是 main 的按鈕注冊(cè)點(diǎn)擊事件和按鍵事件，事件的內(nèi)容是分別彈出事件名稱的提示框。但是結(jié)果有點(diǎn)匪夷所思，兩個(gè)事件的提示框全是 onkeypress，根據(jù)閉包的原理，我們仔細(xì)分析，就會(huì)發(fā)現(xiàn)當(dāng)兩個(gè)事件方法被調(diào)用時(shí) temp 變量 指向的是 funArr[1] 的內(nèi)容，我們可以這樣修改來解決這個(gè)問題：
復(fù)制代碼 代碼如下:
<button id="main">run</button>
<script type="text/javascript">
(function(){
var obj = document.getElementById("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<funArr.length; i++){
(function(){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
})();
}
})();
</script>
把 for 循環(huán)內(nèi)的代碼放入一個(gè)函數(shù)內(nèi)，這樣，每循環(huán)一次都會(huì)產(chǎn)生一個(gè)函數(shù)實(shí)例，讓函數(shù)實(shí)例記錄 funArr 數(shù)組中的每個(gè)值，這樣就避免了上面碰到的問題。
相關(guān)文章
JS 循環(huán)li添加點(diǎn)擊事件 （閉包的應(yīng)用）
這篇文章主要介紹了js循環(huán)li添加點(diǎn)擊事件 （閉包的應(yīng)用）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
forms 返回一個(gè)集合包含了了當(dāng)前文檔中的所有form元素，下面通過示例為大家介紹下document.forms用法,需要的朋友可以參考下2014-06-06
對(duì)于Javascript 執(zhí)行上下文的全面了解
下面小編就為大家?guī)硪黄獙?duì)于Javascript 執(zhí)行上下文的全面了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序 image組件遇到的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例
下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家介紹了關(guān)于js獲取對(duì)象屬性值的兩種方法使用,分別是通過.獲取和通過[]獲取這兩種方法,文中介紹了詳細(xì)的方法和不同點(diǎn),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解Javascript中的Object對(duì)象,需要的朋友可以參考下2016-02-02
使用JavaScript將PDF頁面中的標(biāo)注扁平化的操作指南
扁平化(flatten)操作可以將標(biāo)注作為矢量圖形包含在PDF頁面的內(nèi)容中,使其不可編輯,Dynamsoft Document Viewer是一個(gè)用于文檔掃描和查看的JavaScript SDK,可以添加標(biāo)注、導(dǎo)出PDF,在本文中,我們將探討如何使用它,需要的朋友可以參考下2025-01-01
這篇文章主要給大家介紹了關(guān)于js日期時(shí)間格式化的相關(guān)資料,文中分別介紹了利用原生js以及Moment.js庫(kù)處理日期時(shí)間格式化的方法,需要的朋友可以參考下2021-07-07