一、作用域

作用域：能够储存变量当中的值，并且能在之后对这个值进行访问或修改。

---

1.1 词法作用域

历史：基础的作用域分为两种，词法作用域与动态作用域，js等大多数都采用的是词法作用域。只有如Bash脚本采用动态作用域。

定义：

所谓的词法（代码）作用域：就是代码在编写过程中体现出来的作用范围，代码一旦写好，不用执行，作用范围就已经确定好了。

类型

词法作用域包括 全局作用域与函数作用域。
简单来说：全局作用域就是函数外的，是共享的；函数作用域就是函数内部的，是私有的。

在JS中词法作用域的规则：（）

• 函数允许访问函数外部的数据
• 整个代码结构中只有函数可以限定作用域
• 变量申明分显式申明和隐式申明，var i=100（显式申明 ）；i=100（隐式申明） ，隐式申明被当做全局变量。
• 作用规则首先使用提升规则分析（变量提升与函数提升）
• 如果当前作用域中有了名字了，就不通过作用域链查找了

demo1：访问函数外数据

var num = 123;
function foo(){
    console.log( num );
}
foo();    //123

demo2：限定作用域

function foo(){
  var num = 123;    
}
foo();    
console.log( num ); // 抛错num没有被定义

demo3：隐式声明变成全局变量

// 非严格模式下
function foo(){
  num = 456;    
}
foo();    
console.log( num ); // 456

demo4：变量提升

if( false ){
    var num = 123;
}
console.log( num ); //undefined

demo5：当前作用域中有了名字了，就不通过作用域链查找

var  num = 123;
function foo () {
    var num = 456;
    function func(){
        console.log( num );
     }
     func();
}
foo();    //456

---

1.2 块级作用域

出现解决了两个问题：

1）变量提升导致内层变量可能会覆盖外层变量

var i = 5;
function f() {
  console.log(i);
  let i = 6; // 改成var i = 6 试一下
}
f(); // i is not defined

2）用来计数的循环变量泄露为全局变量

for (let i = 0; i < 10; i++) { }    // 改成var 试一下
console.log(i);  // i is not defined

3）解决闭包问题

'use strict';
var arr = [];
for(let i = 0; i < 2; i++){  // 改成var 试一下
    arr[i] = function(){
        console.log(i);
    };
};
arr[1]();//1

let

(1)let声明的变量只在块级有效

if (true) {
  let i = 6;
  console.log('inside: ' + i);
}
console.log('outside: ' + i);

(2)let 确实存在提升。只不过由于暂时死区的限制，你不能在 let x 之前使用

console.log(i); //i is not defined
let i = 1;

如果你在项目中打印这句话，发现是打印underfined，原因是babel转译了let变成var了，而真正的let是通过ECMAScript去实现的。所以此时的let存在变量提升。去chrome控制台打印就好了。

const

const是用来声明恒定变量的，声明的同时就必须赋值，否则会报错。必须是const a = 1，如下面代码就会报错。

const a;
a = 1 // 报错

二、作用域链

描述

只有函数才能制造作用域结构，那么只要是代码，至少有一个作用域，即全局作用域。

作用域查找方法

方法1：域气泡区分作用域

demo

function foo(a) {
  var b = a * 2;
  function bar(c) {
    console.log(a, b, c);
  }
  bar(b * 3);
}
foo(2); // 2, 4, 12

为了好理解，我们把它分为三层嵌套气泡图形。

image.png
1、包含着整个全局作用域，其中只有一个标识符:foo。
2、包含着 foo 所创建的作用域，其中有三个标识符:a、bar 和 b。
3、包含着 bar 所创建的作用域，其中只有一个标识符:c。

查找

它从最内层的作用域3开始查找，我们查找a，在最内层的bar函数内没找到，继续向上在foo函数找a，找到了是2，那么查找a结束j，a=2。（要记住找到a就结束了，不会再往上层查找了，这个叫做 “遮蔽效应” ）。

方法2：绘制作用域图：

1、首先看变量在第几条链上，在该链上看是否有变量的定义与赋值，如果有直接使用
2、如果没有到上一级链上找（ n - 1 级链）,如果有直接使用，停止继续查找。
3、如果还没有在此往上找… 直到全局链（0级），还没有就是is not defined
4、注意，切记：同级的链不可混合查找

demo

function f1() {
    var num = 123;
    function f2() {
        console.log( num ); 
     }
    f2();
}
var  num = 456;
f1();    //123

image.png
解析步骤：
第一步：找到0级链：函数f1 、变量 num=456。
第二步：找到1级链：函数f1下的 var num = 123与函数f2。
第三步：找到2级链：函数f2下的 console.log( num )。
第四步：调用f1()，f1()中调用了f2()，进入2级链console.log( num )，f2内没有num，向1级链查找，找到var num = 123，结束。

更复杂的场景demo分析：

var num = 123;
function f1() {
    console.log( num );
}
function f2(){
    var num = 456;
    f1();
}
f2();    //123

解析步骤：
第一步：找到0级链：var num = 123、函数f1、函数f2。
第二步：找到1级链：函数f1下的console.log( num )、函数f2下的var num = 456与f1()。
第三步：调用f2()，函数f2中调用了f1()，此时我们找到函数fn1最内层的作用域链是1级链，发现f1中没有num，就往0级链去查找，找到var num = 123。

结论：

作用域链查找，简单的推荐域气泡法，直接从最内层开始找，对于复杂场景可以使用绘制作用域链路图方式。

---

更多内容可以看我的集录： 全面攻陷js：更新中...