Js 整理备忘（补充）——函数的执行顺序

转：http://www.cnblogs.com/gppblog/archive/2010/01/14/1647997.html

---

Javascript中函数的执行时顺序是怎样的呢？？以下几个例子应该可以说明:

1、先看第一个例子，思考：输出结果是什么 呢？

<
script 
type
="text/javascript">

    function 
print(msg) {

        document.write(msg + "<br/>"
);

    }   

    function 
f() {

        this
.s = "hello"
;

        print(this
.s);

    }

    f();

    function 
f() {

        this
.s = "nihao"
;

        print(this
.s);

    }

    f();

    var 
f = function
() { 

        this
.s = "a new string"
;

        print(this
.s);

    }

    f();     

</
script
>

——这里定义了三个同名的函数f，在三个不同的地方进行调用，输出结果为：

nihao
nihao
a new string

跟预想的结果一样吗？不难发现这里定义函数用了两种方法，根据结果分析一下：

第一种使用function定义，这种方式定义的函数，在Js解释器运行时就被解析，在哪里调用都可以（只要是在其作用域内）。

第二种使用函数直接量定义，并将该函数的引用赋给一个变量，这样的函数必须先定义再调用，在将要开始调用时才会被动态解析。

也就是说，本例中的执行顺序为：

<1>解析时，第一第二个函数体都被解析，但由于同名，所以被第二个覆盖，第三个函数此时不解析。

<2>解析完成后，再从上往下按顺序执行代码，遇到第一个调用语句f()，监控窗口显示，此时匹配的是第二个函数体，故第一行输出 “nihao”。参见下图1。

<3>继续往下，遇到第二个调用语句f()，可见此时匹配的仍然是第二个函数体，故第二行也输出“nihao”。参见下图2。

<4>继续往下，遇到第三个调用语句f()，可见此时匹配的变成第三个函数体。可知第三个函数体在定义的下方遇到调用函数时才会被动态 解析。参见下图3。

<5>继续单步执行，则进入第三个函数体内，输出最后的结果，如图4所示。

   

这样一来，整个过程就一目了然了。有兴趣不妨自己试一试。

 

2、为了巩固一下自己得出的结论，下面将例子稍微作了一点修改，如下：（如果已经完全理解，则可以就此打住）

var 
f = function
() {

    this
.s = "hello"
;

    print(this
.s);

}

f();

var 
f = function
() {

    this
.s = "nihao"
;

    print(this
.s);

}

f();

var 
f = function
() { 

    this
.s = "a new string"
;

    print(this
.s);

}

f();

——只是将函数都按照第三种方法用var语句 进行定义。结果输出如下：

hello
nihao
a new string

应该跟预想结果一样的吧。利用var语句将定义的函数赋给一个变量，那么函数将在即将调用的时候才会被解析，并执行已解析的匹配的函数体。

单步运行过程截图，直接参加图上的说明：

   

 

3、如果还不是很清楚，可以再稍微将代码作一些修改，如下：

var 
f = function
() {

    this
.s = "a new string"
;

    print(this
.s);

}

f();

function 
print(msg) {

    document.write(msg + "<br/>"
);

}   

function 
f() {

    this
.s = "hello"
;

    print(this
.s);

}

f();

function 
f() {

    this
.s = "nihao"
;

    print(this
.s);

}

f();  

——将使用var语句定义的函数放在第一个。结果输出如下：

a new string
a new string
a new string

与预想中的结果一样吗？三次调用都执行了用var语句定义的函数。

这是因为下面两个用function定义的函数先被解析，当解析完成，遇到第一个函数调用语句f()时，第一个函数体才开始被解析，于是覆盖了之前 解析的下面两个同名函数。于是下面的函数调用语句f()都只执行第一个函数体。终于明白了吧～～（^_^）