關於前端面試小結

靈魂拷問開始咯，想怎麼答就怎麼答？

來自一個準備前去面試的前端新人，學習這東西已經2年多了，可是初看看這些面試題，居然有些不知所措，不知道怎麼總結語言是其次，我感受主要仍是學的js太淺，不夠深，欠缺理論知識，有些東西仍是須要理解的，理解的基礎是必須懂得多，矇頭學習，不問世事。是確定不行的，看來還須要努力成長，不斷學習。求大神賜教，感激萬分，僅供參考，若有問題，請留言告知，臨表涕零，不知所言！

1.虛擬DOM是什麼東東？

1.虛擬DOM是DOM的抽象，(感受像一種概念吧，虛無縹緲，若即若離) 其本質是JavaScript對象，（本質？？？就是他是JS的兒子吧） 它相較於原生DOM更加輕量級。（也就是性能更好唄，比較優秀哈）

2.原型鏈又是什麼？

2.原型鏈這三字拆開看 原型：是什麼？prototype應該就是了 鏈：__proto__就是狗鏈了 這三字合在一塊兒就發生化學反應了 原型prototype之上的JS本源一貧如洗就是null，還好原型prototype還有個有出息小弟Object養他 否則早餓死了，窮歸窮，可是胸懷鴻浩之志，終於黃天不負有心人，在原型prototype和他的小弟Object 的努力下作出了個大型中轉站（大廠），而且均可以經過鏈子鏈接，中轉站也就管理着下屬String、Number、 Boolean、Array、Function、這5個下屬小弟掙錢養大哥 小弟終究是小弟，啥都很少，大哥多，這不Object及時大大哥咯

3.new是什麼鬼？

3.首先new是哪來的？確定是媽生的！問題來了，孩子他媽是誰？ new一個對象？貌似跟對象有點非同尋常的關係哈！中轉站裏出來的function就不少 到底有多少？辣莫多？多到不得不分類，沒錯就是這麼多。 function的兩大幫派面向對象（構造函數），面向過程（普通函數） 這兩大幫派各有各的優點，面向對象幫派的人多屬性多點子多，面向過程技多武器多 因此雙劍合璧天下無敵，有點樣子哈! 這時候江湖人都想借助他們幫派的力量稱霸天下，因而點子多的面向對象幫規定了 new出一個分身就能夠了，這樣咱們損失也不大，因而new誕生了！

// 實現一個new
var Dog = function(name) {
  this.name = name
}
Dog.prototype.bark = function() {
  console.log('wangwang')
}
Dog.prototype.sayName = function() {
  console.log('my name is ' + this.name)
}
let sanmao = new Dog('三毛')
sanmao.sayName()
sanmao.bark() 
// new 的做用
// 建立一個新對象obj
// 把obj的__proto__指向Dog.prototype 實現繼承
// 執行構造函數，傳遞參數，改變this指向 Dog.call(obj, ...args)
// 最後把obj賦值給sanmao

4.promise是什麼，怎麼理解？

4.JS異步編程解決方案之一

(1)promise 對象初始化狀態爲 pending

(2) 當調用resolve(成功)，會由pending => fulfilled

(3) 當調用reject(失敗)，會由pending => rejected

const request = url => { 
    return new Promise((resolve, reject) => 
{
        $.get(url, data => {
            resolve(data)
        });
    })
};

// 請求data1

request(url).then(data1 => {
    return request(data1.url);   
})
.then(data2 => {
    return request(data2.url);
})
.then(data3 => {
    console.log(data3);
})
.catch(err => throw new Error(err));

5.事件流是什麼東西？

5.事件流描述的是從頁面中接受事件的順序。

三大階段： 捕獲階段（由外向內），

目標階段（目標階段中誰先註冊誰先執行），

冒泡階段（由內向外）

（操做試試看就懂了哦！！！）

6.深拷貝，淺拷貝是什麼？

6.淺拷貝只複製一層對象的屬性

深拷貝是對對象以及對象的全部子對象進行拷貝

（詳解的話須要討論討論複製路徑問題）

7.call、apply,bind是什麼？

7.咱們知道 apply() 和 call() 都是爲了改變某個函數運行時的上下文而存在的（就是爲了改變函數內部的 this 指向）。

而後，由於這兩個方法會當即調用，因此爲了彌補它們的缺失，還有個方法 bind()，它不會當即調用（可控）

8.BFC是什麼？

8.block formatting context：塊級格式上下文

BFC 最大的一個做用就是：在頁面上有一個獨立隔離容器，

容器內的元素 和 容器 外的元素佈局不會相互影響。

9.解構是什麼？？

9打破數組結構，將其拆分紅成更小部分的過程

異步解決方案之一

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}

const {firstName,age} = details;


console.log(firstName);      //Code 

console.log(age);       // 22



let list = [221,'Baker Street','London'];
let [houseNo,street] = list;
console.log(houseNo,street);// 221 , Baker Street

let list = [221,'Baker Street','London'];
let [houseNo,...street] = list;
console.log(houseNo,street);// 221   Baker Street，London

10.防抖和節流

10.防抖與節流函數是一種最經常使用的 高頻觸發優化方式，能對性能有較大的幫助。

防抖 (debounce): 將屢次高頻操做優化爲只在最後一次執行，一般使用的場景是：用戶輸入， 只需再輸入完成後作一次輸入校驗便可。

節流(throttle): 每隔一段時間後執行一次，也就是下降頻率，將高頻操做優化成低頻操做，

一般使用場景: 滾動條事件 或者 resize 事件，一般每隔 100~500 ms執行一次便可。