javascript系列--javascript深入理解--作用域，作用域链，闭包的面试题解

anRui 发布于2019-08-23 17:50 / 771人阅读

摘要：一概要作用域和作用域链是中非常重要的特性，关系到理解整个体系，闭包是对作用域的延伸，其他语言也有闭包的特性。作用域链的作用他保证了变量对象的有序访问。

一、概要

作用域和作用域链是js中非常重要的特性，关系到理解整个js体系，闭包是对作用域的延伸，其他语言也有闭包的特性。

那什么是作用域？作用域指的是一个变量和函数的作用范围。

1、js中函数内声明的所有变量在函数体内始终是可见的；

2、在ES6中有全局作用域和局部作用域，但是没有没有块级作用域（catch只在其内部生效）；

3、局部变量的优先级高于全局变量。

二、作用域

我们来举几个栗子：

2.1变量提升

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 scope="global";
function scopeTest(){
    console.log(scope);
    scope="local"  
}
scopeTest(); //global
var scope="global";
function scopeTest(){
    scope="local" 
    console.log(scope);
}
scopeTest(); //local

2.2没有块级作用域

和我们其他常用语言不同的是，js中没有块级作用域

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.3作用域链

每个函数都有自己的执行上下文环境，当代码在这个环境中执行时候，会创建变量对象的作用域链，

那什么是作用域链？作用域链式是一个对象列表。

作用域链的作用？他保证了变量对象的有序访问。

作用域链开始的地方：当前代码执行环境的变量对象，常被称之为“活跃对象”（AO），变量的查找会从第一个链的对象开始，如果对象中包含变量属性，那么就停止查找，如果没有就会继续向上级作用域查找，直到找到全局对象中，如果找不到就会报ReferenceError。

2.4闭包

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

上面在函数中反悔了两个闭包，这两个闭包都维持着对外部作用域的引用，因此不管在哪调用都是能够访问外部函数中的变量。在一个函数内部定义的函数，闭包中会将外部函数的自由对象添加到自己的作用域中，所以可以通过内部函数访问外部函数的属性，这就是js模拟私有变量的一种方式。

注意：由于闭包会额外的附带函数的作用域（内部匿名函数携带外部函数的作用域），因此，闭包会比其他函数多占用些内存空间，过度使用会导致内存占用增加。

三、闭包面试题解

由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起了一个副作用，如果内部函数在一个循环中，那么变量的值始终为最后一个值。

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();    // 3
data[1]();    // 3
data[2]();    // 3

如果想强制返回逾期结果，怎么整？

方法一：立即执行函数

for (var i = 0; i < 3; i++) {
    (function(num) {
        setTimeout(function() {
            console.log(num);
        }, 1000);
    })(i);
}
// 0
// 1
// 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的副本，互不影响。

方法三：使用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()(); //local scope

代码2：

var scope = "global scope";
function checkscope(){

var scope = "local scope";
function f(){
    return scope;
}
return f;

}

var foo = checkscope();
foo(); //local scope

## 四、参考

1、https://segmentfault.com/a/1190000000618597

2、https://www.cnblogs.com/zhuzhenwei918/p/6131345.html

云服务器 GPU云服务器 javascript作用域链作用域链 javascript深入系列 javascript的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104232.html

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

摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

alanoddsoff 2019-08-23 13:47 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
JavaScript中的闭包

摘要：闭包引起的内存泄漏总结从理论的角度将由于作用域链的特性中所有函数都是闭包但是从应用的角度来说只有当函数以返回值返回或者当函数以参数形式使用或者当函数中自由变量在函数外被引用时才能成为明确意义上的闭包。文章同步到github js的闭包概念几乎是任何面试官都会问的问题,最近把闭包这块的概念梳理了一下,记录成以下文章。什么是闭包我先列出一些官方及经典书籍等书中给出的概念,这些概念虽然...

HmyBmny 2019-08-21 17:07 评论0 收藏0
【进阶2-1期】深入浅出图解作用域链和闭包

摘要：本期推荐文章从作用域链谈闭包，由于微信不能访问外链，点击阅读原文就可以啦。推荐理由这是一篇译文，深入浅出图解作用域链，一步步深入介绍闭包。作用域链的顶端是全局对象，在全局环境中定义的变量就会绑定到全局对象中。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周开始前端进阶的第二期，本周的主题是作用域闭包，今天是第6天。本...

levius 2019-08-23 13:47 评论0 收藏0
JS 闭包(closure)

摘要：对数组函数而言，相当于产生了个闭包。关于对象在闭包中使用对象也会导致一些问题。不过，匿名函数的执行环境具有全局性，因此其对象通常指向。由于声明函数时与声明函数时的值是不同的，因此闭包与闭包貌似将会表示各自不同的值。这几天看到闭包一章，从工具书到各路大神博客，都各自有着不同的理解，以下我将选择性的抄（咳咳，当然还是会附上自己理解的）一些大神们对闭包的原理及其使用文章，当作是自己初步理解...

nihao 2019-08-21 11:43 评论0 收藏0