本文转载自微信公众号「前端万有引力」,作者一川。转载本文请联系前端万有引力公众号。
1写在前面
在Javascript编程中,闭包是个相当重要且难以理解的概念,并且与作用域知识是密切相关的。那么:
- Javascript中的作用域是什么意思呢?
- 闭包会在哪些场景中使用呢?
- 通过定时器循环输出自增的数字,通过JS代码如何实现呢?
2作用域
作用域:指的是变量的作用范围,即变量能够被访问到的范围。
es5之前只有:全局作用域和函数作用域
es6之后新增:块级作用域
2.1 全局作用域
在Javascript中,全局变量是挂载到window顶级对象下的变量,因此在网页中的任何位置都可以进行使用,并且可以访问到这个全局变量。
- function getName(){
- var name = "inner";
- console.log(name);//"inner"
- }
- getName();
- console.log(name);//name is not defined
使用全局变量的缺点是:定义很多全局变量的时候,会容易引起变量命名的冲突。因此定义全局变量的时候,要注意作用域的访问范围。
2.2 函数作用域
函数作用域:除了函数内部能够进行访问外,其他地方都是不能够访问的。且此函数执行完毕后,定义在函数作用域的局部变量也会被销毁。
- function getName(){
- var name = "inner";
- console.log(name);//"inner"
- }
- getName();
- console.log(name);//name is not defined
2.3 块级作用域
块级作用域最直接的表现是:新增的let关键字,使用let关键字定义的变量只能在块级作用域中被访问。这是因为其具有暂时性死区的特点:这个变量在定义之前是不能够被使用的。
在Javascript中,if语句、try...catch...、switch以及for等语句后面{...}里面所包括的都是块级作用域。
- console.log(name);//name is not defined
- if(true){
- let name = "yichuan";
- console.log(name);//"yichuan"
- }
- console.log(name);//name is not defined
3闭包
在《Javscript高级程序设计》中是这样定义闭包的:闭包指有权访问另外一个函数作用域中的变量的函数。
在MDN中是这样定义的:一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。
对于我们理解,其实闭包就是一个可以访问其它函数内部变量的函数。
通常情况下,函数内部变量是无法在函数外部进行访问的,因此使用闭包的作用就是突破这种限制,使得具备了能够在函数外部访问此函数内部变量的功能。
- function func1(){
- var name = "yichuan";
- return function(){
- console.log(name);
- }
- }
- func1();//此处返回的是一个function函数
- var result = func1();//使用result接收这个return出来的函数
- result();//1
我们看上面的代码其实就已经具有闭包的特点,就是可以在func函数外部去访问name的值。
我们分析下闭包产生的原因,这就需要先理解什么是作用域链。
作用域链:当访问一个变量时,代码解释器会首先在当前作用域进行查找,如果没有查找到,就会去父级作用域进行查找,知道找到该变量或者不存在父级作用域中。
- var name = "outer";
- console.log(name);//outer
- function func1(){
- var name = "inner";
- console.log(name);//inner
- function func2(){
- var name = "self";
- console.log(name);//self
- }
- function func3(){
- console.log(name);//inner
- }
- func2();
- func3();
- }
- function func4(){
- function func5(){
- console.log(name);//outer
- }
- }
- func1();
- func4();
我们看到,在函数func2中使用name变量,他会现在func2中查找到name变量并使用它的值。在函数func3中没有name变量,它就会沿着作用域链向上查找到func1函数中的name变量并使用。在函数func5中,查找并没有name变量,它就会去func4函数中查找也没有,就接着去全局变量查找到name变量并使用。
闭包产生本质就是:当前环境中存在指向父级作用域的引用。
- function func1(){
- var name = "inner";
- function func2(){
- console.log(name);//inner
- }
- return func2;
- }
- var result = func1();
- result();
是不是只有返回函数的形式才能说产生了闭包呢?当然不是呀,只要让父级作用域的引用存在即可。
- var func2;
- function func1(){
- var name = "yichuan";
- func2 = function(){
- console.log(name);
- }
- }
- func1();
- func2();//"yichuan"
所以闭包有哪些表现形式呢?
- 直接返回一个函数
- 在定时器、事件监听、ajax请求、web workers或者任何异步中只要使用到了回调函数,实际上就是在使用闭包
- 作为函数参数传递的形式
- 立即执行函数IIFE,创建了闭包,保存了全局作用域window和当前函数作用域,因此可以输出全局的变量
- //定时器
- setTimeout(function(){
- console.log("yichuan");
- },1000);
- //事件监听
- const container = document.getElementById("app");
- container.addEventListener("click",function(){
- console.log("event listener");
- });
- //函数参数传递
- var name = "yichuan";
- function func1(){
- var name = "onechuan";
- function func2(){
- console.log(name);
- }
- func3(func2);
- }
- function func3(func){
- func();//闭包
- }
- func1();//输出"onechuan"
- //立即执行函数
- var name = "yihchuan";
- (function(){
- console.log(name);//"yichuan"
- })();
那么,我们应该如何应用闭包解决循环问题呢?
4面试中常考的循环打印问题
例如:在循环中是否是期望的,打印出来的是1、2、3、4、5呢?
- for(var i = 1; i <= 5; i++){
- setTimeout(function(){
- console.log(i);
- },0);
- }
答案是否定的,最终打印出来是五个6。这是为什么呢?
这是因为:setTimeout是宏任务,由于js中单线程EventLoop机制,在主线程同步任务执行完毕后才会去执行宏任务,因此循环结束后setTimeout中的回调才会依次执行。而setTimeout函数也是一种闭包,沿着作用域链往上找它的父级作用域就是window,而变量i是window上的全局变量。等开始执行setTimeout函数之前变量i就已经变成了6了,因此最后输出的数值就是5个6。
那么如何解决呢?
- //使用立即执行函数
- for(var i = 1; i <= 5; i++){
- (function(j){
- setTimeout(function(){
- console.log(j);
- },0);
- })(i)
- }
- //使用es6中let
- for(let i = 1; i <= 5; i++){
- setTimeout(function(){
- console.log(i);
- },0);
- }
还有个很难想到的方法,就是使用setTimeout的隐藏的第三个参数。
- for(var i = 1; i <= 5; i++){
- setTimeout(function(){
- console.log(i);
- },0,i);
- }
附加参数,一旦定时器到期,它们会作为参数传递给function。但是得注意:IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。
5参考文章
《Javascript核心原理精讲》
《MDN》
《Javascript高级程序设计》
6写在后面
闭包的使用在日常的javascript编程中经常出现,使用的场景比较多且复杂,需要读者仔细分析。本篇文章讲到了关于作用域和闭包的知识,其中作用域根据变量的作用范围分为:全局作用域、函数作用域以及块级作用域。而闭包就是一个可以访问其它函数内部变量的函数,在解决for循环打印的问题可以使用立即执行函数、setTimeout的第三参数、es6中的let关键字解决。
注意:闭包在实际开发要注意不要滥用,容易引起内存泄漏。