让人怀疑人生的js预解析
JavaScript预解析
JavaScript会把var声明的变量提升到作用域的最前面进行声明,会把function定义的方法提升到作用域的最前面,不会执行function。
1变量提升:
举例:
var i=10;
console.log(i); //打印 10
f();
function f(){
console.log(i);//10?undefined
var i = 1;
console.log(i);//1
}
输出结果是:
10
undefined
1
好多不了解js预解析的人无法理解f()中为什么第一句打印结果是undefined,如果我们根据js预解析来把代码转换一下就很好理解了。
相当于如下代码:
var i;
function f(){
var i;//局部变量声明提升
console.log(i);//undefined
i = 1;
console.log(i);//1
}
i=10;
console.log(i); //打印 10
f();
这样按顺序执行就很容易理解了。
2 我们都知道,js里面函数调用和定义不用区分现后顺序,可以先调用后执行,因为js会把function提升到前面执行,但如果是函数表达式声明的函数就只能当作变量来提升了,如果先调用后声明就会报错,如下:
console.log(i); //声明变量未赋值 打印undefined 如果未声明则 打印 is not defined
console.log(f1); //声明变量未赋值 打印undefined
//console.log(f1());//报错TypeError: f1 is not a function
console.log(f2());
//console.log(f3()); //报错TypeError: f1 is not a function
var i=0
function f2(){
console.log('f2被调用');
}
function f3(){
console.log('f3被调用');
f1();//调用匿名函数
}
//如果函数中存在匿名函数,不能再匿名函数之前调用。f1 is not a function
//console.log(f3()); //报错TypeError: f1 is not a function
var f1 = function(){
console.log('f1被调用');
}
console.log('f1定义结束');
console.log(f3());//正常不报错
输出结果:
undefined
undefined
f2被调用
undefined
f1定义结束
f3被调用
f1被调用
undefined
如果我们去掉上的注释,就会遇到对应行后面的报错。因为f1作为变量被提升了,如果在fi函数表达式之前调用(包括函数f3内部的调用)f1的话就会报错TypeError: f1 is not a function。
- 点赞
- 收藏
- 关注作者
评论(0)