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();
喜欢的童鞋，可以关注一下我('ᴗ' )و
