js中函数执行顺序以及变量提升

我这就不卖关子了，输出的结果分别是：2、4、1、1、2、3、3

不知你答对了吗？

下面进入重点，我们进行分析

要想计算下面这几项，我们需要先了解 js 运算符的执行顺序，可以参考这个网址： 运算符优先级

a 函数里如果有异步的代码，则只有两种处理方式：

a函数返回 promise，b函数这样调用： a()then(){b():}

a函数添加一个参数传回调函数，这样调用：a(()=>{b();})

如果a函数不能传入回调函数，又没有返回 promise，则必须要改一下 a函数，可能只是很简单的修改。

// 大概是这个顺序

// 函数和变量声明在所有语句之前

var msg = 'hello';

function great(name, attr) {

    var greating;

    var msg;

    name = 'david';

    alert(msg); // undefined

    greating = msg;

    msg = 'ddd';

}

getdata，getx和gety都是异步执行的函数，第二个参数是回调函数。

首先执行

var m;

然后执行getdata，但是此时，getdata函数的 *** 作并未完成，所以不会执行回调。

接着继续执行getx和gety，同理，他们也不会瞬间完成，所以回调也不会立即执行。

接着执行

alert("应该不会影响了吧");

然后过了一段时间（可能是几十毫秒，你感觉不到），getdata，getx，gety执行完毕。

哪个函数先执行完毕，哪个函数的回调就先触发。

所以你看到的顺序就是乱的。

这是因为函数声明不管放在代码的哪个位置（包括放在say();的后面），它都会被其所在的作用域预先读取的，而函数表达式则按照代码的物理顺序来执行，当执行到它时，由于已存在同名的函数声明，它就会覆盖这个函数声明，所以最终执行的都是函数表达式。

你试运行一下下面的两段代码就会明白的：

say(); //输出hello repeat say

var say = function (){

    consolelog('say');

}

say(); //输出say

function say(){

    consolelog('hello repeat say');

}

say(); //输出saysay(); //输出hello repeat say

function say(){

    consolelog('hello repeat say');

}

say(); //输出hello repeat say

var say = function (){

    consolelog('say');

}

say(); //输出say

是的。是顺序执行，至上而下。

具体的，可能需要区分下，

1、JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。 

代码如下: 

//“定义式”函数定义 

function Fn1(){ 

alert("Hello World!"); 

} 

//“赋值式”函数定义 

var Fn2 = function(){ 

alert("Hello wild!"); 

}

2、页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理(类似1中变量必须先定义后引用的原则)，待调用到的时候才进行处理。

代码如下: 

//“定义式”函数定义 

Fn1(); 

function Fn1(){ 

alert("Hello World!"); 

}

正常执行，d出“Hello World!”，因为浏览器对Fn1进行了预处理，再从Fn1();开始执行

代码如下: 

//“赋值式”函数定义 

Fn2(); 

var Fn2 = function(){ 

alert("Hello wild!"); 

}

Firebug报错：Fn2 is not a function，浏览器未对Fn2进行预处理,因为是赋值，依序执行，所以报错Fn2未定义。

3 代码块及js文件的处理 

“代码块”是指一对<script type=”text/网页特效”></script>标签包裹着的js代码，文件就是指文件啦，废话:D 

浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行(2中讲到了)。所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；但在两个块中，定义函数所在的块必须在函数被调用的块之前。 

很绕口，看例子就可以知道：

<script type="text/javascript"> 

Fn(); 

</script> 

<script type="text/javascript"> 

function Fn(){ 

alert("Hello World!"); 

} 

</script> 

// 报错：Fn is notdefined，两个块换过来就对了

  4 重复定义函数会覆盖前面的定义 ，这和变量的重复定义是一样的

5 body的onload函数与body内部函数的执行，body内部的函数会先于onload的函数执行(因为onload是在hmtl页面加载完成后执行，而body内部就是html代码，所有一并加载执行了)