繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 变量作用域及闭包
- Javascript
- javascript innerText和innerHtml应用
- 图像替换新技术 状态域方法
- JavaScript 判断判断某个对象是Object还是一个Array
- Extjs 几个方法的讨论
- JavaScript 学习笔记（十五）
- javascript 匿名函数的理解（透彻版)
- Jquery 常用方法经典总结
- jquery 批量上传图片实现代码
- javascript中的array数组使用技巧
- 详细讲解JS节点知识
- javascript让setInteval里的函数参数中的this指向特定的对象
- javaScript 关闭浏览器 (不弹出提示框)
- 对字符串进行HTML编码和解码的JavaScript函数
- javascript 三种编解码方式
- js左侧多级菜单动态的解决方案
- JavaScript 学习笔记（十六） js事件
- JavaScript面向对象之静态与非静态类
- javascript两段代码,两个小技巧
- js中鼠标滚轮事件详解(firefox多浏览器)
- js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)
Javascript 中的 JavaScript 变量作用域及闭包
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 183 ::
收藏到网摘: n/a
作用域JavaScript 的变量作用域是按照函数划分的，为了快速的了解它的特性，我们通过实例来进行演示。 实例一：
复制代码 代码如下:
实例六：
<script type="text/javascript">
window.onload = function(){
var i = 1;
function test(){
alert(i);
}
// 弹出内容为 1 的提示框
test();
}
</script>
分析：
内部函数可以访问外部函数的变量，这个就引出了一个新的概念，那就是闭包。
闭包
什么是闭包呢，简单的说就是一个函数 A ，它的内部函数 B 可以访问 A 内定义的变量，即使函数 A 已经终止。下面通过实例进行了解。
实例七：
<script type="text/javascript">
window.onload = function(){
var i = 1;
window.onunload = function(){
alert(i);
}
}
</script>
分析：
当整个页面加载完成时，会触发 onload 事件，这个onload 事件方法里给窗口的onunload 事件注册了一个方法，这个方法里用到了onload 事件方法里声明的变量，然后onload 事件方法运行结束，这时候我们点击关闭窗口，会弹出内容为1的提示框，说明onunload 的事件方法成功的调用了onload 事件方法里声明的变量。
为了进一步了解闭包的特性，看下面的例子
实例八：
<script type="text/javascript">
function initX(oarg){
// 定义一个变量
var x = oarg;
// 定义一个显示变量的方法
var funGet = function(){
alert(x);
}
// 定义一个对变量进行修改的方法
var funSet = function(iarg){
x = iarg;
}
// 返回这两个方法
return [funGet,funSet];
}
// 运行一个方法实例，返回值为包含 get 和 set 方法的数组
var funArr = initX(1);
// 得到 get 方法
var funGet = funArr[0];
// 得到 set 方法
var funSet = funArr[1];
// 运行 get 方法，显示initX方法实例内的 x 变量，结果为 1
funGet();
// 运行 set 方法，对initX方法实例内的 x 变量进行赋值
funSet(2);
// 运行 get 方法，显示initX方法实例内的 x 变量，结果为 2
funGet();
</script>
分析：
当内部函数对外部函数定义的变量进行调用时，实际上引用的是这个变量的内存块，所以当我们调用内部函数时，引用的变量值是当前这个变量的实际内容。
闭包功能虽然强大，但是如果不注意，它也会给我们带来困扰。看下面的例子。
实例九：
<button id="main">run</button>
<script type="text/javascript">
(function(){
var obj = document.getElementById("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<funArr.length; i++){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
}
})();
</script>
写代码的原意是给 id 是 main 的按钮注册点击事件和按键事件，事件的内容是分别弹出事件名称的提示框。但是结果有点匪夷所思，两个事件的提示框全是 onkeypress，根据闭包的原理，我们仔细分析，就会发现当两个事件方法被调用时 temp 变量 指向的是 funArr[1] 的内容，我们可以这样修改来解决这个问题：
<button id="main">run</button>
<script type="text/javascript">
(function(){
var obj = document.getElementById("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<funArr.length; i++){
(function(){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
})();
}
})();
</script>
把 for 循环内的代码放入一个函数内，这样，每循环一次都会产生一个函数实例，让函数实例记录 funArr 数组中的每个值，这样就避免了上面碰到的问题。
实例六：
复制代码 代码如下:
<script type="text/javascript">
window.onload = function(){
var i = 1;
function test(){
alert(i);
}
// 弹出内容为 1 的提示框
test();
}
</script>
分析：
内部函数可以访问外部函数的变量，这个就引出了一个新的概念，那就是闭包。
闭包
什么是闭包呢，简单的说就是一个函数 A ，它的内部函数 B 可以访问 A 内定义的变量，即使函数 A 已经终止。下面通过实例进行了解。
实例七：
复制代码 代码如下:
<script type="text/javascript">
window.onload = function(){
var i = 1;
window.onunload = function(){
alert(i);
}
}
</script>
分析：
当整个页面加载完成时，会触发 onload 事件，这个onload 事件方法里给窗口的onunload 事件注册了一个方法，这个方法里用到了onload 事件方法里声明的变量，然后onload 事件方法运行结束，这时候我们点击关闭窗口，会弹出内容为1的提示框，说明onunload 的事件方法成功的调用了onload 事件方法里声明的变量。
为了进一步了解闭包的特性，看下面的例子
实例八：
复制代码 代码如下:
<script type="text/javascript">
function initX(oarg){
// 定义一个变量
var x = oarg;
// 定义一个显示变量的方法
var funGet = function(){
alert(x);
}
// 定义一个对变量进行修改的方法
var funSet = function(iarg){
x = iarg;
}
// 返回这两个方法
return [funGet,funSet];
}
// 运行一个方法实例，返回值为包含 get 和 set 方法的数组
var funArr = initX(1);
// 得到 get 方法
var funGet = funArr[0];
// 得到 set 方法
var funSet = funArr[1];
// 运行 get 方法，显示initX方法实例内的 x 变量，结果为 1
funGet();
// 运行 set 方法，对initX方法实例内的 x 变量进行赋值
funSet(2);
// 运行 get 方法，显示initX方法实例内的 x 变量，结果为 2
funGet();
</script>
分析：
当内部函数对外部函数定义的变量进行调用时，实际上引用的是这个变量的内存块，所以当我们调用内部函数时，引用的变量值是当前这个变量的实际内容。
闭包功能虽然强大，但是如果不注意，它也会给我们带来困扰。看下面的例子。
实例九：
复制代码 代码如下:
<button id="main">run</button>
<script type="text/javascript">
(function(){
var obj = document.getElementById("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<funArr.length; i++){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
}
})();
</script>
写代码的原意是给 id 是 main 的按钮注册点击事件和按键事件，事件的内容是分别弹出事件名称的提示框。但是结果有点匪夷所思，两个事件的提示框全是 onkeypress，根据闭包的原理，我们仔细分析，就会发现当两个事件方法被调用时 temp 变量 指向的是 funArr[1] 的内容，我们可以这样修改来解决这个问题：
复制代码 代码如下:
<button id="main">run</button>
<script type="text/javascript">
(function(){
var obj = document.getElementById("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<funArr.length; i++){
(function(){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
})();
}
})();
</script>
把 for 循环内的代码放入一个函数内，这样，每循环一次都会产生一个函数实例，让函数实例记录 funArr 数组中的每个值，这样就避免了上面碰到的问题。
评论 (0) All
