【进阶2-3期】JavaScript深入之闭包面试题解
(关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导)
本周正式开始前端进阶的第二期,本周的主题是作用域闭包,今天是第8天。
本计划一共28期,每期重点攻克一个面试重难点,如果你还不了解本进阶计划,点击查看前端进阶的破冰之旅
如果觉得本系列不错,欢迎转发,您的支持就是我坚持的最大动力。
本期推荐文章
深入javascript——作用域和闭包 ,由于微信不能访问外链,点击阅读原文就可以啦。
推荐理由
本篇文章介绍了作用域、作用域链和闭包,然后重点介绍一个面试题的3种解法,并给出详细解答,欢迎阅读原文留言评论。
阅读笔记
作用域指的是一个变量和函数的作用范围,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 < 3; 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;
}var foo = checkscope();
foo();
代码2:
var scope = "global scope";
function checkscope(){var scope = "local scope";function f(){return scope;}return f;
}checkscope();
上面的两个代码中,checkscope()
执行完成后,闭包f
所引用的自由变量scope
会被垃圾回收吗?为什么?
参考
深入javascript——作用域和闭包
ES6之let(理解闭包)和const命令
往期文章查看
- 【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
- 【进阶1-2期】JavaScript深入之执行上下文栈和变量对象
- 【进阶1-3期】JavaScript深入之内存空间详细图解
- 【进阶1-4期】JavaScript深入之带你走进内存机制
- 【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免
- 【进阶2-1期】深入浅出图解作用域链和闭包
- 【进阶2-2期】JavaScript深入之从作用域链理解闭包
每周计划安排
每周面试重难点计划如下,如有修改会通知大家。每周一期,为期半年,准备明年跳槽的小伙伴们可以把本公众号[置顶]()了。
- 【进阶1期】 调用堆栈
- 【进阶2期】 作用域闭包
- 【进阶3期】 this全面解析
- 【进阶4期】 深浅拷贝原理
- 【进阶5期】 原型Prototype
- 【进阶6期】 高阶函数
- 【进阶7期】 事件机制
- 【进阶8期】 Event Loop原理
- 【进阶9期】 Promise原理
- 【进阶10期】Async/Await原理
- 【进阶11期】防抖/节流原理
- 【进阶12期】模块化详解
- 【进阶13期】ES6重难点
- 【进阶14期】计算机网络概述
- 【进阶15期】浏览器渲染原理
- 【进阶16期】webpack配置
- 【进阶17期】webpack原理
- 【进阶18期】前端监控
- 【进阶19期】跨域和安全
- 【进阶20期】性能优化
- 【进阶21期】VirtualDom原理
- 【进阶22期】Diff算法
- 【进阶23期】MVVM双向绑定
- 【进阶24期】Vuex原理
- 【进阶25期】Redux原理
- 【进阶26期】路由原理
- 【进阶27期】VueRouter源码解析
- 【进阶28期】ReactRouter源码解析
交流
本人Github链接如下,欢迎各位Star
http://github.com/yygmind/blog
我是木易杨,网易高级前端工程师,跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界,在进阶的路上,共勉!
如果你想加群讨论每期面试知识点,公众号回复[加群]即可
【进阶2-3期】JavaScript深入之闭包面试题解相关推荐
- 前端进阶(第二期)- 作用域闭包笔记
原文地址: 2-1 从作用域链谈闭包 2-2 JavaScript深入之闭包 2-3 深入javascript--作用域和闭包 JavaScript Closures Explained by Mai ...
- 让你分分钟学会Javascript中的闭包
Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...
- 深入理解javascript原型和闭包(16)——完结
之前一共用15篇文章,把javascript的原型和闭包. 首先,javascript本来就"不容易学".不是说它有多难,而是学习它的人,往往都是在学会了其他语言之后,又学java ...
- 深入理解javascript原型和闭包(17)——补this
本文对<深入理解javascript原型和闭包(10)--this>一篇进行补充,原文链接:http://www.cnblogs.com/wangfupeng1988/p/3988422. ...
- 深入理解javascript原型和闭包(3)——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
- [译]Javascript中的闭包(closures)
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- 【javascript笔记】关于javascript中的闭包
最开始看<javascript高级程序设计>的时候就看到了javascript中的闭包,在第七章第二节....好大概知道了,过了段时间,好了又忘了... 我们来看这本书里面关于闭包是怎么描 ...
- 解析面试常问题之JavaScript中的闭包概念及应用,顺便普及一下大家口中常说的内存泄漏问题
JavaScript中的闭包是一个面试中经常被考到的问题,大家可能都对这个概念多多少少都有一些模糊的概念或者一点都不了解,那么今天就来给大家讲解一下. 公众号:前端印象 不定时有送书活动,记得关注~ ...
最新文章
- redis主从复制,读写分离
- 【知识积累】JavaMail实现发邮件功能
- android自定义WaveView水波纹控件
- 6.变量的使用.rs
- mysql表损坏监控_监控mysql启动情况并检测表错误修复
- 十年经验工程师为何被裁?
- idea生成方法注释的正确方法
- 阿里P8亲自教你!Activity的6大难点,你会几个?年薪50W
- (Python的)__ name__中包含什么?
- 06 - Object-C ARC机制
- 基于JAVA+SpringMVC+MYSQL的在线英语精品课程视频教学平台
- Java定义全局变量的方法
- 美国转基因食品的生产现状
- 关于开源软件的十个问题(下篇)
- 【prometheus+alertmanager告警管理】
- IDEA配置文件保存位置修改
- 一语道破中国千年潜规则——每天懂一点人情世故
- 海量数据的存储和访问解决方案
- 汇编命令及OD常用命令及断点设置
- erdas查看灰度直方图_ERDAS图像的基本操作