javaScript自上而下执行的顺序受到很多新手和部分老手的共识，但是这其实并不完全正确，这涉及到js的编译过程，这方面我们稍后会聊到，先考虑下面代码：
window.onload = function(){ xxx.onclick = fn;};function fn(){...}
在你的代码中是否存在过类似这种写法，如果完全的自上而下成立，那么这么写应该存在错误，你可能会说，onload函数在页面加载完毕后才执行，js先加载了下面的代码所以不会有问题。
然而其实onload也只是函数，只是函数触发的时间和一般的函数不同，本质上和普通函数没有区别，编译器依然会加载并该报错依然会报错，这个问题的本质是 “ 函数的提升 ” 。
要理解函数的“提升”行为，让我们先解析什么是js的“提升”。
1. 提升
js的代码在生成前，会先对代码进行编译，编译的一部分工作就是找到所有的声明，然后建立作用域将其关联起来，因此，在当前作用域内包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。
注意这里是“声明”会被提前处理，赋值并没有，定义声明是在编译阶段进行的，而赋值是在执行阶段进行的。也就是说声明提升了，赋值还留着原地，等待执行。
2. 变量提升
考虑下面代码，猜想输出结果:
console.log(a);var a =2;
等价于
vara ;// a的默认值undefinedconsole.log(a);// undefineda =2;
这里就用到了我们上面的结论声明提升了，赋值还留着原地。
2.1. 函数表达式
a(); //typeError a不是函数vara = function(){...};
函数表达式的提升 === 变量提升(区别就是赋值变量的类型) ，但是名字比较迷糊人，容易和我们马上要说的函数提升混淆。
一个简单的方法判断是函数表达式还是函数 :function关键字如果是整个声明的第一个词，那么就是函数，否则就是函数表达式，例如：
console.log(a);// ReferenceError a is not defined+functiona(){console.log(1); }//function不是第一个词
3. 函数提升
函数提升和变量提升都会被提升，但是有一个比较重要的细节，函数提升的优先级最高，将首先被提升。
考虑如下代码:
foo();functionfoo(){console.log(1); }varfoo =function(){console.log(2); }foo();
等价于
varfoo ;//重复的声明将被忽略functionfoo(){ console.log(1); }foo();//1foo =function(){ console.log(2); }foo();//2
4.总结
1.无论声明出现在作用域的什么位置，都会被移动到各自作用域的顶部，这个过程被称为提升。2.声明被提升，而包括函数表达式的赋值在内的赋值操作并不会提升，而是留在原地等待执行。
5.面试题解析
( 题尾答案+详细解析 )
选择了网上三题‘较’难，迷惑的人较多的面试题：
1.
console.log(foo); // ?console.log(bar); // ?varfoo = function(){...}; function bar(){...}
===============================================================
==============================解析=============================
答案 ： undefined ，function bar(){...}
详解：
varfoo ;function bar(){...}console.log(foo); // undefined console.log(bar); // function bar(){...}foo = function(){...};
上面的代码就很容易理解了，本题主要考的是函数和函数表达式的区别。
变量声明和函数先提升到顶部，赋值被留到原地，foo默认undefined。bar输出函数自己。
2.
functionfoo(){ a =5;console.log(window.a);// ?console.log(a);// ?vara =10;console.log(a);// ?}foo();
===============================================================
==============================解析=============================
答案 ：undefined ，5 ，10
详解：
这里涉及到全局污染问题，即不使用var或 其他声明关键字 去声明时，在本作用域找不到声明时，默认向上级找，直到最顶层绑定到全局window上（严格模式绑定到undefined）。例如:
functionfoo(){
a = 1;
console.log(window.a); // 1 变量a污染到了全局上
}foo();
下面是本题的解析，考点就是提升和全局污染
functionfoo(){vara ;// 因为下面有声明a变量,a的声明提前a =5;//因为在自己的作用域内有a的声明存在,a并不会污染到全局,//而是绑定到本作用域的a上，这也是比较忽悠人的地方console.log(window.a);// undefined//a = 5 没有污染全局，所以window.a不存在,故输出undefinedconsole.log(a);// 5 ,a 的声明提升，变量 a = 10 没有提升，a 现在还是 5a =10;console.log(a);// 10}foo();
3.
functionfoo(){vara =1;functionb(){ a =10;return'';functiona(){...} } b();console.log(a);// ?}foo();
===============================================================
==============================解析=============================
答案 ：1
详解 ： 考点 1.污染 2.提升 3.作用域
functionfoo(){vara ;// a 和 b 一起提升到作用域顶部functionb(){functiona(){...}//b里的函数a也提升到b的顶部a =10;//因为上面有变量a，所以a也不会污染到上一层，而是对函数a进行再次赋值//如果函数执行，函数里的a的值是 10，且没有污染return''; } a =1;//对本作用域的a赋值b();//函数执行,b作用域内的a被赋值为10console.log(a);// 1// 这个有两点要搞清楚 :// 1. b的a没有污染到这个作用域// 2. 就近原则，本函数的log(a)找离自己最近的a变量，//如果log在函数b内，那么输出 离自己最近的 10}foo();
参考书籍：你不知道的JavaScript<上卷> ＫＹＬＥ ＳＩＭＰＳＯＮ 著 （推荐）
##前端学习交流群：461593224
网友评论