經典的Foo和getName

搜了下經典的Foo和getName的題目，看了幾個解釋，懶得看，自己解一下，作為筆記。

 

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的靜態方法
Foo.getName();//2

//function getName有提前聲明的規則，聲明后被var getName= 。。覆蓋，則getName為4
getName();//4

//Foo()的return this為window，window.getName 在Foo里面被覆蓋，則輸出1
Foo().getName();//1

//同上，因調用了Foo();window的getName被覆蓋
getName();//1

//依然只是調用了Foo對象上的getName,又因為Foo.getNname，所以相當於
/**
 *  function a(){console.log(2)};
 *  new a();
 * **/
new Foo.getName();//2

//先執行了new Foo()；返回一個對象，這個對象的getName為prototype上的getName,相當於(new Foo()).getName();
new Foo().getName();//3

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

 

對於后三題，尤其是最后一個new new Foo().getName()，特別容易懵x

對於帶new的輸出，用一個this來跟蹤。

function Foo(){
    this.a = 1;
    getName = function(){
        this.a = 11;
        console.log(1);
    };
    return this;
} 

Foo.getName = function(){
    this.a = 2;
    console.log(2);
}

Foo.prototype.getName = function(){
    console.log(3);
    this.a = 3;
　　return "i'm prototype's getName";
}

var getName = function(){
    console.log(4);
    this.a = 4;
}

function getName(){
    console.log(5);
    this.a = 5;
}
//相當於 new (Foo.getName())
var a1 = new Foo.getName();//2
console.log(a1.a);//2;

//相當於 (new Foo()).getName();  只是執行了一個prototype里getName()的方法，
//這個方法若無返回則a2為undefined，
//可以進一步確定，在prototype.getName中添加return ,則a2會等於return出來的結果
var a2 = new Foo().getName();//3
console.log(a2.a);//報錯：cannot read property a of undefinded;

//這題輸出的結果為3；從結果上看，相當於  new Foo.prototype.getName()
//也就是說new Foo().getName() == Foo.prototype.getName()
//所以執行的結果應該相當於  new ((new Foo()).getName())
//這句話用通俗點說法就是，new了一個Foo對象A，然后以A原型里的getName()方法作為構造函數new了B，最后這個B.a = 3;
//當然在new的時候執行構造器，就輸出了3；
var a3 = new new Foo().getName();//3
console.log(a3.a);//3