js 的执行环境、作用域链及块级作用域

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 11k | 阅读时长 ≈ 10 分钟
执行环境、作用域链以及 es6 的块级作用域都是 js 的基础知识

1. 什么是作用域

作用域是你的代码在运行时,某些特定部分中的变量,函数和对象的可访问性。换句话说，作用域决定了变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

2. JavaScript中的作用域

在 JavaScript 中有两种作用域

  • 全局作用域
  • 局部作用域

如果一个变量在函数外面或者大括号{}外声明,那么就定义了一个全局作用域,在ES6之前局部作用域只包含了函数作用域,ES6为我们提供的块级作用域,也属于局部作用域

2.1 全局作用域

拥有全局作用域的对象可以在代码的任何地方访问到, 在js中一般有以下几种情形拥有全局作用域:

  1. 最外层的函数以及最外层变量:
1
2
3
4
5
6
7
8
9
10
11
12
var globleVariable= 'global';  // 最外层变量
function globalFunc(){         // 最外层函数
    var childVariable = 'global_child';  //函数内变量
    function childFunc(){        // 内层函数
        console.log(childVariable);
    }
    console.log(globleVariable)
}
console.log(globleVariable);  // global
globalFunc();                 // global
console.log(childVariable)   // childVariable is not defined
console.log(childFunc)       // childFunc is not defined

从上面代码中可以看到globleVariable和globalFunc在任何地方都可以访问到, 反之不具有全局作用域特性的变量只能在其作用域内使用。

  1. 未定义直接赋值的变量(由于变量提升使之成为全局变量)
1
2
3
4
5
6
7
function func1(){
    special = 'special_variable';
    var normal = 'normal_variable';
}
func1();
console.log(special);    //special_variable
console.log(normal)     // normal is not defined

虽然我们可以在全局作用域中声明函数以及变量, 使之成为全局变量, 但是不建议这么做,因为这可能会和其他的变量名冲突,一方面如果我们再使用const或者let声明变量, 当命名发生冲突时会报错。

1
2
3
// 变量冲突
var globleVariable = "person";
let globleVariable = "animal"; // Error, thing has already been declared

另一方面如果你使用var申明变量，第二个申明的同样的变量将覆盖前面的,这样会使你的代码很难调试。

1
2
3
var name = 'koala'
var name = 'xiaoxiao'
console.log(name);  // xiaoxiao

2.2 局部作用域

和全局作用于相反，局部作用域一般只能在固定代码片段内可以访问到。最常见的就是函数作用域。

2.2.1 函数作用域

定义在函数中的变量就在函数作用域中。并且函数在每次调用时都有一个不同的作用域。这意味着同名变量可以用在不同的函数中。因为这些变量绑定在不同的函数中，拥有不同作用域，彼此之间不能访问。

1
2
3
4
5
6
7
8
//全局作用域
function test(){
    var num = 9;
    // 内部可以访问
    console.log("test中："+num);
}
//test外部不能访问
console.log("test外部:"+num);

注意点：

  • 如果在函数中定义变量时,如果不添加var关键字,造成变量提升，这个变量成为一个全局变量。
1
2
3
4
5
6
function doSomeThing(){
    // 在工作中一定避免这样写
    thing = 'writting';
    console.log('内部：'+thing);
}
console.log('外部:'+thing)
  • 任何一对花括号｛...｝中的语句集都属于一个块, 在es6之前，在块语句中定义的变量将保留在它已经存在的作用域中：
1
2
3
4
5
6
var name = '程序员成长指北';
for(var i=0; i<5; i++){
    console.log(i)
}
console.log('{}外部:'+i);
// 0 1 2 3 4  {}外部:5

我们可以看到变量name和变量i是同级作用域。

2.2.2 在ES6块级作用域未讲解之前注意点

变量提升

变量提升英文名字hoisting,MDN中对它的解释是变量申明是在任意代码执行前处理的，在代码区中任意地方申明变量和在最开始（最上面）的地方申明是一样的。也就是说，看起来一个变量可以在申明之前被使用！这种行为就是所谓的“hoisting”，也就是变量提升，看起来就像变量的申明被自动移动到了函数或全局代码的最顶上。 看一段代码：

1
2
3
4
5
6
7
var tmp = new Date();
function f() {
    console.log(tmp);
    if(false) {
        var tmp='hello';
    }
}

这道题应该很多小伙伴在面试中遇到过，有人会认为输出的是当前日期。但是正确的结果是undefined。这就是由于变量提升造成的，在这里申明提升了，定义的内容并不会提升，提升后对应的代码如下：

1
2
3
4
5
6
7
8
9
var tmp = new Date();
function f() {
    var tmp;
    console.log(tmp);
    if(false) {
        tmp='hello';
    }
}
f();

console在输出的时候，tmp变量仅仅申明了但未定义。所以输出undefined。虽然能够输出，但是并不推荐这种写法推荐的做法是在申明变量的时候，将所用的变量都写在作用域（全局作用域或函数作用域）的最顶上，这样代码看起来就会更清晰，更容易看出来哪个变量是来自函数作用域的，哪个又是来自作用域链

重复声明

看一个例子：

1
2
3
4
5
6
7
8
// var
var name = 'koloa';
console.log(name); // koala
if(true){
    var name = '程序员成长指北';
    console.log(name); // 程序员成长指北
}
console.log(name); // 程序员成长指北

虽然看起来里面name申明了两次，但上面说了，js的var变量只有全局作用域和函数作用域两种，且申明会被提升，因此实际上name只会在最顶上开始的地方申明一次，var name='程序员成长指北’的申明会被忽略，仅用于赋值。也就是说上面的代码实际上跟下面是一致的。

1
2
3
4
5
6
7
8
// var
var name = 'koloa';
    console.log(name); // koala
if(true){
    name = '程序员成长指北';
    console.log(name); // 程序员成长指北
}
console.log(name); // 程序员成长指北
变量和函数同时出现的提升

如果有函数和变量同时声明了，会出现什么情况呢？看下面但代码

1
2
3
console.log(foo);
var foo ='i am koala';
function foo(){}

输出结果是function foo(){},也就是函数内容

如果是另外一种形式呢？

1
2
3
console.log(foo);
var foo ='i am koala';
var foo=function (){}

输出结果是undefined

对两种结果进行分析说明：

第一种：函数申明。就是上面第一种，function foo(){}这种形式

另一种：函数表达式。就是上面第二种，var foo=function(){}这种形式

第二种形式其实就是var变量的声明定义，因此上面的第二种输出结果为undefined应该就能理解了。

而第一种函数申明的形式，在提升的时候，会被整个提升上去，包括函数定义的部分！因此第一种形式跟下面的这种方式是等价的！

1
2
3
var foo=function (){}
console.log(foo);
var foo ='i am koala';

原因是：

  1. 函数声明被提升到最顶上；
  2. 申明只进行一次，因此后面var foo='i am koala'的申明会被忽略。
  3. 函数申明的优先级优于变量申明，且函数声明会连带定义一起被提升（这里与变量不同）

接下来讲，在ES6中引入的块级作用域之后的事！

2.2.2 块级作用域

ES6新增了let和const命令，可以用来创建块级作用域变量，使用let命令声明的变量只在let命令所在代码块内有效。

let 声明的语法与 var 的语法一致。你基本上可以用 let 来代替 var 进行变量声明，但会将变量的作用域限制在当前代码块中。块级作用域有以下几个特点：

  • 变量不会提升到代码块顶部且不允许从外部访问块级作用域内部变量
1
2
3
4
5
6
console.log(bar);//抛出`ReferenceErro`异常: 某变量 `is not defined`
let bar=2;
for (let i =0; i<10;i++){
    console.log(i)
}
console.log(i);//抛出`ReferenceErro`异常: 某变量 `is not defined`

其实这个特点带来了许多好处，开发者需要检查代码时候，可以避免在作用域外意外但使用某些变量，而且保证了变量不会被混乱但复用，提升代码的可维护性。就像代码中的例子，一个只在for循环内部使用的变量i不会再去污染整个作用域。

  • 不允许反复声明

ES6的let和const不允许反复声明，与var不同

1
2
3
4
5
6
7
8
9
10
11
12
13
// var
function test(){
    var name = 'koloa';
    var name = '程序员成长指北';
    console.log(name); // 程序员成长指北
}

// let || const
function test2(){
    var name ='koloa';
    let name= '程序员成长指北'; 
    // Uncaught SyntaxError: Identifier 'count' has already been declared
}

看到这里是不是感觉到了块级作用域的出现还是很有必要的。

3. 作用域链

在讲解作用域链之前先说一下，先了解一下 JavaScript是如何执行的？

3.1 JavaScript是如何执行的？

img

JavaScript代码执行分为两个阶段：

3.1.1 分析阶段

javascript编译器编译完成，生成代码后进行分析

  • 分析函数参数
  • 分析变量声明
  • 分析函数声明

分析阶段的核心，在分析完成后（也就是接下来函数执行阶段的瞬间）会创建一个AO(Active Object 活动对象)

3.1.2 执行阶段

分析阶段分析成功后，会把给AO(Active Object 活动对象)给执行阶段

  • 引擎询问作用域，作用域中是否有这个叫X的变量
  • 如果作用域有X变量，引擎会使用这个变量
  • 如果作用域中没有，引擎会继续寻找（向上层作用域），如果到了最后都没有找到这个变量，引擎会抛出错误。

执行阶段的核心就是找,具体怎么找，后面会讲解LHS查询与RHS查询。

3.1.3 JavaScript执行举例说明

看一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function a(age) {
    console.log(age);
  
    var age = 20
    console.log(age);
  
    function age() { }
    console.log(age);
  
 		var age = function(){
  		return "var age"
  	}
  	console.log(age)
}
a(18);
/**
  ƒ age() {
    }
	20
	20
	ƒ (){
		return "var age"
	}
**/
首先进入分析阶段

前面已经提到了，函数运行的瞬间，创建一个AO (Active Object 活动对象)

1
2
AO = {}
复制代码

第一步：分析函数参数：

1
2
3
形式参数：AO.age = undefined
实参：AO.age = 18
复制代码

第二步，分析变量声明：

1
2
3
4
// 第3行代码有var age
// 但此前第一步中已有AO.age = 18, 有同名属性,不做任何事
即AO.age = 18
复制代码

第三步，分析函数声明：

1
2
3
// 第5行代码有函数age
// 则将function age(){}付给AO.age
AO.age = function age() {}

函数声明注意点：AO上如果有与函数名同名的属性,则会被此函数覆盖(因为该函数名及函数内容都提升到了该局部作用域的最上面)。但是以下面这种情况

1
2
3
var age = function () {
	console.log('25');
}

声明的函数并不会覆盖AO链中同名的属性（因为用 var 声明的函数的函数内容不会提升到该局部作用域的最上面，所以不会覆盖此声明函数之前的同名属性。详情见 函数名的提升）

进入执行阶段

分析阶段分析成功后，会把给AO(Active Object 活动对象)给执行阶段，引擎会询问作用域，找的过程。所以上面那段代码AO链中最初应该是

1
2
3
4
5
AO.age = function age() {}
//之后
AO.age=20
//之后
AO.age=20

所以最后的输出结果是：

1
2
3
4
5
function age(){
    
}
20
20

3.2 作用域链概念

看了前面一个完整的javascript函数执行过程，让我们来说下作用域链的概念吧。JavaScript上每一个函数执行时，会先在自己创建的AO上找对应属性值。若找不到则往父函数的AO上找，再找不到则再上一层的AO,直到找到大boss:window（全局作用域）。 而这一条形成的“AO链” 就是JavaScript中的作用域链。

3.3 找过程LHS和RHS查询特殊说明

LHS，RHS 这两个术语就是出现在引擎对变量进行查询的时候。在《你不知道的Javascript(上)》也有很清楚的描述。在这里，我想引用freecodecamp上面的回答来解释：

LHS = 变量赋值或写入内存。想象为将文本文件保存到硬盘中。 RHS = 变量查找或从内存中读取。想象为从硬盘打开文本文件。 Learning Javascript, LHS RHS

3.3.1 LHS和RHS特性

  • 都会在所有作用域中查询
  • 严格模式下，找不到所需的变量时，引擎都会抛出ReferenceError异常。
  • 非严格模式下，LHR稍微比较特殊: 会自动创建一个全局变量
  • 查询成功时，如果对变量的值进行不合理的操作，比如：对一个非函数类型的值进行函数调用，引擎会抛出TypeError异常

3.3.2 LHS和RHS举例说明

例子来自于《你不知道的Javascript(上)》

1
2
3
4
5
6
function foo(a) {
    var b = a;
    return a + b;
}
var c = foo( 2 );
复制代码

直接看引擎在作用域找这个过程： LSH（写入内存）：

1
2
c=, a=2(隐式变量分配), b=
复制代码

RHS(读取内存)：

1
2
3
读foo(2), = a, a ,b
(return a + b 时需要查找a和b)
复制代码

3.4 作用域链总结

最后对作用域链做一个总结，引用《你不知道的Javascript(上)》中的一张图解释

img

以上摘自：深入理解 JavaScript, 从作用域与作用域链开始

以下是《JavaScript高级程序设计（第三版）》的内容

执行环境及作用域

​ 执行环境（execution context，为简单起见，有时也称为“环境”）是 JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。

​ 全局执行环境是最外围的一个执行环境。根据 ECMAScript 实现所在的宿主环境不同，表示执行环境的对象也不一样。在 Web 浏览器中，全局执行环境被认为是 window 对象（第 7 章将详细讨论），因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁）。

​ 每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。ECMAScript 程序中的执行流正是由这个方便的机制控制着。

​ 当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。活动对象在最开始时只包含一个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。

​ 标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直至找到标识符为止（如果找不到标识符，通常会导致错误发生）。

请看下面的示例代码：

1
2
3
4
5
6
7
8
9
10
var color = "blue";
function changeColor(){
	if (color === "blue"){
		color = "red";
	} else {
		color = "blue";
	}
}
changeColor();
alert("Color is now " + color); // Color is now red

在这个简单的例子中，函数 changeColor()的作用域链包含两个对象：它自己的变量对象（其中定义着 arguments 对象）和全局环境的变量对象。可以在函数内部访问变量 color，就是因为可以在这个作用域链中找到它。
此外，在局部作用域中定义的变量可以在局部环境中与全局变量互换使用，如下面这个例子所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var color = "blue";
function changeColor(){
  var anotherColor = "red";
  function swapColors(){
    var tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;

 // 这里可以访问 color、anotherColor 和 tempColor
  }
 // 这里可以访问 color 和 anotherColor，但不能访问 tempColor
  swapColors();
}
// 这里只能访问 color
changeColor();

以上代码共涉及 3 个执行环境：全局环境、changeColor()的局部环境和 swapColors()的局部环境。全局环境中有一个变量 color 和一个函数 changeColor()。changeColor()的局部环境中有一个名为 anotherColor 的变量和一个名为 swapColors()的函数，但它也可以访问全局环境中的变量 color。swapColors()的局部环境中有一个变量 tempColor，该变量只能在这个环境中访问到。无论全局环境还是 changeColor()的局部环境都无权访问 tempColor。然而，在 swapColors()内部则可以访问其他两个环境中的所有变量，因为那两个环境是它的父执行环境。下图 形象地展示了前面这个例子的作用域链。

作用域链

上图 中的矩形表示特定的执行环境。其中，内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访

问内部环境中的任何变量和函数。这些环境之间的联系是线性、有次序的。每个环境都可以向上搜索作用域链，以

查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。对于这个例子中的

swapColors()而言，其作用域链中包含 3 个对象：swapColors()的变量对象、changeColor()的变量对象和全局变

量对象。swapColors()的局部环境开始时会先在自己的变量对象中搜索变量和函数名，如果搜索不到则再搜索上一

级作用域链。changeColor()的作用域链中只包含两个对象：它自己的变量对象和全局变量对象。这也就是说，它

不能访问 swapColors()的环境。

函数参数也被当作变量来对待，因此其访问规则与执行环境中的其他变量相同。

延长作用域链

虽然执行环境的类型总共只有两种——全局和局部（函数），但还是有其他办法来延长作用域链。这么说是因为有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。在两种情况下会发生这种现象。具体来说，就是当执行流进入下列任何一个语句时，作用域链就会得到加长：

  • try-catch 语句的 catch 块；

  • with 语句（这个是将要淘汰的语句）

这两个语句都会在作用域链的前端添加一个变量对象。对 with 语句来说，会将指定的对象添加到作用域链中。对 catch 语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。下面看一个例子。

1
2
3
4
5
6
7
function buildUrl() {
	var qs = "?debug=true";
	with(location){
		var url = href + qs;
	}
	return url;
}

在此，with 语句接收的是 location 对象，因此其变量对象中就包含了 location 对象的所有属性和方法，而这个变量对象被添加到了作用域链的前端。buildUrl()函数中定义了一个变量 qs。当在with 语句中引用变量 href 时（实际引用的是 location.href），可以在当前执行环境的变量对象中找到。当引用变量 qs 时，引用的则是在 buildUrl()中定义的那个变量，而该变量位于函数环境的变量对象中。至于 with 语句内部，则定义了一个名为 url 的变量，因而 url 就成了函数执行环境的一部分，所以可以作为函数的值被返回。

在 IE8 及之前版本的 JavaScript 实现中，存在一个与标准不一致的地方，即在catch 语句中捕获的错误对象会被添加到执行环境的变量对象，而不是 catch 语句的变量对象中。换句话说，即使是在 catch 块的外部也可以访问到错误对象。IE9 修复了这个问题。

没有块级作用域

JavaScript 没有块级作用域经常会导致理解上的困惑。在其他类 C 的语言中，由花括号封闭的代码块都有自己的作用域（如果用 ECMAScript 的话来讲，就是它们自己的执行环境），因而支持根据条件来定义变量。例如，下面的代码在 JavaScript 中并不会得到想象中的结果：

1
2
3
4
if (true) {
	var color = "blue";
}
alert(color); //"blue"

这里是在一个 if 语句中定义了变量 color。如果是在 C、C++或 Java 中，color 会在 if 语句执行完毕后被销毁。但在 JavaScript 中，if 语句中的变量声明会将变量添加到当前的执行环境（在这里是全局环境）中。在使用 for 语句时尤其要牢记这一差异，例如：

1
2
3
4
for (var i=0; i < 10; i++){
	doSomething(i);
}
alert(i); //10

对于有块级作用域的语言来说，for 语句初始化变量的表达式所定义的变量，只会存在于循环的环境之中。而对于 JavaScript 来说，由 for 语句创建的变量 i 即使在 for 循环执行结束后，也依旧会存在于循环外部的执行环境中。

  1. 声明变量
    使用 var 声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在 with 语句中，最接近的环境是函数环境。如果初始化变量时没有使用 var 声明，该变量会自动被添加到全局环境。如下所示：
1
2
3
4
5
6
function add(num1, num2) {
	var sum = num1 + num2;
	return sum;
}
var result = add(10, 20); //30
alert(sum); //由于 sum 不是有效的变量，因此会导致错误

以上代码中的函数 add()定义了一个名为 sum 的局部变量，该变量包含加法操作的结果。虽然结果值从函数中返回了，但变量 sum 在函数外部是访问不到的。如果省略这个例子中的 var 关键字，那么当 add()执行完毕后，sum 也将可以访问到：

1
2
3
4
5
6
function add(num1, num2) {
	sum = num1 + num2;
	return sum;
}
var result = add(10, 20); //30
alert(sum); //30

这个例子中的变量 sum 在被初始化赋值时没有使用 var 关键字。于是，当调用完 add()之后，添加到全局环境中的变量 sum 将继续存在；即使函数已经执行完毕，后面的代码依旧可以访问它。

在编写 JavaScript 代码的过程中，不声明而直接初始化变量是一个常见的错误做法，因为这样可能会导致意外。我们建议在初始化变量之前，一定要先声明，这样就可以避免类似问题。在严格模式下，初始化未经声明的变量会导致错误。

  1. 查询标识符
    当在某个环境中为了读取或写入而引用一个标识符时，必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链的前端开始，向上逐级查询与给定名字匹配的标识符。如果在局部环境中找到了该标识符，搜索过程停止，变量就绪。如果在局部环境中没有找到该变量名，则继续沿作用域链向上搜索。搜索过程将一直追溯到全局环境的变量对象。如果在全局环境中也没有找到这个标识符，则意味着该变量尚未声明。
    通过下面这个示例，可以理解查询标识符的过程：

    1
    2
    3
    4
    5
    var color = "blue";
    	function getColor(){
    	return color;
    }
    alert(getColor()); //"blue"

    调用本例中的函数 getColor()时会引用变量 color。为了确定变量 color 的值，将开始一个两步的搜索过程。首先，搜索 getColor()的变量对象，查找其中是否包含一个名为 color 的标识符。在没有找到的情况下，搜索继续到下一个变量对象（全局环境的变量对象），然后在那里找到了名为color 的标识符。因为搜索到了定义这个变量的变量对象，搜索过程宣告结束。下图形象地展示了上述搜索过程。

    1584182027398

    在这个搜索过程中，如果存在一个局部的变量的定义，则搜索会自动停止，不再进入另一个变量对象。换句话说，如果局部环境中存在着同名标识符，就不会使用位于父环境中的标识符，如下面的例子
    所示：

    1
    2
    3
    4
    5
    6
    var color = "blue";
    function getColor(){
    	var color = "red";
    	return color;
    }
    alert(getColor()); //"red"

    修改后的代码在 getColor()函数中声明了一个名为 color 的局部变量。调用函数时，该变量就会被声明。而当函数中的第二行代码执行时，意味着必须找到并返回变量 color 的值。搜索过程首先从局部环境中开始，而且在这里发现了一个名为 color 的变量，其值为"red"。因为变量已经找到了，所以搜索即行停止，return 语句就使用这个局部变量，并为函数会返回"red"。也就是说，任何位于局部变量 color 的声明之后的代码，如果不使用 window.color 都无法访问全局 color变量。

模仿块级作用域

如前所述，JavaScript 没有块级作用域的概念。这意味着在块语句中定义的变量，实际上是在包含函数中而非语句中创建的，来看下面的例子。

1
2
3
4
5
6
function outputNumbers(count){
	for (var i=0; i < count; i++){
		alert(i);
	}
	alert(i); //计数
}

这个函数中定义了一个 for 循环，而变量 i 的初始值被设置为 0。在 Java、C++等语言中，变量 i 只会在 for 循环的语句块中有定义，循环一旦结束，变量 i 就会被销毁。可是在 JavaScrip 中，变量 i是定义在 ouputNumbers()的活动对象中的，因此从它有定义开始，就可以在函数内部随处访问它。即使像下面这样错误地重新声明同一个变量，也不会改变它的值。

1
2
3
4
5
6
7
function outputNumbers(count){
	for (var i=0; i < count; i++){
	alert(i);
	}
	var i; //重新声明变量
	alert(i); //计数
}

JavaScript 从来不会告诉你是否多次声明了同一个变量；遇到这种情况，它只会对后续的声明视而不见（不过，它会执行后续声明中的变量初始化）。匿名函数可以用来模仿块级作用域并避免这个问题。用作块级作用域（通常称为私有作用域）的匿名函数的语法如下所示。

1
2
3
(function(){
//这里是块级作用域
})();

以上代码定义并立即调用了一个匿名函数。将函数声明包含在一对圆括号中，表示它实际上是一个函数表达式。而紧随其后的另一对圆括号会立即调用这个函数。如果有读者感觉这种语法不太好理解，可以再看看下面这个例子。

1
2
var count = 5;
outputNumbers(count);

这里初始化了变量 count，将其值设置为 5。当然，这里的变量是没有必要的，因为可以把值直接传给函数。为了让代码更简洁，我们在调用函数时用 5 来代替变量 count，如下所示。

1
outputNumbers(5);

这样做之所以可行，是因为变量只不过是值的另一种表现形式，因此用实际的值替换变量没有问题。再看下面的例子。

1
2
3
4
var someFunction = function(){
//这里是块级作用域
};
someFunction();

这个例子先定义了一个函数，然后立即调用了它。定义函数的方式是创建一个匿名函数，并把匿名函数赋值给变量 someFunction。而调用函数的方式是在函数名称后面添加一对圆括号，即someFunction()。通过前面的例子我们知道，可以使用实际的值来取代变量 count，那在这里是不是也可以用函数的值直接取代函数名呢？ 然而，下面的代码却会导致错误。

1
2
3
function(){
//这里是块级作用域
}(); //出错！

这段代码会导致语法错误，是因为 JavaScript 将 function 关键字当作一个函数声明的开始，而函数声明后面不能跟圆括号。然而，函数表达式的后面可以跟圆括号。要将函数声明转换成函数表达式，只要像下面这样给它加上一对圆括号即可。

1
2
3
(function(){
//这里是块级作用域
})();

无论在什么地方，只要临时需要一些变量，就可以使用私有作用域，例如：

1
2
3
4
5
6
7
8
function outputNumbers(count){
	(function () {
		for (var i=0; i < count; i++){
			alert(i);
		}
	})();
	alert(i); //导致一个错误！
}

在这个重写后的 outputNumbers()函数中，我们在 for 循环外部插入了一个私有作用域。在匿名函数中定义的任何变量，都会在执行结束时被销毁。因此，变量 i 只能在循环中使用，使用后即被销毁。而在私有作用域中能够访问变量 count，是因为这个匿名函数是一个闭包，它能够访问包含作用域中的所有变量。

这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说，我们都应该尽量少向全局作用域中添加变量和函数。在一个由很多开发人员共同参与的大型应用程序中，过多的全局变量和函数很容易导致命名冲突。而通过创建私有作用域，每个开发人员既可以使用自己的变量，又不必担心搞乱全局作用域。例如：

1
2
3
4
5
6
(function(){
	var now = new Date();
	if (now.getMonth() == 0 && now.getDate() == 1){
		alert("Happy new year!");
	}
})();

把上面这段代码放在全局作用域中，可以用来确定哪一天是 1 月 1 日；如果到了这一天，就会向用户显示一条祝贺新年的消息。其中的变量 now 现在是匿名函数中的局部变量，而我们不必在全局作用域中创建它。

这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了。

以上摘自《JavaScript高级程序设计（第3版）》

块级作用域

为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

1
2
3
4
5
6
7
8
9
10
var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

1
2
3
4
5
6
7
var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6 的块级作用域

let实际上为 JavaScript 新增了块级作用域。

1
2
3
4
5
6
7
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

ES6 允许块级作用域的任意嵌套。

1
2
3
4
{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

上面代码使用了一个五层的块级作用域，每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

1
2
3
4
{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

1
2
3
4
5
6
7
8
9
10
11
// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

块级作用域与函数声明

函数能不能在块级作用域之中声明？这是一个相当令人混淆的问题。

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

1
2
3
4
5
6
7
8
9
10
11
// 情况一
if (true) {
  function f() {}
}

// 情况二
try {
  function f() {}
} catch(e) {
  // ...
}

上面两种函数声明，根据 ES5 的规定都是非法的。

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

1
2
3
4
5
6
7
8
9
10
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下。

1
2
3
4
5
6
7
8
9
// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？

1
2
3
4
5
6
7
8
9
10
11
12
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

上面的代码在 ES6 浏览器中，都会报错。

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

  • 允许在块级作用域内声明函数。
  • 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
  • 同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。上面的例子实际运行的代码如下。

1
2
3
4
5
6
7
8
9
10
11
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

另外，还有一个需要注意的地方。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

1
2
3
4
5
6
7
// 第一种写法，报错
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
  let x = 1;
}

上面代码中，第一种写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错。第二种写法有大括号，所以块级作用域成立。

函数声明也是如此，严格模式下，函数只能声明在当前作用域的顶层。

1
2
3
4
5
6
7
8
9
10
// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

参考

《JavaScript高级程序设计（第3版）》

块级作用域：https://es6.ruanyifeng.com/#docs/let#块级作用域

block：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/block

var：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/var

let：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

const：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const

-------文章到此结束  感谢您的阅读-------