【进阶2-3期】JavaScript深入之闭包面试题解
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/19
作用域指的是一个变量和函数的作用范围,JS中函数内声明的所有变量在函数体内始终是可见的,在ES6前有全局作用域和局部作用域,但是没有块级作用域(catch只在其内部生效),局部变量的优先级高于全局变量。
作用域
变量提升
var scope="global";
function scopeTest(){
console.log(scope);
var scope="local"
}
scopeTest(); //undefined
上面的代码输出是undefined
,这是因为局部变量scope
变量提升了,等效于下面
var scope="global";
function scopeTest(){
var scope;
console.log(scope);
scope="local"
}
scopeTest(); //undefined
注意,如果在局部作用域中忘记var,那么变量就被声明为全局变量。
没有块级作用域
var data = []; for (var i = 0; i <; i++) {
data[i] = function () {
console.log(i);
};
} data[0](); // 3
data[1](); // 3
data[2](); // 3
上篇文章已经介绍过了,【进阶2-2期】JavaScript深入之从作用域链理解闭包
作用域链
每个函数都有自己的执行上下文环境,当代码在这个环境中执行时,会创建变量对象的作用域链,作用域链是一个对象列表或对象链,它保证了变量对象的有序访问。
作用域链的开始是当前代码执行环境的变量对象,常被称之为“活跃对象”(AO),变量的查找会从第一个链的对象开始,如果对象中包含变量属性,那么就停止查找,如果没有就会继续向上级作用域链查找,直到找到全局对象中
闭包
function createClosure(){
var name = "jack";
return {
setStr:function(){
name = "rose";
},
getStr:function(){
return name + ":hello";
}
}
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello
上面在函数中返回了两个闭包,这两个闭包都维持着对外部作用域的引用。闭包中会将外部函数的自由对象添加到自己的作用域链中,所以可以通过内部函数访问外部函数的属性,这也是javascript模拟私有变量的一种方式。
闭包面试题解
由于作用域链机制的影响,闭包只能取得内部函数的最后一个值,这引起的一个副作用就是如果内部函数在一个循环中,那么变量的值始终为最后一个值。
这个代码已经贴过了,怕你们忘记,就再贴一遍
var data = []; for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
} data[0](); // 3
data[1](); // 3
data[2](); // 3
如果要强制返回预期的结果,怎么办???
方法1:立即执行函数
for (var i = 0; i < 3; i++) {
(function(num) {
setTimeout(function() {
console.log(num);
}, 1000);
})(i);
}
// 0
// 1
// 2
方法2:返回一个匿名函数赋值
var data = []; for (var i = 0; i < 3; i++) {
data[i] = (function (num) {
return function(){
console.log(num);
}
})(i);
} data[0](); // 0
data[1](); // 1
data[2](); // 2
无论是立即执行函数还是返回一个匿名函数赋值,原理上都是因为变量的按值传递,所以会将变量i
的值复制给实参num
,在匿名函数的内部又创建了一个用于访问num
的匿名函数,这样每个函数都有了一个num
的副本,互不影响了。
方法3:使用ES6中的let
var data = []; for (let i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
} data[0]();
data[1]();
data[2]();
解释下原理:
var data = [];// 创建一个数组data; // 进入第一次循环
{
let i = 0; // 注意:因为使用let使得for循环为块级作用域
// 此次 let i = 0 在这个块级作用域中,而不是在全局环境中
data[0] = function() {
console.log(i);
};
}
循环时,let
声明i
,所以整个块是块级作用域,那么data[0]这个函数就成了一个闭包。这里用{}表达并不符合语法,只是希望通过它来说明let存在时,这个for循环块是块级作用域,而不是全局作用域。
上面的块级作用域,就像函数作用域一样,函数执行完毕,其中的变量会被销毁,但是因为这个代码块中存在一个闭包,闭包的作用域链中引用着块级作用域,所以在闭包被调用之前,这个块级作用域内部的变量不会被销毁。
// 进入第二次循环
{
let i = 1; // 因为 let i = 1 和上面的 let i = 0
// 在不同的作用域中,所以不会相互影响
data[1] = function(){
console.log(i);
};
}
当执行data[1]()
时,进入下面的执行环境。
{
let i = 1;
data[1] = function(){
console.log(i);
};
}
在上面这个执行环境中,它会首先寻找该执行环境中是否存在i
,没有找到,就沿着作用域链继续向上到了其所在的块作用域执行环境,找到了i = 1
,于是输出了1
。
思考题
代码1:
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
} checkscope();
代码2:
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
var foo = checkscope();
foo();
上面的两个代码中,checkscope()
执行完成后,闭包f
所引用的自由变量scope
会被垃圾回收吗?为什么?
解答:
checkscope()
执行完成后,代码1中自由变量特定时间之后回收,代码2中自由变量不回收。
首先要说明的是,现在主流浏览器的垃圾回收算法是标记清除,标记清除并非是标记执行栈的进出,而是从根开始遍历,也是一个找引用关系的过程,但是因为从根开始,相互引用的情况不会被计入。所以当垃圾回收开始时,从Root(全局对象)开始寻找这个对象的引用是否可达,如果引用链断裂,那么这个对象就会回收。
闭包中的作用域链中 parentContext.vo 是对象,被放在堆中,栈中的变量会随着执行环境进出而销毁,堆中需要垃圾回收,闭包内的自由变量会被分配到堆上,所以当外部方法执行完毕后,对其的引用并没有丢。
每次进入函数执行时,会重新创建可执行环境和活动对象,但函数的[[Scope]]
是函数定义时就已经定义好的(词法作用域规则),不可更改。
- 对于代码1:
checkscope()
执行时,将checkscope
对象指针压入栈中,其执行环境变量如下:
checkscopeContext:{
AO:{
arguments:
scope:
f:
},
this,
[[Scope]]:[AO, globalContext.VO]
}
执行完毕后出栈,该对象没有绑定给谁,从Root开始查找无法可达,此活动对象一段时间后会被回收
- 对于代码2:
checkscope()
执行后,返回的是f
对象,其执行环境变量如下:
fContext:{
AO:{
arguments:
},
this,
[[Scope]]:[AO, checkscopeContext.AO, globalContext.VO]
}
此对象赋值给var foo = checkscope();
,将foo
压入栈中,foo
指向堆中的f
活动对象,对于Root
来说可达,不会被回收。
如果一定要自由变量scope
回收,那么该怎么办???
很简单,foo = null;
,把引用断开就可以了。
参考
【进阶2-3期】JavaScript深入之闭包面试题解的更多相关文章
- javascript深入理解--作用域,作用域链,闭包的面试题解
一.概要 作用域和作用域链是js中非常重要的特性,关系到理解整个js体系,闭包是对作用域的延伸,其他语言也有闭包的特性. 那什么是作用域?作用域指的是一个变量和函数的作用范围. 1.js中函数内声明的 ...
- javascript进阶教程第三章--匿名和闭包--案例实战
javascript进阶教程第三章--匿名和闭包--案例实战 一.学习任务 通过几个小练习回顾学过的知识点 二.实例 练习1: 实例描述:打开页面后规定时间内弹出一个新窗口,新窗口指定时间后自动关闭. ...
- 前端进阶必读:《JavaScript核心技术开发解密》核心提炼二
前言 最近读勒基本关于前端的数据<JavaScript核心技术开发解密>,<webpack从入门到进阶>...这几本书帮助到我更好的理解JS.webpack在前端技术领域中的作 ...
- 深入理解javascript原型和闭包 (转)
该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...
- JavaScript葵花宝典之闭包
闭包,写过JS脚本的人对这个词一定不陌生,都说闭包是JS中最奇幻的一个知识点, 虽然在工作中,项目里经常都会用到~ 但是是不是你已经真正的对它足够的了解~~ 又或者是你代码中出现的闭包,并不是你刻 ...
- 深入理解javascript原型和闭包系列
从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...
- 让你分分钟学会Javascript中的闭包
Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...
- 深入理解javascript原型和闭包(1)——一切都是对象
“一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...
- 深入理解javascript原型和闭包(2)——函数和对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
随机推荐
- 二十二、Linux 进程与信号---进程创建
22.1 fork 和 vfork 函数 22.1.1 函数说明 #include <unistd.h> #include <sys/types.h> pid_t fork( ...
- [译]SQL SERVER 2016 – Temporal Tables
原文 Temporal Table是SQL Server2016的新特性.能存储你表里面任意时间点的数据信息. 换句话说,如果你针对一张表执行任何更新或者删除操作,老数据会被新数据覆盖,下次查询的时候 ...
- docker 容器内启动 sshd 启动报错
创建容器设置密码 安装 openssh-server 启动出错 在容器内 使用 /usr/sbin/sshd -d 启动报错? [root@9d41c7f36c5e tmp]# /usr/sbin/s ...
- new和delete动态分配和撤销内存
视频:C++引用及new和delete的使用 一.new用法 使用new运算符时必须已知数据类型,new运算符会向系统堆区申请足够的存储空间,如果申请成功,就返回该内存块的首地址,动态分配失败,则返回 ...
- python前后端加密方式
后端加密方法: python后端加密方式: # 双重工加密 #bytes((7788).encode('utf-8')):为后端加密二把手,多加的锁,该参数可为空,必须加bytes才能实现 md5pa ...
- 省市联动-获取资源文件xml 获取nodes的方法要学会
try { SAXReader reader = new SAXReader(); InputStream input = this.getClass().getResourceAsStream(&q ...
- 请求神器 postman安装
1. 先下载postman(http://pan.baidu.com/s/1pLERz5p 密码:aqy2) 2.将你的包存放在文件夹中 列如名称为postman 3.在Chrome的地址栏中输入:c ...
- 用OZ工具制作openstack镜像
在部署openstack云平台环境的时候,需要上传镜像到glance. 首先下载iso镜像,这里下载了centos7.2镜像,放到/iso目录下 然后用OZ工具制作openstack的镜像 1.安装l ...
- Latex 问题解决
1. 当bib文件中包含待引用的参考文献,并且在tex中正常通过\cite{}引用,却依然提示citation undefined,pdf中显示问号时,怎么解决报错. 解决:删除根目录下的 .bbl ...
- Class的isAssignableFrom方法
Class类的isAssignableFrom是个不常用的方法,感觉这个方法的名字取得不是很好,所以有必要在此解析一下,以免在看源码时产生歧义,这个方法的签名如下: public native boo ...