JavaScript 變量作用域及閉包第1/2頁
更新時間：2009年08月07日 22:57:34 作者：
作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過實(shí)例來進(jìn)行演示。
實(shí)例一：
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>
分析：
在全局定義的變量其實(shí)就是 window 對象的屬性。
上面的例子可以看到，我們定義全局變量的同時，window 對象會產(chǎn)生一個相應(yīng)的屬性，如何讓我們的代碼避免產(chǎn)生這個屬性呢，看下面的例子。
實(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>
為了使代碼更加簡潔，我們可以這樣：
<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)常見到，這樣做可以避免產(chǎn)生不必要的 window 對象的屬性，減少沖突的可能。
實(shí)例三：
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
}
// 彈出內(nèi)容為 1 的提示框
alert(i);
})();
</script>
分析：
變量的作用域是整個函數(shù)，不是{}塊。
實(shí)例四：
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 的提示框
alert(i);
var i = 2;
// 彈出內(nèi)容為 2 的提示框
alert(i);
</script>
分析：
一個變量可以被重新定義，這個看起來有些怪，因?yàn)樵诤芏嗥渌Z言里這樣是行不通的。
實(shí)例五：
<script type="text/javascript">
function test(){
i = 1;
}
test();
// 彈出內(nèi)容為 1 的提示框
alert(window.i);
</script>
分析：
如果對一個沒有初始化的變量進(jìn)行賦值操作，那么這個變量會作為全局變量。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>
分析：
在全局定義的變量其實(shí)就是 window 對象的屬性。
上面的例子可以看到，我們定義全局變量的同時，window 對象會產(chǎn)生一個相應(yīng)的屬性，如何讓我們的代碼避免產(chǎn)生這個屬性呢，看下面的例子。
實(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>
為了使代碼更加簡潔，我們可以這樣：
復(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)常見到，這樣做可以避免產(chǎn)生不必要的 window 對象的屬性，減少沖突的可能。
實(shí)例三：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
}
// 彈出內(nèi)容為 1 的提示框
alert(i);
})();
</script>
分析：
變量的作用域是整個函數(shù)，不是{}塊。
實(shí)例四：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var i = 1;
// 彈出內(nèi)容為 1 的提示框
alert(i);
var i = 2;
// 彈出內(nèi)容為 2 的提示框
alert(i);
</script>
分析：
一個變量可以被重新定義，這個看起來有些怪，因?yàn)樵诤芏嗥渌Z言里這樣是行不通的。
實(shí)例五：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function test(){
i = 1;
}
test();
// 彈出內(nèi)容為 1 的提示框
alert(window.i);
</script>
分析：
如果對一個沒有初始化的變量進(jìn)行賦值操作，那么這個變量會作為全局變量。
相關(guān)文章
JS 循環(huán)li添加點(diǎn)擊事件 （閉包的應(yīng)用）
這篇文章主要介紹了js循環(huán)li添加點(diǎn)擊事件 （閉包的應(yīng)用）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
forms 返回一個集合包含了了當(dāng)前文檔中的所有form元素，下面通過示例為大家介紹下document.forms用法,需要的朋友可以參考下2014-06-06
下面小編就為大家?guī)硪黄獙τ贘avascript 執(zhí)行上下文的全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧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ì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例
下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家介紹了關(guān)于js獲取對象屬性值的兩種方法使用,分別是通過.獲取和通過[]獲取這兩種方法,文中介紹了詳細(xì)的方法和不同點(diǎn),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解Javascript中的Object對象,需要的朋友可以參考下2016-02-02
使用JavaScript將PDF頁面中的標(biāo)注扁平化的操作指南
扁平化(flatten)操作可以將標(biāo)注作為矢量圖形包含在PDF頁面的內(nèi)容中,使其不可編輯,Dynamsoft Document Viewer是一個用于文檔掃描和查看的JavaScript SDK,可以添加標(biāo)注、導(dǎo)出PDF,在本文中,我們將探討如何使用它,需要的朋友可以參考下2025-01-01
這篇文章主要給大家介紹了關(guān)于js日期時間格式化的相關(guān)資料,文中分別介紹了利用原生js以及Moment.js庫處理日期時間格式化的方法,需要的朋友可以參考下2021-07-07