1、变量提升
在ES6之前,声明变量都是用var,会出现变量提升的过程。在某些情况下,这些可能会产生一些小bug,首先我们要知道什么是变量提升,它是怎么样提升的?
变量的生命周期
变量的生命周期有三部分,变量声明(Declaration Phase)、变量初始化(Initialization Phase)及变量赋值(Assignment Phase)
其中变量声明时会在作用域中注册变量,初始化时是为变量分配内存并且创建作用域,而此时变量会被初始化为 undefined,最后的赋值则会将指定的值分配给该变量。
来看一个例子:
(function () {
console.log(foo); // undefined
var foo = "fcc";
})();
为什么会打印出undefined?而不是报错或者fcc呢?
此处应该扯到浏览器是如何解析 JavaScript 代码的。
有三个参与者,分别是编译器、作用域、浏览器引擎
1、编译器是对源代码进行解析,以便浏览器能够识别
2、在解析完成之后,浏览器引擎会执行解析后的代码
3、作用域则参与其中,在编译过程中对于需要进行提升的变量,会将这些变量存储在作用域中,然后在引擎执行的过程中对其进行赋值操作
举个例子,来看看变量提升的过程:
console.log(a); // undefined
var a = 1;
这段代码的执行过程应该是:
var a;
console.log(a);
a = 1;
在执行的过程中,遇到var,先将var 提到代码头部,进行变量提升。
所以在console之前只是对a进行了声明,以至于打印出undefined。
2、函数提升
函数提升不同于变量提升,他是将整个函数提升至代码头部,然后执行代码
console.log(fun1()); // 1
function fun1 () {
return 1;
};
这段代码的执行过程应该是:
function fun1 () {
return 1;
};
console.log(fun1 ());
再看一个例子:
console.log(fun2); // undefined
var fun2 = function () {
return 1;
};
这里又涉及到函数声明和函数表达式。。。。。。它的执行过程应该是什么呢?
var fun2;
console.log(fun2);
fun2 = function () {
return 1;
}
函数声明和函数表达式:
函数声明即是以 function 关键字开始,跟随者函数名与函数体。而函数表达式则是先声明函数名,然后赋值匿名函数给它。
从上面的例子中可以看到:
函数表达式遵循变量提升的规则,函数体不会被提升至代码头部:
变量提升和函数提升的顺序
此处给个例子就很明白了:
console.log(fun1);
function fun1() {
return 1;
};
var fun1= function () {
return 2;
};
看看执行过程:
function fun1() {
return 1;
};
var fun1;
console.log(fun1);
fun1= function () {
return 2;
};
是不是一下子就明白了。
好了,睡觉!