根据一段代码浅谈Javascript闭包
更新时间：2010年12月14日 21:42:45 作者：
水平不高，不能也不想从太深的层次去讲解这个东西，只是根据一段比较有代表性的代码，结合执行结果，从表象上粗浅地谈谈。
复制代码 代码如下:
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return f2;
}
这里的闭包是f1，封闭了一个变量n和一个函数f2。
我们先无视nAdd，尽量保持原貌重写一下这个函数。
复制代码 代码如下:
function f1(){
var n = 999;
var f2 = function(){ alert(n); };
return f2;
}
var result = f1();
result();
js中各个变量以function为单元进行封装，当在function内部找不到某一变量时，function会向其所在的上一单元（上下文）中进行查找，一直查找到顶层的window域。
这时就出现一个疑问：这个查找过程是以函数引用位置为起点还是函数体定义的位置为起点？
在上面这一段代码中，result所在域是window，但是实际的输出结果是f1内部的n值，所以可以得出结论：变量查找的起点是函数体定义的位置。
现在再回过头来看nAdd（第一段代码）。如我们所知，没有关键字var定义的变量默认进入window域，所以nAdd实际为window.nAdd。这就等同于如下代码：
复制代码 代码如下:
var nAdd;
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}
那么根据我们对result的分析，nAdd的执行将影响f1中n的值。
所以有：
复制代码 代码如下:
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}
var result = f1();
result();
nAdd();
result();
这段代码执行最终的输出结果为1000。
再看这种情况：
复制代码 代码如下:
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}
f1()(); //<--p1
nAdd();
f1()(); //<--p2
简述一下执行过程：
p1位置，f1封装了一个匿名的闭包A，在返回A闭包中的函数A:f2后继而执行A:f2，A:f2输出变量A:n，结果是999。
与此同时，nAdd被赋值为A闭包中的一个函数，下一行执行nAdd即让A:n的值+1。
p2位置，f1封装匿名的闭包B，所进行的操作都是针对闭包B的，随后执行B:f2输出的是B:n，所以最后的结果依然是999。
A和B是两个独立的“包”，互不影响。
改写一下函数的调用部分：
复制代码 代码如下:
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}
var result = f1();
result();
nAdd();
f1()();
result(); // <--p3
p3位置不意外地输出了1000。
相关文章
这篇文章主要介绍了javascript中attachEvent用法,实例分析了javascript中事件绑定的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了原生js实现tab选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
继上篇讨论了一些关于JavaScript线程的知识，我们不妨回过头再看看，是不是JavaScript就不能多线程呢？看下面一段很简单的代码（演示用，没考虑兼容问题）：2015-07-07
这篇文章主要介绍了ES6 class的应用,结合实例形式分析了class在ES6面向对象程序设计中定义类的相关操作技巧,需要的朋友可以参考下2019-06-06
使用js实现的导航栏悬停效果在IE上，滚动滚动条或者鼠标滚轮的时候，导航栏会抖动;而在Chrome和FF上有没有任何问题2013-09-09
获取对象所有key的方法，需要使用 Object.keys(obj) 方法,Object.keys(obj)方返回一个数组，这个数组包含obj对象中的所有key，这篇文章主要介绍了javascript如何获取对象的key和value,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了微信小程序将页面按钮悬浮固定在底部的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要为大家详细介绍了JS实现HTML表格排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了JavaScript canvas绘制折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了JS实现仿FLASH效果的竖排导航代码,涉及JavaScript基于定时函数动态设置页面元素样式的技巧,具有FLASH变换效果,需要的朋友可以参考下2015-09-09
最新评论