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

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

    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);
    }

請寫出以下每行代碼的輸出結果

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

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

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

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

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

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

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

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

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

js引擎執(zhí)行代碼的順序為：

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

例如：

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

js引擎執(zhí)行代碼的順序為：

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

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

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

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

我們再看原題，函數(shù)④的變量會被提升，再結合上述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聲明
    };

所以結果為4。

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

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

我們將相關的代碼多帶帶拿出：

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

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

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

此處考察了兩個知識點，一個是變量作用域，一個是this指向。

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

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

那么此題結果則為4了。

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

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

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

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

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

之后調用實例對象的getName方法即(new Foo()).getName()=>實例對象.getName()。

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