javascript闭包的理解和实例
更新时间：2010年08月12日 09:58:45 作者：
所谓闭包，值得是词法表示包括不必要计算的变量的函数，也就是说，该函数可以使用函数外定义的变量。
顺便提示一下：
词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）。
下面是一个简单的使用全局变量的闭包实例：
var sWord="Hello,Welcome to web前端开发工程师的博客，请多多指教。"
function disWord(){
alert(sWord);
}
disWord();
解析：脚本载入到内存的时候，disWord并没有计算sWord的值，而是函数disWord调用的时候执行了sWord的计算。
下面是函数中定义另一个函数的闭包实例：
var iNum=10;
function add(num1,num2){
function doAdd(){return num1+num2+iNum;}
return doAdd();
}
解析：内部函数doAdd是个闭包，它将获取传入参数num1,num2和全局变量iNum的值，doAdd不接受参数，add最后一步调用doAdd，请两个参数和全局变量求和返回，可以看得出doAdd使用的值是在执行环境中获得的。
下面是在网上找的几个例子，理解词法作用域和闭包
、案例一
/*全局（window）域下的一段代码*/
function a(i) {
var i;
alert(i);
};
a(10);
疑问：上面的代码会输出什么呢？
答案：10。
具体执行过程
a 函数有一个形参 i，调用 a 函数时传入实参 10，形参 i=10
接着定义一个同名的局部变量 i，未赋值
alert 输出 10
思考：局部变量 i 和形参 i 是同一个存储空间吗？
、案例二
1 /*全局（window）域下的一段代码*/
2 function a(i) {
3 alert(i);
4 alert(arguments[0]); //arguments[0]应该就是形参 i
5 var i = 2;
6 alert(i);
7 alert(arguments[0]);
8 };
9 a(10);
疑问：上面的代码又会输出什么呢?
答案：10,10,2,2
具体执行过程
函数有一个形参i，调用 a 函数时传入实参 10，形参 i=10
第一个 alert 把形参 i 的值 10 输出
第二个 alert 把 arguments[0] 输出，应该也是 i
接着定义个局部变量 i 并赋值为2，这时候局部变量 i=2
第三个 alert 就把局部变量 i 的值 2 输出
第四个alert再次把 argumentsa[0] 输出
思考：这里能说明局部变量 i 和形参 i 的值相同吗？
、案例三
/*全局（window）域下的一段代码*/
function a(i) {
var i = i;
alert(i);
};
a(10)
疑问：上面的代码又又会输出什么呢？
答案：10
具体执行过程
第一句声明一个与形参 i 同名的局部变量 i，根据结果我们知道，后一个 i 是指向了
形参 i，所以这里就等于把形参 i 的值 10 赋了局部变量 i
第二个 alert 当然就输出 10
思考：结合案列二，这里基本能说明局部变量 i 和形参 i 指向了同一个存储地址！
、案例四
/*全局（window）域下的一段代码*/
var i=10;
function a() {
alert(i);
var i = 2;
alert(i);
};
a();
疑问：上面的代码又会输出什么呢？
答案：undefined, 2
具体执行过程
第一个alert输出undefined
第二个alert输出 2
思考：到底怎么回事儿？
看到上面的几个例子，你可能会想到底是怎么执行的呢？执行的细节又是怎么样的呢？ JS 引擎的工作方式是怎样的呢？
解析过程
、执行顺序
编译型语言，编译步骤分为：词法分析、语法分析、语义检查、代码优化和字节生成。
解释型语言，通过词法分析和语法分析得到语法分析树后，就可以开始解释执行了。这里是一个简单原始的关于解析过程的原理，仅作为参考，详细的解析过程（各种JS引擎还有不同）还需要更深一步的研究
javascript的执行过程，如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：
步骤1. 读入第一个代码段（js执行引擎并非一行一行地执行程序，而是一段一段地分析执行的）
步骤2. 做词法分析和语法分析，有错则报语法错误（比如括号不匹配等），并跳转到步骤5
步骤3. 对【var】变量和【function】定义做“预解析“（永远不会报错的，因为只解析正确的声明）
步骤4. 执行代码段，有错则报错（比如变量未定义）
步骤5. 如果还有下一个代码段，则读入下一个代码段，重复步骤2
步骤6. 结束
、特殊说明
全局域（window）域下所有JS代码可以被看成是一个“匿名方法“，它会被自动执行，而此“匿名方法“内的其它方法则是在被显示调用的时候才被执行
、关键步骤
上面的过程，我们主要是分成两个阶段
解析：就是通过语法分析和预解析构造合法的语法分析树。
执行：执行具体的某个function，JS引擎在执行每个函数实例时，都会创建一个执行环境（ExecutionContext）和活动对象（activeObject）（它们属于宿主对象，与函数实例的生命周期保持一致）
在这里有更详细的实例分析资料：https://www.jb51.net/article/24547.htm
词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）。
下面是一个简单的使用全局变量的闭包实例：
复制代码 代码如下:
var sWord="Hello,Welcome to web前端开发工程师的博客，请多多指教。"
function disWord(){
alert(sWord);
}
disWord();
解析：脚本载入到内存的时候，disWord并没有计算sWord的值，而是函数disWord调用的时候执行了sWord的计算。
下面是函数中定义另一个函数的闭包实例：
复制代码 代码如下:
var iNum=10;
function add(num1,num2){
function doAdd(){return num1+num2+iNum;}
return doAdd();
}
解析：内部函数doAdd是个闭包，它将获取传入参数num1,num2和全局变量iNum的值，doAdd不接受参数，add最后一步调用doAdd，请两个参数和全局变量求和返回，可以看得出doAdd使用的值是在执行环境中获得的。
下面是在网上找的几个例子，理解词法作用域和闭包
复制代码 代码如下:
、案例一
/*全局（window）域下的一段代码*/
function a(i) {
var i;
alert(i);
};
a(10);
疑问：上面的代码会输出什么呢？
答案：10。
具体执行过程
a 函数有一个形参 i，调用 a 函数时传入实参 10，形参 i=10
接着定义一个同名的局部变量 i，未赋值
alert 输出 10
思考：局部变量 i 和形参 i 是同一个存储空间吗？
、案例二
复制代码 代码如下:
1 /*全局（window）域下的一段代码*/
2 function a(i) {
3 alert(i);
4 alert(arguments[0]); //arguments[0]应该就是形参 i
5 var i = 2;
6 alert(i);
7 alert(arguments[0]);
8 };
9 a(10);
疑问：上面的代码又会输出什么呢?
答案：10,10,2,2
具体执行过程
函数有一个形参i，调用 a 函数时传入实参 10，形参 i=10
第一个 alert 把形参 i 的值 10 输出
第二个 alert 把 arguments[0] 输出，应该也是 i
接着定义个局部变量 i 并赋值为2，这时候局部变量 i=2
第三个 alert 就把局部变量 i 的值 2 输出
第四个alert再次把 argumentsa[0] 输出
思考：这里能说明局部变量 i 和形参 i 的值相同吗？
、案例三
复制代码 代码如下:
/*全局（window）域下的一段代码*/
function a(i) {
var i = i;
alert(i);
};
a(10)
疑问：上面的代码又又会输出什么呢？
答案：10
具体执行过程
第一句声明一个与形参 i 同名的局部变量 i，根据结果我们知道，后一个 i 是指向了
形参 i，所以这里就等于把形参 i 的值 10 赋了局部变量 i
第二个 alert 当然就输出 10
思考：结合案列二，这里基本能说明局部变量 i 和形参 i 指向了同一个存储地址！
、案例四
复制代码 代码如下:
/*全局（window）域下的一段代码*/
var i=10;
function a() {
alert(i);
var i = 2;
alert(i);
};
a();
疑问：上面的代码又会输出什么呢？
答案：undefined, 2
具体执行过程
第一个alert输出undefined
第二个alert输出 2
思考：到底怎么回事儿？
看到上面的几个例子，你可能会想到底是怎么执行的呢？执行的细节又是怎么样的呢？ JS 引擎的工作方式是怎样的呢？
解析过程
、执行顺序
编译型语言，编译步骤分为：词法分析、语法分析、语义检查、代码优化和字节生成。
解释型语言，通过词法分析和语法分析得到语法分析树后，就可以开始解释执行了。这里是一个简单原始的关于解析过程的原理，仅作为参考，详细的解析过程（各种JS引擎还有不同）还需要更深一步的研究
javascript的执行过程，如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：
步骤1. 读入第一个代码段（js执行引擎并非一行一行地执行程序，而是一段一段地分析执行的）
步骤2. 做词法分析和语法分析，有错则报语法错误（比如括号不匹配等），并跳转到步骤5
步骤3. 对【var】变量和【function】定义做“预解析“（永远不会报错的，因为只解析正确的声明）
步骤4. 执行代码段，有错则报错（比如变量未定义）
步骤5. 如果还有下一个代码段，则读入下一个代码段，重复步骤2
步骤6. 结束
、特殊说明
全局域（window）域下所有JS代码可以被看成是一个“匿名方法“，它会被自动执行，而此“匿名方法“内的其它方法则是在被显示调用的时候才被执行
、关键步骤
上面的过程，我们主要是分成两个阶段
解析：就是通过语法分析和预解析构造合法的语法分析树。
执行：执行具体的某个function，JS引擎在执行每个函数实例时，都会创建一个执行环境（ExecutionContext）和活动对象（activeObject）（它们属于宿主对象，与函数实例的生命周期保持一致）
在这里有更详细的实例分析资料：https://www.jb51.net/article/24547.htm
相关文章
typescript环境安装并开启VSCode自动监视编译ts文件为js文件
这篇文章主要介绍了安装typescript环境并开启VSCode自动监视编译ts文件为js文件,本文教大家最基础的安装和配置自动监视ts文件编译成js文件，需要的朋友可以参考下2022-06-06
在大量的网站都有这样的功能，当点击一个按钮的时候可以复制当前页面的地址，以此可以方便网站用户对链接的存储，同时也便于网站的推广，下面给大家分享具体实现代码，对js实现点击按钮就复制的相关知识感兴趣的朋友一起学习吧2015-12-12
javascript设计模式之Adapter模式【适配器模式】实现方法示例
这篇文章主要介绍了javascript设计模式之Adapter模式,结合实例形式分析了JS适配器模式的原理与具体实现方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现电灯开关小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
本篇文章主要介绍了canvas简单快速实现知乎登录页背景效果的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
本篇文章主要是对js判断输入是否为中文的函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
在JavaScript的ES6版本中,引入了WeakMap和WeakSet这两种新的数据结构,与Map和Set相比,它们有一些特殊的特点和用途,使它们在处理内存泄漏问题、管理对象私有数据、处理对象的唯一性等场景中有显著的优势,本文将深入探讨WeakMap和WeakSet的特性和用途,一起看看吧2023-12-12
在 JavaScript 中监听用户的键盘输入是很容易的事情，但用户一旦使用了输入法，问题就变得复杂了。2011-05-05
IE下Ajax缓存问题的快速解决方法(get方式)。网上搜了很多解决方案，一大把，下面是我认为比较全面的解决方案。主要分为客户端解决和服务端解决2014-01-01
这篇文章主要介绍了JS 屏蔽键盘不可用与鼠标右键不可用的方法，有需要的朋友可以参考一下2013-11-11
最新评论