理解作用域与作用域链

一、作用域

简单来说，某个变量或函数可以访问的范围就是其作用域。
ES5中只有全局作用域和函数作用域，ES6新增了块级作用域。

1.函数作用域

1.1 拥有函数作用域的情况（1种）

在函数内声明的变量和函数拥有函数作用域

var a = 'global';

function fn() {
    var a = 'function';
    console.log(a); // 'function' 
}
fn();
console.log(a); // 'global'

1.2 函数作用域的特性

1. 函数作用域在函数调用时创建，在函数执行完后销毁；
2. 每调用一次函数就会创建一个新的函数作用域，并且相互独立。
3. 全局作用域无法访问函数作用域的函数和变量。并且不同作用域中即使变量和函数名称相同，也互不干涉，互不影响。

2.全局作用域

2.1 拥有全局作用域的情况（3种）

1. 显式声明：在<script>标签下或.js文件中声明的函数或变量拥有全局作用域

<script>
	var a = 'global'; // 全局作用域的变量
	function fn(){ // 全局作用域的函数
		console.log('fn');
	}
	fn();
</script>

2. 隐式声明：所有末定义直接赋值的变量拥有全局作用域。

a = "全局未定义1";
console.log(window.a); // "全局未定义1"
function fn(){
    b="全局未定义2";
};
fn();
console.log(window.b); // "全局未定义2"

3. 所有window对象的属性和方法拥有全局作用域。

function fn(){
    console.log(location);
}
fn();

2.2 全局作用域的特性

1. 拥有全局作用域的变量和函数在页面打开时创建，页面关闭时销毁。
2. 在全局作用域下声明的变量都会作为 window 对象的属性保存。

var a = 'global'; // 全局作用域定义的变量
console.log(a); // 'global'
console.log(window.a); // 'global'

3. 在全局作用域下声明的函数都会作为 window 对象的方法保存。

function fn(){
	console.log('fn');
}
fn();       // 'fn'
window.fn();// 'fn'

4. 在全局作用域中有一个全局对象 window（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。

3.块级作用域

3.1 拥有块级作用域的情况（1种）

通过let, const关键字声明的变量，被大括号{}包含的就是块级作用域。例如if语句，for语句，switch语句等。在块级作用域中声明的变量只在其声明的代码块中有效。

{
    const a = 'block';
    console.log(a); // 'block'
}
console.log(a); // Uncaught ReferenceError: a is not defined

3.2 块级作用域的特性

（1）暂时性死区（没有变量提升，与var不同）

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

在块级作用域中，在let,const声明变量之前都属于该变量的 “死区”（TDZ）。

if (true) {
   // TDZ开始
   foo = 'abc';
   console.log(foo); // Uncaught ReferenceError: Cannot access 'foo ' before initialization

   let foo; // TDZ结束
   console.log(foo); // undefined

   foo = 123;
   console.log(foo); // 123
}

（2）不允许重复声明

二、变量与函数的声明提前

在JavaScript 中，函数和变量的声明都将被提升到其作用域的顶端。

1.变量提升

（1）只有使用var关键字声明的变量会被提升，其初始化的值不会被提升。

console.log(foo); // undefined
var foo = 123;

相当于

var foo;
console.log(foo); // undefined
foo = 123;

（2）不使用var声明的变量没有变量提升。

console.log(foo); // Uncaught ReferenceError: foo is not defined
foo = 123;

2.函数的声明提前

（1）使用函数声明形式创建的函数（function 函数名() {};），它会在所有代码执行之前就被创建，所以可以先调用函数，再声明函数。

foo(); // 'foo'
function foo(){
    console.log('foo');
};

（2）使用函数字面量形式创建的函数（var 变量名 = function(){};）和构造函数不会被声明提前，所以不能再声明前调用。

foo(); // Uncaught TypeError: foo is not a function
var foo = function(){
	console.log('foo');
};

3.重复定义会被忽略

同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。（只是声明，并未改变变量的值）

var foo = function(){
    console.log('foo');
};
var foo;
console.log(foo); // 函数本身

4.变量提升与函数声明提前的先后顺序

函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
例如：

function foo() {
    console.log(a) // 输出的是函数本身
    var a = '变量先输出'
    function a() {
        console.log('函数先输出')
    }
}
foo();

上面的代码等价于：

function foo() {
	function a() {
		console.log('函数先输出')
	};
	var a; // 重复声明，直接忽略
    console.log(a); // 输出的是函数本身
    a = '变量先输出';
}
foo();

三、作用域链

1.自由变量

定义：当前作用域没有定义该变量，使其使用跨作用域的同名变量被称为自由变量。
例如：

var a = 1; // 全局作用域下声明的变量a
function foo(){
    console.log(a); // 函数作用域没有变量a, 使用的是全局作用域的变量a
}
foo();

变量a没有在函数作用域中定义，此时输出的a的值，为全局作用域的值。

2.作用域链

作用域链的定义：沿着父级作用域一层一层向上查找自由变量的值直到全局作用域，这个查找的关系就是作用域链。
作用域链的原则：就近原则

var foo = 1;
function fun1() {
    var bar = 2;
    function fun2() {
        console.log(foo); // 1
        console.log(bar); // 2
    };
    fun2();
}
fun1();