14 個折磨人的 JavaScript 面試題
前端工程師有時候面試時會遇到一類面試官,他們問的問題對於語言本身非常較真兒,往往不是候選人可能期待的面向實際的問題(有些候選人強調能幹活就行,至於知不知道其中緣由是無關痛癢的)。這類題目,雖然沒有邏輯,但某種程度說,確實考察了候選人對於 javascript
這門語言的理解。
突然想到這個話題是無聊在翻自己的Github,看看以前都寫過什麼醜貨。然後翻到了這篇解釋Javascript quiz的文章quiz-legend,反正沒事兒,就想搬過來供大家學習、理解、背誦、批判。
問題一
(function(){
returntypeof arguments;//"object"
})();
arguments
是一個Array-like物件,對應的就是傳入函式的引數列表。你可以在任何函式中直接使用該變數。
typeof
操作符只會返回 string
型別的結果。參照如下列表可知對應不同資料, typeof
返回的值都是什麼:
型別 | 結果 |
---|---|
undefined | 'undefined' |
null | 'object' |
Boolean | 'boolean' |
Number | 'number' |
String | 'string' |
Symbol (new in ECMAScript 2015) | 'symbol' |
Host object (provided by the JS environment) | Implementation-dependent |
Function object (implements [[Call]] in ECMA-262 terms) | 'function' |
Any other object | 'object' |
由此我們推斷出,
typeof arguments
是object
問題二
var f =function g(){return23;};
typeof g();//報錯
這是一個名字是 g
的function expression,然後又被賦值給了變數 f
。
這裡的函式名 g
和被其賦值的變數 f
有如下差異:
函式名
g
不能變動,而變數f
可以被重新賦值函式名
g
只能在函式體內部被使用,試圖在函式外部使用g
會報錯的
問題三
(function(x){
delete x;
return x;//1
})(1);
delete
操作符可以從物件中刪除屬性,正確用法如下:
deleteobject
deleteobject['property']
delete
操作符只能作用在物件的屬性上,對變數和函式名無效。也就是說 delete x
是沒有意義的。
你最好也知道,
delete
是不會直接釋放記憶體的,她只是間接的中斷物件引用
問題四
var y =1, x = y =typeof x; x;//"undefined"
我們試圖分解上述程式碼成下面兩步:
var y =1;//step 1
var x = y =typeof x;//step 2
第一步應該沒有異議,我們直接看第二步
賦值表示式從右向左執行
y
被重新賦值為typeof x
的結果,也就是undefined
x
被賦值為右邊表示式(y =typeof x
)的結果,也就是undefined
問題五
(function f(f){
returntypeof f();//"number"
})(function(){return1;});
直接上註釋解釋:
(function f(f){
//這裡的f是傳入的引數function(){ return 1; }
//執行的結果自然是1
returntypeof f();//所以根據問題一的表格我們知道,typeof 1結果是"number"
})(function(){return1;});
問題六
var foo ={
bar:function(){returnthis.baz;},
baz:1
};
(function(){
returntypeof arguments[0]();//"undefined"
})(foo.bar);
這裡你可能會誤以為最終結果是 number
。向函式中傳遞引數可以看作是一種賦值,所以 arguments[0]
得到是是真正的 bar
函式的值,而不是 foo.bar
這個引用,那麼自然 this
也就不會指向 foo
,而是 window
了。
問題七
var foo ={
bar:function(){returnthis.baz;},
baz:1
}
typeof(f = foo.bar)();//"undefined"
這和上一題是一樣的問題, (f = foo.bar)
返回的就是 bar
的值,而不是其引用,那麼 this
也就指的不是 foo
了。
問題八
var f =(function f(){return'1';},function g(){return2;})();
typeof f;//"number"
逗號操作符 對它的每個操作物件求值(從左至右),然後返回最後一個操作物件的值
所以 (function f(){return'1';},function g(){return2;})
的返回值就是函式 g
,然後執行她,那麼結果是 2
;最後再 typeof2
,根據問題一的表格,結果自然是 number
問題九
var x =1;
if(function f(){}){
x +=typeof f;
}
x;//"1undefined"
這個問題的關鍵點,我們在問題二中談到過, function expression
中的函式名 f
是不能在函式體外部訪問的
問題十
var x =[typeof x,typeof y][1];
typeoftypeof x;//"string"
因為沒有宣告過變數
y
,所以typeof y
返回"undefined"
將
typeof y
的結果賦值給x
,也就是說x
現在是"undefined"
然後
typeof x
當然是"string"
最後
typeof"string"
的結果自然還是"string"
問題十一
(function(foo){
returntypeof foo.bar;//"undefined"
})({ foo:{ bar:1}});
這是個純粹的視覺詭計,上註釋
(function(foo){
//這裡的foo,是{ foo: { bar: 1 } },並沒有bar屬性哦。
//bar屬性是在foo.foo下面
//所以這裡結果是"undefined"
returntypeof foo.bar;
})({ foo:{ bar:1}});
問題十二
(function f(){
function f(){return1;}
return f();//2
function f(){return2;}
})();
通過 function declaration
宣告的函式甚至可以在宣告之前使用,這種特性我們稱之為hoisting。於是上述程式碼其實是這樣被執行環境解釋的:
(function f(){
function f(){return1;}
function f(){return2;}
return f();
})();
問題十三
function f(){return f;}
new f()instanceof f;//false
當代碼 new f()
執行時,下面事情將會發生:
一個新物件被建立。它繼承自
f.prototype
建構函式
f
被執行。執行的時候,相應的傳參會被傳入,同時上下文(this
)會被指定為這個新例項。new f
等同於new f()
,只能用在不傳遞任何引數的情況。如果建構函式返回了一個“物件”,那麼這個物件會取代整個
new
出來的結果。如果建構函式沒有返回物件,那麼new
出來的結果為步驟1建立的物件,
ps:一般情況下建構函式不返回任何值,不過使用者如果想覆蓋這個返回值,可以自己選擇返回一個普通物件來覆蓋。當然,返回陣列也會覆蓋,因為陣列也是物件。
於是,我們這裡的 new f()
返回的仍然是函式 f
本身,而並非他的例項
問題十四
with(function(x,undefined){}) length;//2
with
語句將某個物件新增的作用域鏈的頂部,如果在 statement
中有某個未使用名稱空間的變數,跟作用域鏈中的某個屬性同名,則這個變數將指向這個屬性值。如果沒有同名的屬性,則將丟擲 ReferenceError
異常。
OK,現在我們來看,由於 function(x,undefined){}
是一個匿名函式表示式,是函式,就會有 length
屬性,指的就是函式的引數個數。所以最終結果就是 2
了
寫在最後
有人覺得這些題坑爹,也有人覺得開闊了眼界,見仁見智吧。但有一件事是真的,無論你是否堅定的實踐派,缺了理論基礎,也鐵定走不遠 - 你永遠不會見到哪個熟練的技術工人突然成了火箭專家。
看文件、讀標準、結合實踐,才是同志們的決勝之道。
原文:http://www.codeceo.com/article/14-javascript-interview-questions.html
相關推薦
14 個折磨人的 JavaScript 面試題
前端工程師有時候面試時會遇到一類面試官,他們問的問題對於語言本身非常較真兒,往往不是候選人可能期
五個典型的 JavaScript 面試題
一個 data- 本地變量 結果 sco ref 有用 打印 存在 問題1: 範圍(Scope) 思考以下代碼: (function() { var a = b = 5; })(); console.log(b); 控制臺(console)會打印出什
2018年,最經典的26個JavaScript面試題和答案!
根據 Stack Overflow 的 2018 年度調查,JavaScript 連續六年成為最常用的程式語言。所以我們必須面對這樣的現實,JavaScript 已經成為全棧開發技能的基石,在全棧開發面試中都會不可避免地涉及到與 JavaScript 有關的問題。FullStack.Cafe 彙編了
25 個 JavaScript 面試題
1、使用 typeof bar === "object" 判斷 bar 是不是一個物件有神馬潛在的弊端?如何避免這種弊端? 使用 typeof 的弊端是顯而易見的(這種弊端同使用 instanceof ): let obj = {}; let arr = []; co
三個簡單的H5/Egret/JavaScript面試題
以下使用Egret程式碼(TypeScript) 1 /** * k的輸出值是多少 * */ private question1(): void {
[java學習6]你有必要知道的25個JavaScript面試題
/**轉:你有必要知道的25個JavaScript面試題 *原文:http://www.jb51.net/article/77140.htm *看到這個文章,覺得js還有很多東西要弄明白。我把目前能接受的執行一下,這裡做個記錄吧。 **/ /**型別判斷 * 看來O
【轉】典型的JavaScript面試題
() cee not spa tro cnblogs and enc 分配 問題1: 作用域(Scope) 1 (function() { 2 "use strict"; 3 var a = b = 5; 4 })(); 5 console.log(b); 控
10個經典的Java面試題集合
支持 獲得 equal 效率 可用 ash 很快 鍵值對 shm 1.Java的HashMap是如何工作的? HashMap是一個針對數據結構的鍵值,每個鍵都會有相應的值,關鍵是識別這樣的值。 HashMap 基於 hashing 原理,我們通過 put ()和 g
10個Linux腳本面試題,看看你能答出幾個?
linux 入門 shell 1、寫一個腳本,判斷當前系統上所有用戶的shell是否為可登錄shell(即用戶的shell不是/sbin/nologin);分別這兩類用戶的個數;通過字符串比較來實現; declare -a shell declare sum_login=0
分享幾道經典的javascript面試題
cti function 一點 經典的 bsp log 分享 輸出 for 這幾道題目還是有一點意思的,大家可以研究一番,對自己的技能提升絕對有幫助。 1、調用過程中輸出的內容是什麽 function fun(n, o) { console.log(o);
10道典型的JavaScript面試題
開發 var int {} 還要 創建 pts 解決 mode 問題1: 作用域(Scope) 考慮以下代碼: (function() { var a = b = 5; })(); console.log(b); 上述代碼會打印出5。這個問題的陷阱就是
這道javascript 面試題 你必須會
fun prot 試題 concat 作用 val function 運算 return 實現一個函數,運算結果可以滿足如下預期結果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 話不多說
java Html&JavaScript面試題:HTML 的 form 提交之前如何驗證數值文本框的內容全部為數字? 否則的話提示用戶並終止提交?
打開 mit nbsp alert his span value gpo 成功 提交的驗證方法(通過單個字符比較): <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
JavaScript面試題
return nbsp ava 實現 效果 面試題 不存在 其他 javascrip ** js裏面是否存在重載?(面試題目) (1)js裏面不存在重載。 (2)但是可以通過其他方式模擬重載的效果 (通過aruguments數組來實現) 1
javascript--面試題
它的 fun 是否 構造 清空 lis 使用 設置 ring (1)javaScript怎麽清空數組? 如 var arrayList = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘]; 怎麽清空 arrayList 方法1:直接改變arrayList所指向的對
10 個 JDBC 相關的面試題
HERE mysql 關閉 cut create 的區別 創建 highlight 是什麽 1. 什麽是 jdbc? 連接數據庫的程序接口規範 api 2.創建一個 jdbc 連接的主要步驟有哪些? Load driver(比如 Class.forName("com
10個常見的Redis面試題
導讀:在程式設計師面試過程中Redis相關的知識是常被問到的話題。作為一名在網際網路技術行業打擊過成百上千名的資深技術面試官,本文作者總結了面試過程中經常問到的問題。十分值得一讀。 作者簡介:錢文品(老錢),網際網路分散式高併發技術十年老兵,目前任掌閱科技資深後端工程師。熟練使用 Java、Py
javascript面試題 - 關於setTimeout非同步的案例
var t = true; window.setTimeout(function (){ t = false; },1000); while (t){} alert('end'); 結果:死迴圈 解釋:js是單執行緒的,while和alert都是同步程式碼,所以會先執行whil
2018年最全23個阿里架構師面試題(總結篇)
想要進入大型企業的話,首先要有豐富的工作經驗和專案經驗,其次就是有好的表達能力,能說會道。 從程式設計師成長為架構師,需要幾年?從架構師升任CTO,又需要幾年?成長沒有一蹴而就,雞湯喝再多,終究是要回到現實,腳踏實地。 咱們接下來說說一些架構師面試常見的面試題: 1、String,Str
畢業實習,來一波JavaScript面試題刷一下!
JavaScript的組成 JavaScript 由以下三部分組成: ECMAScript(核心):JavaScript 語言基礎 DOM(文件物件模型):規定了訪問HTML和XML的介面 BOM(