北京某雨醫生前端面試彙總

不愛寫程式碼的程式設計師發表於2018-03-09
前端面試

北京某雨醫生前端面試彙總

一面

面試小哥很和善,連自我介紹都不讓我說。直接上手就拿紙開始寫題讓我回答。
第一題(比較簡單 就是考變數提升和非同步)
var a = 10;
function A(){
    console.log(a);		//第一次輸出undefined 
    //答案：函式內部變數a宣告提升 值為undefined,找變數先找函式當前作用域的變數
    var a = 20;
    console.log(a);		//第二次輸出：20   因為上面變數賦值為20
    for(var a=1;a<5;a++){
    	setTimeout(function(){
    		console.log(a);	//第四次輸出4個5   
    		//答案：因為定時器是非同步的  非同步程式碼會扔到任務佇列上。
    		先讓主執行緒程式碼執行。
    		等任務佇列通知可以執行才會扔到主執行緒執行定時器。
    		所以當定時器在執行的時候 for裡面的a已經為5了
    	},0)
    }
}
A();
console.log(a);		//第三次輸出  10



=========================我覺得可以提高一下難度=====================

//各位同學猜猜答案 最好輸出一下順序 順序一定要對

console.log(a);                         //輸出什麼？
var a = "10";
console.log(a);                         //輸出什麼
function A(a){
    console.log(a);	                //輸出什麼？
    var a = "20";
    console.log(a);	                //輸出什麼？
    arguments[0]  = "40";
    console.log(a);                     //輸出什麼？
    for(var a=1;a<5;a++){
    	setTimeout(function(){
	    console.log(new Date+a);    //輸出什麼？
    	},1000)
    }
    console.log(new Date+a);            //輸出什麼？
}
A("30");
console.log(a);	                        //輸出什麼？


複製程式碼
第二題(this指向 太簡單 如果看了有意思的前端面試題同學 這個題就很easy)
var obj = {
    showFunction:function(){
    }
}
obj.showFunction()  //this指向誰  obj
var newObj = obj.showFunction;
newObj()           //this指向誰    window


//隨後粹不及防的問了我一下在js嚴格模式下 newObj()指向誰
忘了當時怎麼說的了，因為我沒有測試過。
回來查了一下,嚴格模式下this不會自動轉換成window,預設為undefined。

複製程式碼
第三題 this幾種指向
this一般指向的都是物件。所以一般函式和變數的直接呼叫著如果是物件那麼this指向就是誰。
  • 1:在全域性直接呼叫或者通過window this呼叫都是指向window
var a = 10;
window.a;  == 10;
this.a     == 10;
a          == 10;
複製程式碼
  • 2:物件呼叫中this指向當前呼叫的物件
var obj = {
    showFunction:function(){
        this == obj
    }
}
複製程式碼
  • 3:this指向繫結事件的dom元素
document.querySelector("#id").onclick =function(){
    this == document.querySelector("#id")
}
複製程式碼
  • 4:建構函式中的this指向例項化的物件
function Person(){
    this.name = "宋偉老師" 
    //這裡面的this會在new呼叫函式的指向隱式建立的物件 
    並隱式返回出來
}
var man = new Person();

複製程式碼
  • 5:call和apply和bind中去指向函式體內的this指向
var obj = {
    names : "宋偉老師"
}
var names ="萬達老師";
function fun(){
    console.log(this.names);
}

fun.call(obj);      //"宋偉老師"
fun.apply(obj);     //"宋偉老師"
fun.bind(obj)();    //"宋偉老師"
複製程式碼

補充一個小知識

呼叫函式有哪些方法
function fun(){}

//直接函式呼叫
1: fun();        
//new操作符呼叫,唯一不同 這樣呼叫函式會把函式體內this指向變成隱式生成的空物件的不是window的了 
2: new fun();  

//可以自己試一試玩玩
var names = "宋偉老師"
function fun(){  console.log(this.names) };
new fun();   //輸出什麼？

//call方法 其實是fun() 在隱式呼叫的過程fun.call(window)。
要不然函式直接呼叫的時候,裡面this怎麼會變成window的
3:fun.call(window);
//bind不用說 和apply不同就是傳引數是陣列傳參
4:fun.apply(window);
//bind呼叫函式是返回一個函式體 需要再一次呼叫執行
5:fun.bind(window)();   

複製程式碼
第四題 什麼是原型鏈
1:js高階程式設計中說的是 當一個引用型別繼承另一個引用型別的屬性和方法時候就會產生一個原型連。

2:我說 原型鏈就是例項化和建構函式的原型的一種關聯。主要用來保證變數的訪問順序。
複製程式碼
第五題 什麼是閉包(我面試就等這道題 閉包這個概念我準備這麼多條 一一跟這個面試官聊一聊 其實理解的話 這7句解釋就用一句解釋就可以)
1：有權訪問另一個函式作用域中的變數函式。(js高階程式設計)
2: 函式體內的變數存在函式作用域內就是閉包. (JS權威指南)
3：函式閉包。閉包則是函式的程式碼在執行過程中的一個動態環境，是一個執行期的、動態的概念。(AO)”`(js語言精髓與程式設計實踐)`
4：閉包就是能夠讀取其他函式內部變數的函式。
由於在javascript中，只有函式內部的子函式才能讀取區域性變數，
所以閉包可以理解成“定義在一個函式內部的函式“。(百度百科)
5：內部函式＋外部函式的變數 會形成一個閉包。
6：有權訪問另一個作用域的函式就是閉包。
7：閉包就是函式+執行環境的總稱。
複製程式碼
第六題 什麼是作用域
一句概括。就是函式和變數的可訪問範圍。
作用域分為全域性作用域  函式作用域和eval作用域。
複製程式碼
第7題 css盒模型解釋一下。。。。
盒模型 : margin、padding、border、content

標準盒模型 
(盒模型的高寬度不算padding和border 對應css屬性 box-sizing:content-box)
怪異盒模型
(高寬度算上padding和border 對應css屬性 box-sizing:border-box)
複製程式碼

vue問題(可以去看一下我總結vue面試題 我就不一一解釋了 後期有時間我再續上)

  • 1:虛擬DOM底層實現思路
  • 2:資料雙向繫結的思路
  • 3:vue的生命週期

二面(後期有時間再續)

總結

看到這些題的同學 如果你都會的話 又在北京的小夥伴可以去這家公司試一試。給你們來點自信 。面試這東西就是面試管看你順眼就問你天上有幾顆月亮。看你不順眼 就是問你天上有幾顆星星。所以放平心態,多經歷幾次面試。好了 第一次寫這麼多字的文章，時間有些久了。需要出去做個大保健放鬆一下了。咋們後續。

相關文章