摘要：第二問直接調(diào)用函數(shù)，相當(dāng)于調(diào)用，那么與函數(shù)無關(guān)。第三問先執(zhí)行了函數(shù)，然后調(diào)用函數(shù)的返回值對(duì)象的屬性函數(shù)。第四問再次調(diào)用函數(shù)時(shí)，此時(shí)函數(shù)已經(jīng)被第三問執(zhí)行時(shí)修改，所以結(jié)果為。

很多初學(xué)JavaScript的人對(duì)函數(shù)的調(diào)用理解有些模糊的，話不多說，直接上題:

    function Foo() {
        getName = function () { 
        console.log(1); 
        };
        return this;
    }
    Foo.getName = function () {
        console.log(2);
    };
    Foo.prototype.getName = function () {
        console.log(3);
    };
    var getName = function () { 
        console.log(4);
    };
    function getName() { 
        console.log(5);
    }

請寫出以下每行代碼的輸出結(jié)果

     Foo.getName();  
     getName(); 
     Foo().getName(); 
     getName(); 
     new Foo.getName();  
     new Foo().getName();  

此題涉及的知識(shí)點(diǎn)比較廣泛，包括變量的作用域、變量提升、this指針指向、運(yùn)算符優(yōu)先級(jí)、原型、繼承、等等。

解題之前，我們先分析一下代碼：

    //① 函數(shù)聲明，聲明了一個(gè)Foo函數(shù)，里面有個(gè)全局變量getName指向一個(gè)匿名函數(shù)
    function Foo() {
        getName = function () { 
        console.log(1); 
        };
        return this;
    }

    //② Foo函數(shù)的創(chuàng)建了一個(gè)靜態(tài)屬性getName指向一個(gè)匿名函數(shù)
    Foo.getName = function () {
        console.log(2);
    };
    
    //③ Foo函數(shù)的原型上創(chuàng)建了一個(gè)getName方法
    Foo.prototype.getName = function () {
        console.log(3);
    };
    
    //④ 函數(shù)表達(dá)式，定義一個(gè)變量getName指向一個(gè)匿名函數(shù) 
    var getName = function () { 
        console.log(4);
    };
    
    //⑤ 函數(shù)聲明，聲明了一個(gè)叫g(shù)etName的有名函數(shù)
    function getName() { 
        console.log(5);
    }

Foo.getName(); //2
訪問Foo函數(shù)上存儲(chǔ)的靜態(tài)屬性getName，所以結(jié)果為2。

getName(); //4
直接調(diào)用getName函數(shù)，相當(dāng)于調(diào)用window.getName，那么與函數(shù)①、②、③無關(guān)。在分析題目前我們首先知道什么變量提升以及JS引擎工作的執(zhí)行順序。

變量提升
所有的變量聲明都會(huì)被提升到它所在作用域的最開始的部分
例如:

    console.log(a); //undifined
    var a = 10;

js引擎執(zhí)行代碼的順序?yàn)椋?/p>

    var a; 
    console.log(a);
    a = 10;

例如：

    var a = 10;
    function test(){
        conlose.log(a); //undifined
        var a = 20;
    }
    test();

js引擎執(zhí)行代碼的順序?yàn)椋?/p>

    var a;
    a = 10;
    function test(){
        var a;
        conlose.log(a); //undifined
        a = 20;
    }

JS引擎工作的執(zhí)行順序：

解析器會(huì)預(yù)先讀取函數(shù)聲明和變量聲明，并使其在執(zhí)行任何代碼前可以訪問；

再由上而下逐行執(zhí)行，函數(shù)表達(dá)式必須等到解析器執(zhí)行到它所在的代碼行才會(huì)真正被解釋執(zhí)行

我們再看原題，函數(shù)④的變量會(huì)被提升，再結(jié)合上述JS引擎工作的執(zhí)行順序，因此代碼的執(zhí)行順序是：

    function Foo(){
        getName = function(){
        console.log(1); 
        };
        return this;
    }
    var getName;
    function getName(){
        console.log(5);
    }
    Foo.getName = function(){ 
        console.log(2);
    };
    Foo.prototype.getName = functio() { 
        console.log(3);
    };
    getName = function(){ 
        console.log(4); //最終的賦值覆蓋function getName聲明
    };

所以結(jié)果為4。

Foo().getName(); //1
Foo().getName(); 先執(zhí)行了Foo函數(shù)，然后調(diào)用Foo函數(shù)的返回值對(duì)象的getName屬性函數(shù)。

先看前面的Foo()
顯然調(diào)用了函數(shù)①，F(xiàn)oo函數(shù)第一句getName = function(){alert(1);};是一句賦值語句，因?yàn)樗鼪]有var聲明，所以先向當(dāng)前Foo函數(shù)作用域內(nèi)尋找getName變量，沒有。再向當(dāng)前函數(shù)作用域上層，即外層作用域內(nèi)尋找是否含有g(shù)etName變量，找到函數(shù)④var getName=function(){alert(1)};，將此變量getName賦值為function(){alert(1)}。

我們將相關(guān)的代碼多帶帶拿出：

    function Foo() {
        getName = function () { //全局變量 
        console.log(1); 
        };
    }
    var getName = function () { 
        console.log(4);
    };
    Foo();
    console.log(getName);  //function(){console.log(1); }

實(shí)質(zhì)上就是將外層作用域內(nèi)的getName函數(shù)修改了。

再看Foo().getName()
Foo函數(shù)的返回值結(jié)果是this那么Foo().getName()=>this.getName()。
this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)被調(diào)用執(zhí)行時(shí)才能確定this到底指向誰，誰調(diào)用指向誰。而此處是直接調(diào)用，this指向window對(duì)象。
this.getName()=> window.getName(),而window中的getName已經(jīng)被修改為console.log(1)，所以最終會(huì)輸出1。

此處考察了兩個(gè)知識(shí)點(diǎn)，一個(gè)是變量作用域，一個(gè)是this指向。

關(guān)于變量作用域，如果將代碼變?yōu)椋?/p>

    function Foo() {
        var getName = function () { // 局部變量，只能在函數(shù)內(nèi)部訪問
        console.log(1); 
        };
     }
     var getName = function () { 
         console.log(4);
     };
     Foo();
     console.log(getName);//function(){console.log(4);}

那么此題結(jié)果則為4了。

getName(); //1
再次調(diào)用getName函數(shù)時(shí)，此時(shí)函數(shù)④已經(jīng)被第三問執(zhí)行Foo()時(shí)修改，所以結(jié)果為1。

new Foo.getName(); //2
--> new(Foo.getName)()

此處考察的是js的運(yùn)算符優(yōu)先級(jí)。
.的優(yōu)先級(jí)大于new，因此應(yīng)該先執(zhí)行Foo.getName()，那么執(zhí)行函數(shù)②，結(jié)果是2，然后new了Foo的實(shí)例對(duì)象即new(Foo.getName)()。
最終結(jié)果為2。

new Foo().getName();//3
--> (new Foo()).getName()

先執(zhí)行new Foo()，那么執(zhí)行函數(shù)①，返回this，this在構(gòu)造函數(shù)中代表當(dāng)前實(shí)例化對(duì)象，所以Foo函數(shù)產(chǎn)生一個(gè)新的實(shí)例對(duì)象。

之后調(diào)用實(shí)例對(duì)象的getName方法即(new Foo()).getName()=>實(shí)例對(duì)象.getName()。

接著我們就要說到構(gòu)造函數(shù)和原型實(shí)例和實(shí)例對(duì)象。
實(shí)例對(duì)象能夠調(diào)用的方法和屬性只能是定義在自身函數(shù)內(nèi)方法和繼承了構(gòu)造函數(shù)原型中的方法和屬性。
實(shí)例對(duì)象.getName()本身并沒有定義屬性和方法，則繼承其構(gòu)造函數(shù)Foo原型中的方法，執(zhí)行函數(shù)③，結(jié)果為3。