JavaScript 变量作用域及闭包第1/2页
更新时间：2009年08月07日 22:57:34 作者：
作用域JavaScript 的变量作用域是按照函数划分的，为了快速的了解它的特性，我们通过实例来进行演示。
实例一：
<script type="text/javascript">
var i = 1;
// 弹出内容为 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>
分析：
在全局定义的变量其实就是 window 对象的属性。
上面的例子可以看到，我们定义全局变量的同时，window 对象会产生一个相应的属性，如何让我们的代码避免产生这个属性呢，看下面的例子。
实例二：
<script type="text/javascript">
var document = 1;
window.onload = function(){
alert(document);
}
// 弹出内容为 1 的提示框
alert(window.document);
</script>
这种情况是我们不想看到的，我们可以这么做：
<script type="text/javascript">
function test(){
var document = 1;
window.onload = function(){
alert(document);
}
}
test();
// 弹出内容为 [object] 的提示框
alert(window.document);
</script>
为了使代码更加简洁，我们可以这样：
<script type="text/javascript">
(function(){
var document = 1;
window.onload = function(){
alert(document);
}
})();
// 弹出内容为 [object] 的提示框
alert(window.document);
</script>
分析：
这种运行匿名方法的形式，在 JavaScript 的主流框架中经常见到，这样做可以避免产生不必要的 window 对象的属性，减少冲突的可能。
实例三：
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
}
// 弹出内容为 1 的提示框
alert(i);
})();
</script>
分析：
变量的作用域是整个函数，不是{}块。
实例四：
<script type="text/javascript">
var i = 1;
// 弹出内容为 1 的提示框
alert(i);
var i = 2;
// 弹出内容为 2 的提示框
alert(i);
</script>
分析：
一个变量可以被重新定义，这个看起来有些怪，因为在很多其他语言里这样是行不通的。
实例五：
<script type="text/javascript">
function test(){
i = 1;
}
test();
// 弹出内容为 1 的提示框
alert(window.i);
</script>
分析：
如果对一个没有初始化的变量进行赋值操作，那么这个变量会作为全局变量。
复制代码 代码如下:
<script type="text/javascript">
var i = 1;
// 弹出内容为 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>
分析：
在全局定义的变量其实就是 window 对象的属性。
上面的例子可以看到，我们定义全局变量的同时，window 对象会产生一个相应的属性，如何让我们的代码避免产生这个属性呢，看下面的例子。
实例二：
复制代码 代码如下:
<script type="text/javascript">
var document = 1;
window.onload = function(){
alert(document);
}
// 弹出内容为 1 的提示框
alert(window.document);
</script>
这种情况是我们不想看到的，我们可以这么做：
复制代码 代码如下:
<script type="text/javascript">
function test(){
var document = 1;
window.onload = function(){
alert(document);
}
}
test();
// 弹出内容为 [object] 的提示框
alert(window.document);
</script>
为了使代码更加简洁，我们可以这样：
复制代码 代码如下:
<script type="text/javascript">
(function(){
var document = 1;
window.onload = function(){
alert(document);
}
})();
// 弹出内容为 [object] 的提示框
alert(window.document);
</script>
分析：
这种运行匿名方法的形式，在 JavaScript 的主流框架中经常见到，这样做可以避免产生不必要的 window 对象的属性，减少冲突的可能。
实例三：
复制代码 代码如下:
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
}
// 弹出内容为 1 的提示框
alert(i);
})();
</script>
分析：
变量的作用域是整个函数，不是{}块。
实例四：
复制代码 代码如下:
<script type="text/javascript">
var i = 1;
// 弹出内容为 1 的提示框
alert(i);
var i = 2;
// 弹出内容为 2 的提示框
alert(i);
</script>
分析：
一个变量可以被重新定义，这个看起来有些怪，因为在很多其他语言里这样是行不通的。
实例五：
复制代码 代码如下:
<script type="text/javascript">
function test(){
i = 1;
}
test();
// 弹出内容为 1 的提示框
alert(window.i);
</script>
分析：
如果对一个没有初始化的变量进行赋值操作，那么这个变量会作为全局变量。
相关文章
这篇文章主要介绍了js循环li添加点击事件 （闭包的应用）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
forms 返回一个集合包含了了当前文档中的所有form元素，下面通过示例为大家介绍下document.forms用法,需要的朋友可以参考下2014-06-06
下面小编就为大家带来一篇对于Javascript 执行上下文的全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至服务器实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序 image组件遇到的问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
下面小编就为大家带来一篇Vue2.0+ElementUI实现表格翻页的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要给大家介绍了关于js获取对象属性值的两种方法使用,分别是通过.获取和通过[]获取这两种方法,文中介绍了详细的方法和不同点,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了详解Javascript中的Object对象,需要的朋友可以参考下2016-02-02
使用JavaScript将PDF页面中的标注扁平化的操作指南
扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,Dynamsoft Document Viewer是一个用于文档扫描和查看的JavaScript SDK,可以添加标注、导出PDF,在本文中,我们将探讨如何使用它,需要的朋友可以参考下2025-01-01
这篇文章主要给大家介绍了关于js日期时间格式化的相关资料,文中分别介绍了利用原生js以及Moment.js库处理日期时间格式化的方法,需要的朋友可以参考下2021-07-07
最新评论