JavaScript 變量作用域及閉包第1/2頁(yè)
更新時(shí)間：2009年08月07日 22:57:34 作者：
作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過(guò)實(shí)例來(lái)進(jìn)行演示。
實(shí)例一：
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>
分析：
在全局定義的變量其實(shí)就是 window 對(duì)象的屬性。
上面的例子可以看到，我們定義全局變量的同時(shí)，window 對(duì)象會(huì)產(chǎn)生一個(gè)相應(yīng)的屬性，如何讓我們的代碼避免產(chǎn)生這個(gè)屬性呢，看下面的例子。
實(shí)例二：
<script type="text/javascript">
var document = 1;
window.onload = function(){
alert(document);
}
// 彈出內(nèi)容為 1 的提示框
alert(window.document);
</script>
這種情況是我們不想看到的，我們可以這么做：
<script type="text/javascript">
function test(){
var document = 1;
window.onload = function(){
alert(document);
}
}
test();
// 彈出內(nèi)容為 [object] 的提示框
alert(window.document);
</script>
為了使代碼更加簡(jiǎn)潔，我們可以這樣：
<script type="text/javascript">
(function(){
var document = 1;
window.onload = function(){
alert(document);
}
})();
// 彈出內(nèi)容為 [object] 的提示框
alert(window.document);
</script>
分析：
這種運(yùn)行匿名方法的形式，在 JavaScript 的主流框架中經(jīng)常見(jiàn)到，這樣做可以避免產(chǎn)生不必要的 window 對(duì)象的屬性，減少?zèng)_突的可能。
實(shí)例三：
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
}
// 彈出內(nèi)容為 1 的提示框
alert(i);
})();
</script>
分析：
變量的作用域是整個(gè)函數(shù)，不是{}塊。
實(shí)例四：
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 的提示框
alert(i);
var i = 2;
// 彈出內(nèi)容為 2 的提示框
alert(i);
</script>
分析：
一個(gè)變量可以被重新定義，這個(gè)看起來(lái)有些怪，因?yàn)樵诤芏嗥渌Z(yǔ)言里這樣是行不通的。
實(shí)例五：
<script type="text/javascript">
function test(){
i = 1;
}
test();
// 彈出內(nèi)容為 1 的提示框
alert(window.i);
</script>
分析：
如果對(duì)一個(gè)沒(méi)有初始化的變量進(jìn)行賦值操作，那么這個(gè)變量會(huì)作為全局變量。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>
分析：
在全局定義的變量其實(shí)就是 window 對(duì)象的屬性。
上面的例子可以看到，我們定義全局變量的同時(shí)，window 對(duì)象會(huì)產(chǎn)生一個(gè)相應(yīng)的屬性，如何讓我們的代碼避免產(chǎn)生這個(gè)屬性呢，看下面的例子。
實(shí)例二：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var document = 1;
window.onload = function(){
alert(document);
}
// 彈出內(nèi)容為 1 的提示框
alert(window.document);
</script>
這種情況是我們不想看到的，我們可以這么做：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function test(){
var document = 1;
window.onload = function(){
alert(document);
}
}
test();
// 彈出內(nèi)容為 [object] 的提示框
alert(window.document);
</script>
為了使代碼更加簡(jiǎn)潔，我們可以這樣：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
(function(){
var document = 1;
window.onload = function(){
alert(document);
}
})();
// 彈出內(nèi)容為 [object] 的提示框
alert(window.document);
</script>
分析：
這種運(yùn)行匿名方法的形式，在 JavaScript 的主流框架中經(jīng)常見(jiàn)到，這樣做可以避免產(chǎn)生不必要的 window 對(duì)象的屬性，減少?zèng)_突的可能。
實(shí)例三：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
}
// 彈出內(nèi)容為 1 的提示框
alert(i);
})();
</script>
分析：
變量的作用域是整個(gè)函數(shù)，不是{}塊。
實(shí)例四：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 的提示框
alert(i);
var i = 2;
// 彈出內(nèi)容為 2 的提示框
alert(i);
</script>
分析：
一個(gè)變量可以被重新定義，這個(gè)看起來(lái)有些怪，因?yàn)樵诤芏嗥渌Z(yǔ)言里這樣是行不通的。
實(shí)例五：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function test(){
i = 1;
}
test();
// 彈出內(nèi)容為 1 的提示框
alert(window.i);
</script>
分析：
如果對(duì)一個(gè)沒(méi)有初始化的變量進(jìn)行賦值操作，那么這個(gè)變量會(huì)作為全局變量。
相關(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元素，下面通過(guò)示例為大家介紹下document.forms用法,需要的朋友可以參考下2014-06-06
對(duì)于Javascript 執(zhí)行上下文的全面了解
下面小編就為大家?guī)?lái)一篇對(duì)于Javascript 執(zhí)行上下文的全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧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組件遇到的問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要給大家介紹了關(guān)于js獲取對(duì)象屬性值的兩種方法使用,分別是通過(guò).獲取和通過(guò)[]獲取這兩種方法,文中介紹了詳細(xì)的方法和不同點(diǎn),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解Javascript中的Object對(duì)象,需要的朋友可以參考下2016-02-02
使用JavaScript將PDF頁(yè)面中的標(biāo)注扁平化的操作指南
扁平化(flatten)操作可以將標(biāo)注作為矢量圖形包含在PDF頁(yè)面的內(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