作用域、作用域链、自由变量、变量提升

作用域、作用域链、自由变量和变量提升

作用域

作用域的定义：所谓作用域就是一个变量可以使用的范围

作用域又分多种

全局作用域
函数作用域
块级作用域（ES6新增）

• js中首先有一个最外层的作用域，称为全局作用域
• js中可以可以通过函数来创建一个独立的作用域，称为函数作用域，函数可以嵌套，所以作用域也可以嵌套
  示例：

let a = 0
function fn1(){
	let a1 = 100 
	function fn2(){
		let a2 = 200
		function fn3(){
			let a3 = 300
			return a + a1 + a2 + a3
		}
		fn3()
	}
	fn2()
}
fn1()

• es6中新增了块级作用域(大括号，比如if{}、for(){})
  块级作用域只适用于const、let

自由变量

自由变量的概念：当前作用域没有没有定义的变量

• 一个变量再当前作用域没有定义，但被使用了
• 向上级作用域一层一层的一次寻找，直至找到为止
• 如果全局作用域都没有找到，则会报错

示例：(a和b为自由变量)

var a = 100
function fn1(){
	var b = 200
	function fn2(){
		var c = 300
		console.log(a)
		console.log(b)
		console.log(c)
	}
	fn2()
}
fn1()

作用域链

自由变量向上级一层一层的找，直到找到为止，一直找到全局作用域，就形成了作用域链

变量提升（预解析）

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行的运行
就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

var声明的变量，function声明的函数存在变量提升
let和const不会变量提升

1. js中声明并定义一个变量时，会把声明提前，以下会先打印出undefined，再打印出10

console.log(a)
var a = 10
console.log(a)

2. 相当于

var a
console.log(a)；//undefined
a = 10
console.log(a) //10

2. 函数声明也是，以下函数相当于把整个fn提到作用域的最上面，所以调用fn时会正常打印jack

fn('jack')；//jack
function fn (name){
console.log(name)
}

3. 不过函数表达式不行，以下是一个函数表达式，JavaScript会把var fn提到作用域最上面，没有吧函数提上去，所以会报错。

fn("jack");//报错
var fn = function(name) {
console.log(name);
};

示例：

  var x = 30;
  function test(){
      console.log(x);
      var x = 10;
      console.log(x);
      x=20;
      function x(){

      };
      console.log(x);
  }
  test();

从上往下，逐步执行：
第一个log(x)中的x向上查找，直至找到预解析池，function x(){},
第二个log(x)中的x向上查找，找到var x=10;, 弹出 10；
第三个log(x)中的x向上查找，找到 x=20;, 弹出 20；