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

一面

面試小哥很和藹,連自我介紹都不讓我說。直接上手就拿紙開始寫題讓我回答。

第一題(比較簡單 就是考變量提高和異步)

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的生命週期

---

二面(後期有時間再續)

總結

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