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