【作用域、自由变量】

一、作用域

作用域：一个变量可以使用的范围
全局作用域、函数作用域、块级作用域（Es6新增）

• js中首先有一个最外层的作用域，全局作用域；
• js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；
• es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；

函数作用域如图所示

块级作用域如图所示

二、自由变量

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

var a = 100;
function fn(){
	var b = 200;
	function fn2(){
		var c = 300;
		console.log(a);	// a是自由变量,在当前函数作用域fn2没有定义,但是使用了,就回去往上去寻找
		console.log(b);	// b也是自由变量,同理
		console.log(c);
	}
	fn2()
}
fn()

————————————————————————————————————————————
作用域链

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

————————————————————————————————————————————
变量提升（预解析）

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

变量提升只会提升变量名，不会提升变量值

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

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

相当于

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

变量提升面试题

var x = 30;
function test(){
	alert(x);	// 打印的是个函数 function x(){}
	var x = 10;
	alert(x);	// 打印结果为10
	x=20;
	function x(){};
	alert(x);	// 打印结果为20
}
test();

分析：

test是函数，每个函数作用域也首先要进行预解析
var,function声明的变量或者函数首先变量提升
但是函数的优先级高于变量
所以变量提升最终结果为function x(){}

就相当于:
var x = 30;
function test(){
	var x;
	function x(){}
	alert(x);	// 打印的是个函数 function x(){}
	var x = 10;
	alert(x);	// 打印结果为10
	x=20;
	function x(){};
	alert(x);	// 打印结果为20
}
test();