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)文章
微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
javascript的switch用法注意事項(xiàng)分析
這篇文章主要介紹了javascript的switch用法注意事項(xiàng),實(shí)例分析了switch語句進(jìn)行判定的原理與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript實(shí)現(xiàn)的CRC32函數(shù)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的CRC32函數(shù),簡單介紹了CRC32函數(shù)的概念和功能,并給出實(shí)例形式分析了CRC32函數(shù)的javascript實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-11-11
javascript設(shè)計(jì)模式之中介者模式Mediator
這篇文章主要介紹了javascript設(shè)計(jì)模式之中介者模式Mediator,需要的朋友可以參考下2014-12-12
微信小程序動態(tài)生成二維碼的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序動態(tài)生成二維碼的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-07-07
讓JavaScript的Alert彈出框失效的方法禁止彈出警告框
彈出框難免會影響你的心情,所以通過以下代碼可將Js彈出框屏蔽掉,實(shí)現(xiàn)思路是對alert方法重寫2014-09-09
JavaScript lodash常見用法系列小結(jié)
本篇文章主要介紹了JavaScript lodash用法小結(jié),非常不錯,具有參考借鑒價(jià)值,對于Javascript lodash教程感興趣的同學(xué)可以參考一下2016-08-08
JS實(shí)現(xiàn)運(yùn)動緩沖效果的封裝函數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)運(yùn)動緩沖效果的封裝函數(shù),涉及JavaScript時間函數(shù)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-02-02

