記Javascript一道題的理解

標籤：最佳化   obj   class   java   變數   code   prototype   全域   logs   

代碼如下：

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(); //2getName(); //4Foo().getName(); //1getName(); //1new Foo.getName(); //2 => new (Foo.getName)() new無參數列表new Foo().getName(); // 3 => (new Foo()).getName(); //new有參數列表new new Foo().getName(); //3 => new ((new Foo()).getName)() //new有參數列表

Foo.getName()

輸出結果為:2
原理：他調用的是Foo的靜態方法（如果C#、java等後端語言來說），其實是因為Javascript中的Function本身就是Function和Object的結合，所以function既是函數，也是對象。在這裡Foo就是執行了他對象上的一個function而已。

getName()

輸出結果為：4
原理：可能你會想為什麼不是5，function變數會提升到範圍的頂部，而var定義的則不會，所以var聲明的覆蓋掉function聲明。所以結果為4

Foo().getName()

輸出結果為：1
原理：Foo()是函數調用，Foo執行體中對getName進行了重新賦值（全域的getName，根據範圍鏈向上尋找），返回的this為window(Foo執行時沒有調用，預設為全域)，然後.getName()調用了全域的getName（也就是被Foo執行體重寫的getName），所以結果為:1

getName()

輸出結果為：1 原理：因為Foo執行體中對全域getName重寫了，這時調用的又是全域的getName。所以結果為:1

new Foo.getName()

輸出結果為：2
原理：

• 由於new無參，與new有參的運算最佳化級一樣。new有參的與.運算子同一層級，而new無參的低一個層級。所以會先執行.運算子選擇到Foo的靜態方法getName
• 然後執行new，獲得的是Foo.getName的一個執行個體。所以輸出結果為：2

new Foo().getName()

輸出結果為：3

原理：

• 由於new是有參的，與.運算子同級，按照從左向右的執行順序，先執行new Foo()。
• new Foo()是需要值得我們的注意，因為他有一個傳回值。存在傳回值分為兩種情況：
  • 無返回與返回為基本類型是一樣的效果：返回都是執行個體對象（也就是當前的this）
  • 返回為參考型別：返回的為這個參考型別的對象，此時執行個體對象被替換了（也就是當前的this沒有返回）。因數new Foo()返回是執行個體對象
• .getName()：選擇是上一步執行個體的此方法，所以輸出結果為：3

new new Foo().getName()

輸出結果為：3
原理：主要是運算子優先順序的考查，執行個體開發中應該不會這樣直接的用到。首先new有參，然後.getName(.運算子)（為什麼是.運算子，這是因為new無參層級低一個檔次）,再則new有參。

記Javascript一道題的理解