JavaScript中的实行环境、作用域、作用域链、闭包一向是一个异常有意思的话题，许多博主和大神都分享过相干的文章。这些学问点不仅比较笼统，不轻易邃晓，更主要的是与这些学问点相干的题目在口试中高频涌现。之前我也看过不少文章，依旧是似懂非懂，迷迷糊糊。近来，细致捋了捋相干题目的思绪，对这些题目的邃晓清楚深入了不少，在这里和人人分享。

本文已同步至我的个人主页。迎接接见检察更多内容！若有毛病或脱漏，迎接随时斧正讨论！感谢人人的关注与支撑！

这篇文章，我会根据实行环境、作用域、作用域链、闭包的递次，连系着JS中函数的运转机制来梳理相干学问。由于如许的递次恰好也是这些学问点互相关联且递进的递次，同时这些学问点都又与函数有着千丝万缕的联络。如许解说，会更轻易让人人完全邃晓，最少我就是如许邃晓清楚的。

空话不再多说，我们最先。

实行环境

起首，我们照样要邃晓一下什么是实行环境，这也是理清背面题目的基本。

实行环境是JavaScript中最为主要的一个观点。实行环境定义了变量或函数有权接见的其他数据，决议了它们各自的行动。——《JavaScript高等程序设计》

笼统！不邃晓！没紧要，我来诠释：实在，实行环境就是JS中提出的一个观点，它是为了保证代码合理运转采纳的一种机制。

一种观点…机制…更笼统，那它究竟是什么？实际上，实行环境在JS机制内部就是用一个对象来示意的，称作实行环境对象，简称环境对象。

那末，这个实行环境对象究竟又是什么时刻、怎样发生的呢？有以下两种状况：

1. 在页面中的剧本最先实行时，就会发生一个“全局实行环境”。它是最外围（局限最大，或许说层级最高）的一个实行环境，对应着一个全局环境对象。在Web浏览器中，这个对象就是Window对象。
2. 当一个函数被挪用的时刻，也会建立一个属于该函数的实行环境，称作“部分实行环境”（或许称作函数实行环境），它也对应着本身的环境对象。

因而，实行环境就分为全局实行环境和部分实行环境两种，每一个实行环境都有一个属于本身的环境对象。

既然实行环境是运用一个对象示意的，那末对象就有属性。我们来看看环境对象的三个有意思的属性。变量对象、[[scope]]、this。

环境对象中的变量对象

《JS高程》中邃晓申明，实行环境定义了变量或函数有权接见的其他数据。那末这些数据究竟被放（存储）在那里呢？

实在，每一个实行环境都有一个与之关联的变量对象，在环境中定义的一切变量和函数都保留在这个对象中。我们在代码无法接见这个对象，但解析器在处置惩罚数据时会在内部运用它。

浅显地说就是：一个实行环境中的一切变量和函数都保留在它对应的环境对象的变量对象（属性）中。

熟悉[[scope]]前先邃晓作用域

在讲[[scope]]前，我们就须要先弄清楚什么是作用域了。由于作用域与[[scope]]之间存在着异常严密的关联。

《JS高程》中没有邃晓给出作用域的定义和形貌。实在，作用域就是变量或许函数能够被接见的代码局限，或许说作用域就是变量和函数所起作用的局限。

如许看来作用域也像是一个观点，它是用来形貌一个地区（或许说局限）的。在JS中，作用域分为全局作用域、部分作用域两种。

我们来看看这两种作用域的详细形貌：

①在页面中的剧本最先实行时，就会发生一个“全局作用域”。它是最外围（局限最大，或许说层级最高）的一个作用域。全局作用域的变量、函数
能够在代码的任何处所接见到。
②当一个函数被建立的时刻，会建立一个“部分作用域”。部分作用域中的函数、变量只能在某些部分代码中能够接见到。

看一个例子：

var g = 'Global';

function outer() {
  var out = 'outer';

  function inner() {
    var inn = 'inner';
  }
} 

上面这个例子，发生的作用域就如下图所示：

请注重上面①、②这两段话！！！是否是以为很熟悉，素昧平生？！没错，这两段话和引见全局/部分实行环境（全局/部分环境对象）时刻的形貌险些一摸一样！作用域是否是和环境对象有着千丝万缕的联络呢？与此同时，我们再细致回想一下：1、作用域就是变量或许函数能够被接见的代码局限。2、一个实行环境中定义的一切变量和函数都保留在它对应的环境对象中。

连系上面所述，实在不难得出：只管作用域的形貌更像是一个观点，但假如一定要将它具象化，问它究竟是什么东西，与实行环境有什么关联？实在，作用域所对应的（不是相称、即是）是环境对象中的变量对象。

邃晓了这些，我们就可以够来看看环境对象中的[[scope]]属性。

环境对象中的[[scope]]

起首，要邃晓的是，环境对象中的[[scope]]属性值是一个指针，它指向该实行环境的作用域链。

究竟什么是作用域链呢？作用域链实质上就是一个有序的列表，而列表中的每一项都是一个指向差别环境对象中的变量对象的指针。

那末，这个作用域链究竟是怎样构成的呢？它内里指向变量对象的指针的递次又是怎样划定的呢？我们用下面这个简朴的例子申明。

var g = 'Hello';

function inner() {
  var inn = 'Inner';
  var res = g + inn;
  return res;
}

inner();

当实行了inner();这一行代码后，代码实行流进入inner函数内部，此时，JS内部会先建立inner函数的部分实行环境，然后建立该环境的作用域链。这个作用域链的最前端，就是inner实行环境本身的环境对象中的变量对象，作用域链第二项，就是全局环境的环境对象中的变量对象。这条作用域链如下图所示：

构成了如许的作用域链以后，就可以够有秩序地接见一个变量了。以这个例子为例：当实行inner();进入函数体内后，实行g + inn;一行，须要接见变量g、inn，此时JS内部机制就会沿着这条作用域链查找所需变量。在当前inner函数的作用域中找到了变量inn，值为'Inner'，查找停止。然则却没有找到变量g，因而沿着作用域链向上查找，进入全局作用域，在全局变量对象中找到了变量g，值为'Hello'，查找停止。盘算得出res为'HelloInner'，并在末了返回效果。

与上面所讲机制完全相同，假如是多层实行环境嵌套，则作用域链是这么构成的：

当代码实行进入一个实行环境时，JS内部会最先建立该环境的作用域链。作用域链的
最前端，一向都是
当前实行环境的实行环境对象中的变量对象。假如这个环境是
部分实行环境（函数实行环境），则将其
运动对象作为
变量对象。作用域链中的下一个是来自
外层环境对象的变量对象，而再下一个则是来自
再外层环境对象的变量对象…… 如许
一向延续到全局环境对象的变量对象。所以，全局实行环境的变量对象一向都是作用域链中的末了一个对象。

讲到这里，能够你已对实行环境、实行环境对象、变量对象、作用域、作用域链的邃晓已他们之间的关联有了一个较清楚的熟悉。也有能够，对这么多的笼统题目照样有些懵懵懂懂。没紧要，我们用下面这一张图，将上面的一切内容串连起来，来直观感觉和邃晓他们。

var g = 'Global';
function outer() {
  var out = 'outer';
  function inner() {
    var inn = 'inner';
  }
  inner();
}
outer();

关于这张图，有一些须要注重的处所：

1. 当函数挪用时，才会建立函数的实行环境和它的环境对象，再建立函数的运动对象，再建立函数环境的作用域链。
2. 上图中心一列变量对象中，outer、inner的变量对象实际上是该函数的运动对象。全局环境是没有运动对象的，只要在函数环境中，才会运用函数的运动对象来作为它的变量对象。
3. 函数的运动对象，是在函数建立时运用函数内置的arguments类数组和其他定名参数来初始化的。所以实际上，函数的变量对象中应当还包含一个指向arguments类数组的指针。

有了对作用域、作用域链的邃晓，末了，我们来讲一说闭包。

闭包

什么是闭包

闭包就是有权接见另一个函数作用域中的变量的函数。——《JavaScript高等程序设计》

关于闭包，最简朴的大白话能够这么邃晓：

①外部函数声明内部函数，内部函数援用外部函数的部分变量，这些变量不会被开释！——这是我曾看到的他人的说法

或许这么邃晓：

②当在一个函数中返回另一个函数的时刻（是返回一个函数，不是返回函数的挪用或许函数的实行效果），就会构成闭包，被返回的这个函数就叫做闭包函数。——这是我本身的邃晓

上面两句话看似差别，实在实质是一样的。来看一个最简朴的闭包的例子：

function sum() {
  var num1 = 100;

  // 这里返回的是函数(体)，不是函数的挪用
  return function(num2) {
    return num1 + num2;
  }
}

// 此时result指向sum返回的谁人匿名函数
// 注重！此时该匿名函数并没有被实行
let result = sum()；

result(200);

那末，上面几行代码，为何就会构成闭包呢？我们来剖析一下，代码实行中JS内部究竟做了什么？

起首，有一点必需邃晓，就是平常状况下，一个函数实行完内部的代码，函数挪用时所建立的实行环境、环境对象（包含变量对象、[[scope]]等）都会被烧毁，它们的生命周期就只要函数挪用到函数实行完毕这一段时候。

然则上面的例子，就会涌现破例。

当实行sum()时，挪用该函数，建立它的环境对象，个中作用域链中第一项是本身环境的变量对象，第二项是全局环境的变量对象。当建立匿名函数的时刻，也会建立匿名函数的环境对象，个中作用域链第一项是本身环境的变量对象，第二项是sum环境的变量对象，第三项是全局变量对象。

这时候，题目就来了。按说，当函数sum实行完return以后，他的实行环境、变量对象、作用域链都会被烧毁。但是这时候刻却不能烧毁他的变量对象，由于返回的匿名函数（此时由result指向该函数）并没有实行，这个匿名函数的作用域链中还援用着sum函数的变量对象。换句话说，纵然，sum实行完了，实在行环境的作用域链会被烧毁，然则它的变量对象还会保留在内存中，我们在sum函数外部，还能接见到它内部的变量num1、num2，这就是构成闭包的真正缘由。然则，当result()实行完后，这些变量对象、作用域链就会被烧毁。

闭包存在的题目

由于闭包构成后，会在函数实行完仍将他的变量对象保留在内存中，当援用时候太长或许援用对象许多的时刻，会占用大批内存，严重影响机能。

来看下面的例子：（这个例子曾是Tencent微众银行的笔试原题，涌现在《JS高程》的7.2.3章节——P184）

function assignHandler() {
  var element = document.getElementById("someElement");
  element.onclick = function(){
    alert(element.id);
  };
}

assignHandler函数中定义的匿名函数是作为element元素的事宜处置惩罚函数的，且内部运用了element元素（接见元素的id`），因而assignHandler函数实行完，关于element的援用也会一向存在，element元素会一向保留在内存中。

将上面的例子改成下面如许，就可以处理这个题目。

function assignHandler(){
  var element = document.getElementById("someElement");

  // 这里猎取element的id，为其建立一个副本
  // 如许是为了在下面事宜处置惩罚函数中消除对element元素的援用
  var id = element.id;

  element.onclick = function(){
    alert(id);
  };

  // 将element置为null，断开对element元素的援用
  // 如许轻易渣滓接纳机制接纳element所占的内存
  element = null;
}