JS百题斩~秒懂数据的作用域（超详细）

数据的作用域

定义：作用域是运行时代码中的变量，函数和对象的可访问性。通俗的意思就是数据在哪个范围是有效可用的，出了这个范围就不能用了。
作用域在哪，关键看在哪里定义的。
ES6之前没有块级作用域。

1.JS有两种作用域：全局作用域和函数作用域

全局作用域：在代码中任何地方都能访问到的对象拥有全局作用域。（所有未定义直接赋值的变量，自动声明为全局作用域）
函数作用域：函数作用域也叫局部作用域，指声明在函数内部的变量，函数的作用域一般只在固定代码片段中可访问到，例如函数内部。

全局作用域有弊端：如果我们写了很多行JS代码，变量定义都没有用函数包裹，那么他们就全部都在全局作用域中，这样就会污染全局命名空间，容易引起命名冲突。所以，很多第三方库的源码，所有的代码都在(function (){…})()立即执行函数中，这样保证里面的变量不会暴漏和外泄，污染全局变量，这就是函数作用域的作用。

作用域是分层，里面的作用域能访问外面的，反之不行，访问的时候从内向外依次查找。
如果在内部的作用域中访问了外部，则会形成闭包。
内部作用域能访问的外部，取决于函数定义的位置，和调用无关，这就是所谓的静态作用域（作用域不等于执行上下文）。

2.变量提升

作用域里面定义的变量、函数声明会提升到作用域顶部。

3.块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，会带来以下问题:
1.变量提升导致内层变量可能会覆盖外层变量；

var  a = 5;
function f(){console.log(a);if(true){var a = 6;       }
}
f();
// undefined

2.for循环里面用来计数的变量泄露为全局变量；

// 需求：五个按钮，点击某个按钮, 提示'第 n 个'
for (let i = 0; i < btns.length; i++) {btns[i].onclick = function () {console.log('第' + (i + 1) + '个')}
}
// 结果：点击任何一个按钮，都是弹出'第 6 个'
// 这是因为 i 泄露为全局变量，执行到点击事件时，此时 i 的值为 5

所以ES6新增了块级作用域。
块级作用域可通过 let 和 const 声明，声明的变量在指定代码块的作用域外无法被访问。块级作用域在下面的情况下被创建：
1.函数内部；
2.代码块内部，用一对花括号包裹；

4.作用域链

当js中使用一个变量的时候，首先会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上一层作用域找，一直找到该变量或者已经到了全局作用域，如果在全局作用域仍然找不到该变量，严格模式下会直接报错。
内部函数访问外部函数的变量，采取的是链式查找的方法来决定取哪个值，这种就称为作用域链。函数内部是根据就近原则来访问变量。

注意，变量的作用域，在创建时就已经确定好了，而非调用阶段确定的，所以某个作用于的上层作用域指的是包裹它的作用域，而非调用。

两个小练习：

// 下面的代码输出什么
var a = 1;
function f1() {a++;
}
function f2() {var a = 3;f1();console.log(a);
}
f2();
console.log(a);
// 3 2
// 内部作用域能访问的外部，取决于函数定义的位置，和调用无关。所以a++后打印的是2

// 下面的代码输出什么
var a = 1,b = 2;
function f() {console.log(a);var a = 2;function f1() {console.log(a, b);}f1();
}
f();
// undefined 3 2
// 作用域里面定义的变量、函数声明会提升到作用域顶部。所以打印第一个a时，变量a被提升到了f函数顶部,输出undefined