js变量提升及函数提升

一、js变量提升

在JavaScript中，我们使用var关键字对变量的声明都会被提升到作用域的顶部。
首先，我们来看个简单的例子：

<script>
		console.log(a);
		var a = 100;
		console.log(a);
	</script>

这段代码的结果是：

undefined
100

有小伙伴可能会疑惑为什么，其实这段代码的执行顺序是如下这样的：

<script>
		var a;		// 对于变量的声明被提到作用域顶端
		console.log(a);
		a = 100;
		console.log(a);
</script>

下面来做个练习吧

<script>
		var a = 10;
		(function () {
			console.log(a)
			var a = 20;
			console.log(a)
		})()
		console.log(a);
</script>

答案是：

undefined
20
10

上述代码的执行顺序实际是：

<script>
		var a = 10;
		(function () {
			var a;
			console.log(a)
			a = 20;
			console.log(a)
		})()
		console.log(a);	// 这里的a是全局变量a
</script>

函数提升

js声明函数有两种不同的方式，一种是函数声明，一种是函数表达式。
函数声明：

function foo(){
	console.log('这是函数声明方式');
}

函数表达式：

var foo = function(){
	console.log('这是函数表达式方式');
}

对于使用表达式声明的函数提升和变量的提升规则相同，下面我们就仔细看一下函数声明的提升。

函数声明的函数提升会将整个代码块提升至作用域的顶端。

console.log(foo);
function foo(){
	console.log(’我是方法foo‘);
}

这段代码的执行结果并非是undefined，而是将整个函数进行输出。

ƒ foo(){
		console.log('我是方法foo');
	}

由此可见，通过函数声明方式定义的函数会被提升到作用域顶端。
下面我们再做个题目：

var foo=function(x,y){
	return x-y;
}
function foo(x,y){
	return x+y;
}
var num=foo(1,2);
console.log(num);

这道题目的答案是 -1。
代码实际执行顺序是：

var foo;
function foo(x,y){
	return x+y;
}
foo=function(x,y){
	return x-y;
}
var num=foo(1,2);

• 首先是对函数表达式变量的提升，其次是函数声明的提升，最后是函数表达式的赋值。

总结

js引擎的工作原理是先解析代码，获取所有被声明的变量，之后再运行，因此var a = 10；这句话会被分成两个步骤执行，所有对于变量的声明都会被提升到作用域顶部，这就是变量提升。