javascript闭包的理解和实例


Posted in Javascript onAugust 12, 2010

顺便提示一下:
词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。 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://3water.com/article/24547.htm
Javascript 相关文章推荐
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JavaScript组合继承详解
Nov 07 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 #Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 #Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 #Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 #Javascript
用js解决数字不能换行问题
Aug 10 #Javascript
JavaScript 错误处理与调试经验总结
Aug 10 #Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 #Javascript
You might like
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
动态加载iframe
2006/06/16 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
用Python实现KNN分类算法
2017/12/22 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python调用百度语音识别api
2018/08/30 Python
python 构造三维全零数组的方法
2018/11/12 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
就业推荐表自我鉴定范文
2014/03/21 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
致运动员赞词
2015/07/22 职场文书
考试后的感想
2015/08/07 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers