详解 JavaScript 作用域

JavaScript 的作用域一直是前端开发和前端面试中难以理解的知识点，一不留神就入坑了，小编写这篇文章，就是来填坑的，好了，直接开始。

1. JavaScript 无块级作用域

什么是块级作用域？其实就是占地盘，画个圈圈说这块地盘是我的，只有我能在这个区域里作，例如，这个 “{ }” 大括号。
那无块级作用域又是什么意思呢？就是即便你画了个圈，但凭啥你说这是你地盘就是你地盘，我在圈外面就想插一脚玩玩。
例子1：
JavaScript 无块级作用域

function Fun()  { 
     if(true) {
          var name = 'yes';
    }
    console.log(name);
};
Fun();
// yes

这里 if(true) 后面的 {...} 是一个块级作用域，根据输出结果，可以知道 console.log(name) 是可以访问 var name = 'yes' 的，等同于别人在你家门外就能拿你家里的东西。
不过在 ES6 中，引入了 let 关键字，用于指定变量属于块级作用域。也就是说JavaScript 也有块级作用域了。
例子2：
JavaScript 有块级作用域

function Fun()  { 
     if(true) {
          let name = 'yes';
    }
    console.log(name);
};
Fun();
// undefined

引用 let 替换 var 后，生成了块级作用域，console.log(name) 访问不到大括号里面的内容了。

2. JavaScript 函数作用域

JavaScript 中每个函数作为一个作用域，外部是无法访问作用域内部的变量的。
例子3：

function Fun() {
    var x = 1;
    var y = 2;
    console.log(x); 
}
Fun();
console.log(y);
// 1   ReferenceError: y is not defined......

“函数作用域”还是比较厉害的，自己家的东西管的很严格，别人看都不让看。

3. JavaScript 作用域链

JavaScript中的每个函数作为一个作用域，如果出现函数之间互相嵌套，就会出现作用域链。
例子4：

x = 1;
function Fun() {
      var x = 2;
      function main() {
            var x = 3;
            console.log(x);
      }
      main();
}
Fun();
// 3

两个函数互相嵌套，形成三个作用域组成的作用域链（不要忘记全局作用域），这种情况下，寻找变量就要按照顺序。

执行console.log(x)时，按照作用域有内而外的优先级寻找，很明显，应该先在

   function main() {
      var x = 3;
      console.log(x);
   }

找到了 var x = 3，最后结果就是3。修改例子3，如下：

 x = 1;
 function Fun() {
     var x = 2;
     function main() {
           console.log(x);
     }
     main();
 }
 Fun();
 // 2

依次类推，如果最后找不到则报错。

这里，顺便讲一下JavaScript 变量提升。

4. JavaScript 变量提升

有时候也称之为声明提前，变量声明提升等等，其实都是一个意思。
什么是变量提升，即变量可以在声明之前使用，说的简单点，就是声明的这个变量它比较喜欢往前凑热闹。

JavaScript 中不创建变量，直接使用，结果是报错的

 console.log(x);
 // ReferenceError: x is not defined...

创建变量但是不赋值，结果是 undefined

 var x;
 console.log(x);
 // undefined

创建变量并赋值，结果输出正常

 var x = 3;
 console.log(x);
 // 3

注意：这里 var x = 3 在实际执行过程中是这样的，明白这点很重要。
var x;
x = 3;
我们看下面这个例子
例子5：

    function Fun() {
        console.log(x);
        var x = '5';
    }
    Fun();
    // undefined

为什么输出的是 undefined，而不是直接报错或者输出“5”呢？请看原因：这个时候，变量提升和刚才的“明白这点很重要”该出马了。在 JavaScript 被执行之前，有一个“预编译”的过程，这期间代码变成这样了
function Fun() {
var x; // 看到了没，我跑前面来了哦
console.log(x);
x = '5'; // 赋值语句位置不变，声明语句提前
}
Fun();

喜欢的童鞋，可以关注一下我('ᴗ' )و