【进阶2-3期】JavaScript深刻之闭包面试题解

时间 2019-12-05

标签进阶2-3期 javascript 深刻闭包面试题解栏目 JavaScript 繁體版

原文原文链接

本期的主题是做用域闭包，本计划一共28期，每期重点攻克一个面试重难点，若是你还不了解本进阶计划，文末点击查看所有文章。javascript

若是以为本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。html

做用域指的是一个变量和函数的做用范围，JS中函数内声明的全部变量在函数体内始终是可见的，在ES6前有全局做用域和局部做用域，可是没有块级做用域（catch只在其内部生效），局部变量的优先级高于全局变量。前端

做用域

变量提高

var scope="global";
function scopeTest(){
    console.log(scope);
    var scope="local"  
}
scopeTest(); //undefined
复制代码

上面的代码输出是undefined，这是由于局部变量scope变量提高了，等效于下面java

var scope="global";
function scopeTest(){
    var scope;
    console.log(scope);
    scope="local"  
}
scopeTest(); //undefined
复制代码

注意，若是在局部做用域中忘记var，那么变量就被声明为全局变量。webpack

没有块级做用域

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深刻之从做用域链理解闭包git

做用域链

每一个函数都有本身的执行上下文环境，当代码在这个环境中执行时，会建立变量对象的做用域链，做用域链是一个对象列表或对象链，它保证了变量对象的有序访问。github

做用域链的开始是当前代码执行环境的变量对象，常被称之为“活跃对象”（AO），变量的查找会从第一个链的对象开始，若是对象中包含变量属性，那么就中止查找，若是没有就会继续向上级做用域链查找，直到找到全局对象中web

闭包

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期】调用堆栈
【进阶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.com/yygmind/blo…，内有优质前端资料，欢迎领取，以为不错点个star。

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！