前端程序員常常忽視的一個JavaScript面試題
題目
function Foo() {
getName = function () { alert (1); };
return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
//請寫出如下輸出結果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
這幾天面試上幾回碰上這道經典的題目，特意從頭至尾來分析一次答案，這道題的經典之處在於它綜合考察了面試者的JavaScript的綜合能力，包含了變量定義提高、this指針指向、運算符優先級、原型、繼承、全局變量污染、對象屬性及原型屬性優先級等知識，此題在網上也有部分相關的解釋，固然我以爲有部分解釋還欠妥，不夠清晰，特意重頭到尾來分析一次，固然咱們會把最終答案放在後面，並把此題再改高一點點難度，改進版也放在最後，方便麪試官在出題的時候有個參考，更多詳情可關注本文做者@Wscats
javascript
第一問
先看此題的上半部分作了什麼，首先定義了一個叫Foo的函數，以後爲Foo建立了一個叫getName的靜態屬性存儲了一個匿名函數，以後爲Foo的原型對象新建立了一個叫getName的匿名函數。以後又經過函數變量表達式建立了一個getName的函數，最後再聲明一個叫getName函數。前端
第一問的Foo.getName天然是訪問Foo函數上存儲的靜態屬性，答案天然是2，這裏就不須要解釋太多的，通常來講第一問對於稍微懂JS基礎的同窗來講應該是沒問題的,固然咱們能夠用下面的代碼來回顧一下基礎，先加深一下了解java
function User(name) {
var name = name; //私有屬性
this.name = name; //公有屬性
function getName() { //私有方法
return name;
}
}
User.prototype.getName = function() { //公有方法
return this.name;
}
User.name = 'Wscats'; //靜態屬性
User.getName = function() { //靜態方法
return this.name;
}
var Wscat = new User('Wscats'); //實例化
注意下面這幾點：git
- 調用公有方法，公有屬性，咱們必需先實例化對象，也就是用new操做符實化對象，就可構造函數實例化對象的方法和屬性，而且公有方法是不能調用私有方法和靜態方法的
- 靜態方法和靜態屬性就是咱們無需實例化就能夠調用
- 而對象的私有方法和屬性,外部是不能夠訪問的
第二問
第二問，直接調用getName函數。既然是直接調用那麼就是訪問當前上文做用域內的叫getName的函數，因此這裏應該直接把關注點放在4和5上，跟1 2 3都沒什麼關係。固然後來我問了個人幾個同事他們大多數回答了5。此處其實有兩個坑，一是變量聲明提高，二是函數表達式和函數聲明的區別。
咱們來看看爲何，可參考(1)關於Javascript的函數聲明和函數表達式 (2)關於JavaScript的變量提高
在Javascript中，定義函數有兩種類型程序員
函數聲明
// 函數聲明
function wscat(type) {
return type === "wscat";
}
函數表達式
// 函數表達式
var oaoafly = function(type) {
return type === "oaoafly";
}
先看下面這個經典問題，在一個程序裏面同時用函數聲明和函數表達式定義一個名爲getName的函數github
getName() //oaoafly
var getName = function() {
console.log('wscat')
}
getName() //wscat
function getName() {
console.log('oaoafly')
}
getName() //wscat
上面的代碼看起來很相似，感受也沒什麼太大差異。但實際上，Javascript函數上的一個「陷阱」就體如今Javascript兩種類型的函數定義上。面試
- JavaScript 解釋器中存在一種變量聲明被提高的機制，也就是說函數聲明會被提高到做用域的最前面，即便寫代碼的時候是寫在最後面，也仍是會被提高至最前面。
- 而用函數表達式建立的函數是在運行時進行賦值，且要等到表達式賦值完成後才能調用
var getName //變量被提高，此時爲undefined
getName() //oaoafly 函數被提高 這裏受函數聲明的影響，雖然函數聲明在最後能夠被提高到最前面了
var getName = function() {
console.log('wscat')
} //函數表達式此時纔開始覆蓋函數聲明的定義
getName() //wscat
function getName() {
console.log('oaoafly')
}
getName() //wscat 這裏就執行了函數表達式的值
因此能夠分解爲這兩個簡單的問題來看清楚區別的本質前端工程師
var getName;
console.log(getName) //undefined
getName() //Uncaught TypeError: getName is not a function
var getName = function() {
console.log('wscat')
}
var getName;
console.log(getName) //function getName() {console.log('oaoafly')}
getName() //oaoafly
function getName() {
console.log('oaoafly')
}
這個區別看似微不足道，但在某些狀況下確實是一個難以察覺而且「致命「的陷阱。出現這個陷阱的本質緣由體如今這兩種類型在函數提高和運行時機（解析時/運行時）上的差別。
固然咱們給一個總結：Javascript中函數聲明和函數表達式是存在區別的，函數聲明在JS解析時進行函數提高，所以在同一個做用域內，無論函數聲明在哪裏定義，該函數均可以進行調用。而函數表達式的值是在JS運行時肯定，而且在表達式賦值完成後，該函數才能調用。
因此第二問的答案就是4，5的函數聲明被4的函數表達式覆蓋了閉包
第三問
Foo().getName();先執行了Foo函數，而後調用Foo函數的返回值對象的getName屬性函數。
Foo函數的第一句getName = function () { alert (1); };是一句函數賦值語句，注意它沒有var聲明，因此先向當前Foo函數做用域內尋找getName變量，沒有。再向當前函數做用域上層，即外層做用域內尋找是否含有getName變量，找到了，也就是第二問中的alert(4)函數，將此變量的值賦值爲function(){alert(1)}。
此處其實是將外層做用域內的getName函數修改了。函數
注意：此處若依然沒有找到會一直向上查找到window對象，若window對象中也沒有getName屬性，就在window對象中建立一個getName變量。
以後Foo函數的返回值是this，而JS的this問題已經有很是多的文章介紹，這裏再也不多說。
簡單的講，this的指向是由所在函數的調用方式決定的。而此處的直接調用方式，this指向window對象。
遂Foo函數返回的是window對象，至關於執行window.getName()，而window中的getName已經被修改成alert(1)，因此最終會輸出1
此處考察了兩個知識點，一個是變量做用域問題，一個是this指向問題
咱們能夠利用下面代碼來回顧下這兩個知識點
var name = "Wscats"; //全局變量
window.name = "Wscats"; //全局變量
function getName() {
name = "Oaoafly"; //去掉var變成了全局變量
var privateName = "Stacsw";
return function() {
console.log(this); //window
return privateName
}
}
var getPrivate = getName("Hello"); //固然傳參是局部變量，但函數裏面我沒有接受這個參數
console.log(name) //Oaoafly
console.log(getPrivate()) //Stacsw
由於JS沒有塊級做用域，可是函數是能產生一個做用域的，函數內部不一樣定義值的方法會直接或者間接影響到全局或者局部變量，函數內部的私有變量能夠用閉包獲取，函數還真的是第一公民呀~
而關於this，this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象
因此第三問中實際上就是window在調用Foo()函數，因此this的指向是window
window.Foo().getName(); //->window.getName();
第四問
直接調用getName函數，至關於window.getName()，由於這個變量已經被Foo函數執行時修改了，遂結果與第三問相同，爲1，也就是說Foo執行後把全局的getName函數給重寫了一次，因此結果就是Foo()執行重寫的那個getName函數
第五問
第五問new Foo.getName();此處考察的是JS的運算符優先級問題，我以爲這是這題靈魂的所在，也是難度比較大的一題
下面是JS運算符的優先級表格，從高到低排列。可參考MDN運算符優先級
| 優先級 | 運算類型 | 關聯性 | 運算符 |
|---|---|---|---|
| 19 | 圓括號 | n/a | ( … ) |
| 18 | 成員訪問 | 從左到右 | … . … |
| 需計算的成員訪問 | 從左到右 | … [ … ] | |
| new (帶參數列表) | n/a new | … ( … ) | |
| 17 | 函數調用 | 從左到右 | … ( … ) |
| new (無參數列表) | 從右到左 | new … | |
| 16 | 後置遞增(運算符在後) | n/a | … ++ |
| 後置遞減(運算符在後) | n/a | … -- | |
| 15 | 邏輯非 | 從右到左 | ! … |
| 按位非 | 從右到左 | ~ … | |
| 一元加法 | 從右到左 | + … | |
| 一元減法 | 從右到左 | - … | |
| 前置遞增 | 從右到左 | ++ … | |
| 前置遞減 | 從右到左 | -- … | |
| typeof | 從右到左 | typeof … | |
| void | 從右到左 | void … | |
| delete | 從右到左 | delete … | |
| 14 | 乘法 | 從左到右 | … * … |
| 除法 | 從左到右 | … / … | |
| 取模 | 從左到右 | … % … | |
| 13 | 加法 | 從左到右 | … + … |
| 減法 | 從左到右 | … - … | |
| 12 | 按位左移 | 從左到右 | … << … |
| 按位右移 | 從左到右 | … >> … | |
| 無符號右移 | 從左到右 | … >>> … | |
| 11 | 小於 | 從左到右 | … < … |
| 小於等於 | 從左到右 | … <= … | |
| 大於 | 從左到右 | … > … | |
| 大於等於 | 從左到右 | … >= … | |
| in | 從左到右 | … in … | |
| instanceof | 從左到右 | … instanceof … | |
| 10 | 等號 | 從左到右 | … == … |
| 非等號 | 從左到右 | … != … | |
| 全等號 | 從左到右 | … === … | |
| 非全等號 | 從左到右 | … !== … | |
| 9 | 按位與 | 從左到右 | … & … |
| 8 | 按位異或 | 從左到右 | … ^ … |
| 7 | 按位或 | 從左到右 | … 按位或 … |
| 6 | 邏輯與 | 從左到右 | … && … |
| 5 | 邏輯或 | 從左到右 | … 邏輯或 … |
| 4 | 條件運算符 | 從右到左 | … ? … : … |
| 3 | 賦值 | 從右到左 | … = … |
| … += … | |||
| … -= … | |||
| … *= … | |||
| … /= … | |||
| … %= … | |||
| … <<= … | |||
| … >>= … | |||
| … >>>= … | |||
| … &= … | |||
| … ^= … | |||
| … 或= … | |||
| 2 | yield | 從右到左 | yield … |
| yield* | 從右到左 | yield* … | |
| 1 | 展開運算符 | n/a | ... … |
| 0 | 逗號 | 從左到右 | … , … |
這題首先看優先級的第18和第17都出現關於new的優先級，new (帶參數列表)比new (無參數列表)高比函數調用高，跟成員訪問同級
new Foo.getName();的優先級是這樣的
至關因而:
new (Foo.getName)();
- 點的優先級(18)比new無參數列表(17)優先級高
- 當點運算完後又由於有個括號
()，此時就是變成new有參數列表(18)，因此直接執行new，固然也可能有朋友會有疑問爲何遇到()不函數調用再new呢，那是由於函數調用(17)比new有參數列表(18)優先級低
.成員訪問(18)->new有參數列表(18)
因此這裏實際上將getName函數做爲了構造函數來執行，遂彈出2。
第六問
這一題比上一題的惟一區別就是在Foo那裏多出了一個括號，這個有括號跟沒括號咱們在第五問的時候也看出來優先級是有區別的
(new Foo()).getName()
那這裏又是怎麼判斷的呢？首先new有參數列表(18)跟點的優先級(18)是同級，同級的話按照從左向右的執行順序，因此先執行new有參數列表(18)再執行點的優先級(18)，最後再函數調用(17)
new有參數列表(18)->.成員訪問(18)->()函數調用(17)
這裏還有一個小知識點，Foo做爲構造函數有返回值，因此這裏須要說明下JS中的構造函數返回值問題。
構造函數的返回值
在傳統語言中，構造函數不該該有返回值，實際執行的返回值就是此構造函數的實例化對象。
而在JS中構造函數能夠有返回值也能夠沒有。
- 沒有返回值則按照其餘語言同樣返回實例化對象。
function Foo(name) {
this.name = name
}
console.log(new Foo('wscats'))
- 如有返回值則檢查其返回值是否爲引用類型。若是是非引用類型，如基本類型（String,Number,Boolean,Null,Undefined）則與無返回值相同，實際返回其實例化對象。
function Foo(name) {
this.name = name
return 520
}
console.log(new Foo('wscats'))
- 若返回值是引用類型，則實際返回值爲這個引用類型。
function Foo(name) {
this.name = name
return {
age: 16
}
}
console.log(new Foo('wscats'))
原題中，因爲返回的是this，而this在構造函數中原本就表明當前實例化對象，最終Foo函數返回實例化對象。
以後調用實例化對象的getName函數，由於在Foo構造函數中沒有爲實例化對象添加任何屬性，當前對象的原型對象(prototype)中尋找getName函數。
固然這裏再拓展個題外話，若是構造函數和原型鏈都有相同的方法，以下面的代碼，那麼默認會拿構造函數的公有方法而不是原型鏈，這個知識點在原題中沒有表現出來，後面改進版我已經加上。
function Foo(name) {
this.name = name
this.getName = function() {
return this.name
}
}
Foo.prototype.name = 'Oaoafly';
Foo.prototype.getName = function() {
return 'Oaoafly'
}
console.log((new Foo('Wscats')).name) //Wscats
console.log((new Foo('Wscats')).getName()) //Wscats
第七問
new new Foo().getName();一樣是運算符優先級問題。作到這一題其實我已經以爲答案沒那麼重要了，關鍵只是考察面試者是否真的知道面試官在考察咱們什麼。
最終實際執行爲:
new ((new Foo()).getName)();
new有參數列表(18)->new有參數列表(18)
先初始化Foo的實例化對象，而後將其原型上的getName函數做爲構造函數再次new，因此最終結果爲3
答案
function Foo() {
getName = function () { alert (1); };
return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
//答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
後續
後續我把這題的難度再稍微加大一點點(附上答案)，在Foo函數裏面加多一個公有方法getName，對於下面這題若是用在面試題上那經過率可能就更低了，由於難度又大了一點，又多了兩個坑，可是明白了這題的原理就等同於明白了上面全部的知識點了
function Foo() {
this.getName = function() {
console.log(3);
return {
getName: getName //這個就是第六問中涉及的構造函數的返回值問題
}
}; //這個就是第六問中涉及到的，JS構造函數公有方法和原型鏈方法的優先級
getName = function() {
console.log(1);
};
return this
}
Foo.getName = function() {
console.log(2);
};
Foo.prototype.getName = function() {
console.log(6);
};
var getName = function() {
console.log(4);
};
function getName() {
console.log(5);
} //答案：
Foo.getName(); //2
getName(); //4
console.log(Foo())
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
//多了一問
new Foo().getName().getName(); //3 1
new new Foo().getName(); //3
參考
最後，其實我是不建議把這些題做爲考察面試者的惟一評判，可是做爲一名合格的前端工程師咱們不該該由於浮躁忽略了咱們的一些最基本的基礎知識，固然我也祝願全部面試者找到一份理想的工做，祝願全部面試官找到心中那匹千里馬～
@Wscats 原題最第一版來源：
- 1. 前端程序員常常忽視的一個JavaScript面試題
- 2. 前端程序員面試常見題
- 3. 【javascript常見面試題】常見前端面試題及答案
- 4. 好程序員Java教程分享JavaScript常見面試題一
- 5. 12個常見的前端面試題
- 6. 前端常見面試題
- 7. 平常前端面試題
- 8. 常見前端面試題
- 9. 前端面試題 -- JavaScript (一)
- 10. 前端常見面試題（二）————前端
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 常用的分佈式事務解決方案
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。