if ("a" in window) {
var a = 1;
}
alert(a);
先来看这个题会alert出什么呢?答案很显然会是:1
不过这道题目放在以前考我的话,那我一定会答错,后来查找了一番资料,了解到两个新名词:预编译和变量提升,为了以后不会忘记,还是留个笔记吧。
首先来了解一下什么是预编译:对var关键字(值先设为undefined,执行时才给实际值)和函数定义式进行提前声明,再接着顺序执行代码,函数定义式在预编译时期就被解析,执行时期仍然用这个值,而无论是声明的变量还是声明式函数,在执行的时候,可以覆盖预编译时期的值。
下面我们来解释一下上面的题目为什么是1呢,首先上面的代码等价于下面的代码:
var a;
if("a" in window){
a = 1;
}
因为js没有块级作用域,所以if里面的也是全局的,所以在预编译过程中里面的变量a会被提出来并被赋值为undefined,然后在执行if语句时候此时a已经存在于window中了,只不过值暂时是undefined,于是就会去执行if里面的代码,所以结果为1;
再来一题:
var a = 1;
function a(x){}
alert(a);
等价于:
var a;
a = function(x){}
a = 1;
alert(a);
预编译阶段寻找代码中的var(实际将var a=1拆分为var a;a=1两部分,第一部分置顶,第二部分挂在语法树上)以及function两个关键字并置顶,在此将a以及a()分别置顶,之后在执行阶段再对a从语法树进行赋值,最后a为1。
理解了上面的代码,下面再看一个类似的题目:
function a(x) {
return x ;
}
var a;
alert(a);
等价于:
var a;
function a(x){
return x;
}
alert(a);
这个题目跟上一个有点类似,但是却又不同,原因就是在这里a并没有被赋值,而只是声明一个变量;在预编译阶段会将这种形式提前置顶,然后将function也置顶,但是function在a之后,于是预编译后二者顺序完全倒过来了,所以最后执行结果是function a(x){return x;}。
如果显式的给a赋值一个a=undefined;那么结果就是undefined。因为此时牵扯到赋值了 赋值的话 就在执行阶段去执行。
Fn(); //执行结果:"执行了函数2",同名函数后者会覆盖前者
function Fn(){ //函数1
alert("执行了函数1");
}
function Fn(){ //函数2
alert("执行了函数2");
}
Fn(); //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。
function Fn(){ //声明式函数
alert("执行了声明式函数");
}
var Fn = function(){ //赋值式函数
alert("执行了赋值式函数");
}
通过对比上面两段代码,我们不难发现,声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码,所以才有这样的结果。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。