对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?
首先先引用《JavaScript权威指南》里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的。
因此,就出现了如下的几串代码:

var a="outside";
function area(){
var a="inside";
function b(){
return a;
}
return b();
}
area();

结果为:inside
这样的结果并不太出乎意料,因为在执行area()的时候,返回值就已经是b()了,也就是函数b已经是调用之后才被返回的,当然返回的是局部变量a。
那如果我返回的值不是执行函数b后的结果,而是函数b呢?

var a="outside";
function area(){
var a="inside";
function b(){
return a;
}
return b;
}
area()();

结果还是inside
js函数的执行用到了作用域链,而作用域链是在函数定义的时候创建的,在上面两个例子中,函数b()是定义在局部作用域里面的,也就是说,它的返回值a早就注定是局部变量的a了,无论外面的area()函数的返回值是否为执行过的函数b()的结果。其实这个就是闭包,为什么闭包能够让局部变量的值始终保持在内存中?《JavaScript权威指南》里面有这样一段话:每次调用函数,都会为之创建一个新的对象来保存局部变量,然后把该对象添加至作用域链中(每次调用就创建一个新的,调用多少次,创建多少个,执行结果互不影响)。当函数返回时,本来应该是直接从作用域链中将这个对象删除,但是闭包的出现让这一切变得不简单。当返回的是一个嵌套函数的时候,就会有一个外部的引用指向这个嵌套的函数,可以理解为外部对它进行调用,或者赋值给某个变量,在js垃圾回收机制中,一旦某个变量不再被引用,那么这个变量将会被回收。由此可见之前绑定在作用域链上的对象由于闭包的关系不会被当做垃圾回收,这也就是闭包能够让局部变量的值始终保持在内存中的原因。
接下来我们来看一下几段有关于闭包和作用域的代码,这几段代码都采用自权威指南。

function add(){
var num=0;
return {
count:function(){return num++;},
reset:function(){num=0;}
};
}
var a=add(),b=add(); //创建两个计时器
a.count(); //0 第一行
b.count(); //0 第二行
a.reset(); //重置 第三行
a.count(); //0 第四行
b.count(); //1 第五行

这段代码的结果正好印证了每次调用就会创建不同的对象,然后保存在作用域链上。第一行和第二行是两个计时器对计时函数的调用,很明显他们互不影响,第三行a计时器进行重置,当然对b计时器无效了,互不影响的嘛!
下面这两段代码是我们经常碰到的笔试题

function a(v){
return function(){return v;};
}
var funs=[];
for(var i=0;i<10;i++){
funs[i]=a(i);
}
console.log(funs[5]()); //5
function a(){
var funs=[];
for(var i=0;i<10;i++){
funs[i]=function(){
return i;
}
}
return funs;
}
var funs=a();
console.log(funs[5]()); //10

第一段代码执行结果为5,第二段为10。原因可以根据前面的篇幅来解释。
第一段代码只有一个闭包,但是有10个外部调用函数,也就是10个对象保存在作用域链上,执行结果互不干扰,所以当调用funs[5]() 的时候,结果肯定也是5。
第二段代码有十个闭包,共享同一个外部函数的局部变量,外部调用函数只有一个,当9次循环执行完之后,i还被++了,所以结果是10,所以外部函数调用到内嵌函数的时候,结果为10。
对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?的更多相关文章
- 【学习笔记】深入理解js原型和闭包(18)——补充:上下文环境和作用域的关系
本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...
- 【学习笔记】深入理解js原型和闭包(14)——从【自由变量】到【作用域链】
先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...
- 【学习笔记】深入理解js原型和闭包(13)——【作用域】和【上下文环境】
上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些. 如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了.而不 ...
- 【学习笔记】深入理解js原型和闭包(12)——简介【作用域】
提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...
- 【学习笔记】深入理解js原型和闭包(2)——函数和对象的关系
上文(深入理解jS原型和闭包(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; console.log ...
- 【学习笔记】深入理解js原型和闭包(15)——闭包
前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知道应用的两种情况即可 ...
- 【学习笔记】深入理解js原型和闭包(11)——执行上下文栈
继续上文的内容. 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行 ...
- 【学习笔记】深入理解js原型和闭包(9)—— 简述【执行上下文】下
继续上一篇文章(https://www.cnblogs.com/lauzhishuai/p/10078231.html)的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: 变 ...
- 【学习笔记】深入理解js原型和闭包(17)——补this
本文对<深入理解js原型和闭包(10)——this>一篇进行补充,原文链接:https://www.cnblogs.com/lauzhishuai/p/10078307.html 原文中, ...
- 【学习笔记】深入理解js原型和闭包(10)——this
接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...
随机推荐
- java爬虫实现爬取百度风云榜Top10
最近在项目中遇到了java和python爬虫进行程序调用和接口对接的问题, 刚开始也是调试了好久才得出点门道. 而后,自己也发现了爬虫的好玩之处,边想着用java来写个爬虫玩玩,虽说是个不起眼的dem ...
- Mybatis面试集合(转)
Mybatis技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用Mybatis的文章,所以,一些参数使用细节略掉了,我们的目标是介绍 ...
- JavaScript 判断对象中是否有某属性
判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined. ...
- WordPress 文章点赞
Installation 上传 wp-zan目录 到 /wp-content/plugins/ 目录 在后台插件菜单激活该插件 添加 <?php wp_zan();?> 到需要的位置 De ...
- TPshop之邮箱注册配置教程--附加常见问题集合
准备:企业邮箱(开启POP/SMTP功能) 一.步骤教程: 1.登录企业邮箱(QQ邮箱示例) QQ邮箱 POP3:pop.qq.com SMTP:smtp.qq.com SMTP端口号:25 邮箱 ...
- nginx代理tcp协议连接mysql
阅读目录 一.mariadb安装及配置 1.1 在192.168.182.155安装mariadb 1.2 配置MariaDB的字符集 1.3 添加用户,设置权限 1.4 防火墙设置 二.nginx ...
- Excel—数学函数
ROUND(四舍五入函数)就是说把一个小数点后多位的数四舍五入小数点位数的函数 函数语法:ROUND(哪个数,要四舍五入到小数点后几位) ROUNDUP(保留小数点几位后进位的函数)就是说要保留一个小 ...
- sublime text 3 package Install 安装失败解决方法
失败原因为官网地址被墙,导致channel_v3文件无法访问. 解决方法: 点击Preferences——>Package Settings——>Package Control——> ...
- java并发编程可见性与线程封闭
可见性 所谓可见性,指的是当一个线程修改了对象的状态后,其他线程能够看到该对象发生的变化.在单线程环境下,向某个变量写入值,然后在后面的操作再读取,在这个过程中该变量的值对该线程来说总是可见.但是,在 ...
- git ignore 总结
git ignore 总结 忽略和 ! 不忽略的先后顺序 gitignore的规则是有从上到下的顺序的,所以当我们使用 ! 不忽略的时候,这个顺序会对结果产生影响 例如: # 忽略所有 folder ...