js經典面試題01

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();
new new Foo().getName();

由于經常有人拿這個面試提問所以整理了一下保存起來

解析:

1、Foo.getName(); //2

Foo是一個函數,也可以說是一個對象,所以它也可以掛載一些屬性和方法。
所以結果執行的是Foo對象的一個叫做getName()的屬性,而1、4、5中的getName都是作為函數存在,所以可以排除1、4、5

剩下兩個中,2是Foo對象自身的屬性,3是Foo對象原型鏈上的屬性,而自身屬性的優先級高于原型鏈上的屬性,所以執行結果是2


2、getName(); //4

結果執行的是getName函數,而題目代碼中有3個相關函數,分別是1、4、5

1中的getName是定義在Foo函數中的函數,由于Foo尚未執行,因此它沒有暴露出來,無法被外部調用,可以排除

4和5都可以被正常調用,關鍵在調用先后問題

由于5是普通函數(優先級最高),4是匿名函數;js解析時會將5提前至最上方優先解析,而后面解析的4會將5覆蓋,所以執行結果是4


3、Foo().getName(); //1

結果執行的是Foo函數,Foo函數中有個返回值是this;this被普通函數調用后,指向的對象一定是window對象,所以此處的結果已經可以解析為window.getName(),即調用getName()函數,所以最后執行的就是window.getName,所以輸出1;


4、getName(); //1

在上面已經更改全局的getName,執行getName即是執行window.getName;所以依然是1


5、new Foo.getName(); //2

new 操作符在實例化構造器的時候,會執行構造器函數,也就是說,foo.getName會執行,輸出2


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

new操作符的優先級較高,所以會先new foo()得到一個實例,然后再執行實例的getName方法,這個時候,實例的構造器里沒有getName方法,就會執行構造器原型上的getName方法


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

先執行new foo()得到一個實例,然后在new 這個實例的getName方法,這個時候會執行這個方法,所以輸出3


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,890評論 18 139
  • Swift1> Swift和OC的區別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,136評論 1 32
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,760評論 18 399
  • 【壹】 最近一直有些凌亂的生活節奏,突然在這個午后睡不著的時間里,想靜下來想一想了。不久以前有個好習慣,寫一些類似...
    mellisa_901閱讀 400評論 1 3
  • 因為有了人海,所以相遇便成了意外。初秋九月,天空依稀晴朗,大地綠意依然,秋風不時地吹起,透著習習涼意……景色依舊...
    易安言閱讀 197評論 0 2