摘要：比如如果不使用構(gòu)造函數(shù)，則和是對(duì)象的方法，兩個(gè)方法的作用是一樣的誰(shuí)誰(shuí)，就把指向誰(shuí)。，本題提到了冒泡算法，那么就認(rèn)為不是要使用原生的方法，要自己封裝一個(gè)類(lèi)似功能的方法或稱(chēng)函數(shù)。就是通過(guò)中構(gòu)造函數(shù)原型鏈繼承的方式來(lái)實(shí)現(xiàn)的。

?，es6中的高級(jí)數(shù)據(jù)結(jié)構(gòu)set和map的使用以及與es5中舊有的obj、array等結(jié)構(gòu)的差別？
(1) Set構(gòu)建函數(shù)可以接受一個(gè)數(shù)組作為初始化參數(shù)

var s = new Set([1,2,3,4,"1","2","3","4"]);

(2) 有以下方法：add、delete、has、clear 作用如其名
(3) 可以用Array.from方法將Set結(jié)構(gòu)轉(zhuǎn)換為數(shù)組結(jié)構(gòu)

var items = new Set([1,2,3,4,5]);
var new_array = Array.from( items );

(4) Set中每個(gè)元素只存在一個(gè)key
(4) es5中js對(duì)象只可以使用字符串充當(dāng)key值，一定程度上有限制。而Map結(jié)構(gòu)就是為了解決這一問(wèn)題。
(5) 可以接受一個(gè)二維數(shù)組作為初始化參數(shù)

var s = new Map([["name","小明"],["title","Author"]])
//map.size //2
//map.has("name") //true
//map.get("name") //小明

?，js中的this，比如es6箭頭函數(shù)中的this
比較基礎(chǔ)的來(lái)講，就是“指函數(shù)執(zhí)行時(shí)，它的上一級(jí)對(duì)象，如果沒(méi)有上一級(jí)對(duì)象，則為最高層Window”。

當(dāng)然1，需要區(qū)分strict模式，因?yàn)樵趕trict模式中，this不會(huì)指到window，而是undefined。比如：

function abc(){
  console.log(this);
}
或
var abc = function (){
  console.log(this);
}

abc(); //非嚴(yán)格模式下返回 Window
       //嚴(yán)格模式下返回 undefined

2，es6中箭頭函數(shù)會(huì)有所差異："箭頭函數(shù)中的this，繼承父級(jí)執(zhí)行上下文"。在定義的時(shí)候就已經(jīng)被決定了，無(wú)論使用apply還是call都無(wú)法改變。（其實(shí)這個(gè)改變主要意義是為了向靜態(tài)化靠攏，因?yàn)榇蠖鄶?shù)語(yǔ)言，比如java、php中的this，即和箭頭函數(shù)中的this指向一樣，而es5中非new+構(gòu)造函數(shù)創(chuàng)建的函數(shù)的this，太特殊了），例子：

es5中：
var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say(); //22

而在es6中
var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say(); //11

3，有一些方法可以改變this的指向，比如new+構(gòu)造函數(shù)方式，比如apply與call等。比如：

var a=11
function test1(){
    a=22;
    let b=function(){
        console.log(this.a);
    };
    b();
}
var x = new test1();//22

如果不使用構(gòu)造函數(shù)，則：
var a=11
var test1 = {
    a:22,
    b:function(){
        console.log(this.a);
    }
}
var x = test1.b;
console.log(x());//11

//call和apply是Function對(duì)象的方法，兩個(gè)方法的作用是一樣的：
//call誰(shuí),apply誰(shuí)，就把this指向誰(shuí)。
//call與apply的區(qū)別就在于call的參數(shù)需要一個(gè)個(gè)傳，而apply接受一個(gè)數(shù)組作為參數(shù)。
window.color = "red";
document.color = "yellow";

var s1 = {color: "blue" };
function changeColor(){
    console.log(this.color);
}

changeColor.call();         //red (默認(rèn)傳遞參數(shù))
changeColor.call(window);   //red
changeColor.call(document); //yellow
changeColor.call(this);     //red
changeColor.call(s1);       //blue

參考：https://www.cnblogs.com/pssp/... -https://blog.csdn.net/liwusen... - https://blog.csdn.net/ganying...

?，前端開(kāi)發(fā)幾種設(shè)計(jì)模式的概念，及典型使用場(chǎng)景。參考：http://garychang.cn/2017/01/1...

1，單例模式：聲明一個(gè)類(lèi)，在其中使用閉包，那么這個(gè)類(lèi)中的變量是一直存在于內(nèi)存中的，每次實(shí)例化這個(gè)類(lèi)，都會(huì)去判斷內(nèi)存中該類(lèi)是否存在，即成為單例。參考，https://www.cnblogs.com/yongl...
2，觀察者模式：設(shè)計(jì)該模式背后的主要?jiǎng)恿κ谴龠M(jìn)形成松散耦合。在這種模式中，并不是一個(gè)對(duì)象調(diào)用另一個(gè)對(duì)象的方法，而是一個(gè)對(duì)象訂閱另一個(gè)對(duì)象的特定活動(dòng)并在狀態(tài)改變后獲得通知。參考，https://www.cnblogs.com/haoyi...
3，工廠模式。
4，裝飾者模式。
and so on..

?，mvvm和mvc的架構(gòu)模式的概念和區(qū)別
(1) mvc：Model-View-Controller。 model是數(shù)據(jù)，view是用戶(hù)視圖層，controller是邏輯處理層。
(2) mvvm：Model-View-ViewModel。徹底切斷model和view層的聯(lián)系，使用雙向綁定進(jìn)行交互，view層如果修改，model層會(huì)修改，反之也會(huì)發(fā)生修改。比如AngularJs

?，請(qǐng)寫(xiě)出從"在瀏覽器輸入域名"到"頁(yè)面靜態(tài)資源完全加載"的整個(gè)過(guò)程
https://www.cnblogs.com/daiji... - https://segmentfault.com/a/11...

注：我注意到這里是問(wèn)"頁(yè)面靜態(tài)資源完全加載"，而不是"瀏覽器接收數(shù)據(jù)"，所以需要把瀏覽器解析html代碼的過(guò)程也詳述進(jìn)來(lái)，即引發(fā)面試官下一問(wèn)題..

?，瀏覽器加載文件的方式（js是在所有靜態(tài)文件下載完之后運(yùn)行，還是下載完js即刻運(yùn)行？2，加載方式和js、css等一樣嗎）
https://segmentfault.com/a/11...

?，冒泡排序算法將以下數(shù)組 var a = [B,A,E,C,D] 排序成a = [A,B,C,D,E]
1，冒泡算法的思想是：每一次對(duì)比相鄰兩個(gè)數(shù)據(jù)的大小，小的排在前面，如果前面的數(shù)據(jù)比后面的大就交換這兩個(gè)數(shù)的位置。
2，使用string.charCodeAt()方法來(lái)判斷一個(gè)字符的ASCII碼數(shù)值。從A-Z，依次增加。
3，本題提到了"冒泡算法"，那么就認(rèn)為不是要使用javascript原生的sort()方法，要自己封裝一個(gè)類(lèi)似功能的方法或稱(chēng)函數(shù)。
4，封裝冒泡算法如下：

function sortage (arr)
{
    for (let i = 0;i arr[j].charCodeAt(0)){
                let temp_l = arr[j];
                let temp_r = arr[i];
                arr[i] = temp_l;
                arr[j] = temp_r;
            }
        }
    }
    return arr;
}

let sampleArr = ["E","A","C","F","B","D"];

sortage(sampleArr);//["A","B","C","D","E","F"]

?，組件化思想是什么意思，實(shí)際應(yīng)用場(chǎng)景如何？與之相對(duì)應(yīng)的典型前端架構(gòu)思想是什么？二者有何區(qū)別？
參考：https://www.jianshu.com/p/944...

?，大概了解一下移動(dòng)開(kāi)發(fā)的幾種css布局，比如css3新標(biāo)準(zhǔn)的flexible布局和grid布局等等
1，css2.1中的布局方式：

1）block布局：為了展示文檔流。
2）inline布局：為了展示文本。
3）table布局：為了展示2D信息信息。
4）定位布局：為了非常直接地定位元素而設(shè)計(jì)出來(lái)的布局模式，定位元素基本與其他元素?zé)o關(guān)。

2，css3中引入了新的布局模式：伸縮布局，是為了呈現(xiàn)復(fù)雜的應(yīng)用與頁(yè)面而設(shè)計(jì)出來(lái)的。
3，一個(gè)伸縮布局，即Flexbox是由一個(gè)伸縮容器（flex containers）和在這個(gè)容器里的伸縮項(xiàng)目（flex items）組成。
4，常見(jiàn)屬性：

1，flex-direction: row | row-reverse | column | column-reverse;決定浮動(dòng)方向是橫向還是縱向。
2，flex-wrap: nowrap | wrap 決定是否換行顯示
3，flex-flow:  || 
4，justify-content: flex-start | flex-end | center | space-between | space-around;項(xiàng)目在主軸上的對(duì)齊方式(主軸究竟是哪個(gè)軸要看屬性flex-direction的設(shè)置了),
5，flex: 比例占用。舉例：
    .main {
      width: 600px;
    }
    .left {
      flex: 1;
    }
    .right {
      flex: 2;
    }
    是表示中間寬度為定寬600px,.left與.right按照1:2的比例占用flex container的剩余全部空間

參考：https://www.cnblogs.com/xuyun...

?，React組件的生命周期
總體上分為三個(gè)狀態(tài)，以及分布于其中的鉤子：

1，實(shí)例化（掛載）
    getDefaultProps
    getInitialState
    componentWillMount
    render
    componentDidMount
2，存在期（運(yùn)行）
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    render
    componentDidUpdate
3，銷(xiāo)毀&清理期
    componentWillUnmount

參考：http://react-china.org/t/reac...

?，React可控組件和非可控組件分別是什么區(qū)別，一般使用場(chǎng)景是什么

?，頁(yè)面加載速度優(yōu)化方法。倘若有1000萬(wàn)用戶(hù)反映網(wǎng)頁(yè)顯示很"卡"（大于3s），如何針對(duì)此情況立項(xiàng)排查？

?，前端安全有了解嗎。
常見(jiàn)的前端安全問(wèn)題：

1，xss: 跨域腳本攻擊
    a,反射形：主要依靠站點(diǎn)服務(wù)端返回腳本，在客戶(hù)端觸發(fā)執(zhí)行從而發(fā)起Web攻擊。前端應(yīng)對(duì)方案主要就是要過(guò)濾轉(zhuǎn)義后臺(tái)傳過(guò)來(lái)的標(biāo)簽，比如script標(biāo)簽，以及標(biāo)簽屬性，比如onerror等屬性。后端反向一致。
    b,存儲(chǔ)型：https://segmentfault.com/a/1190000011459463#articleHeader3
2，csrf: 跨站請(qǐng)求偽造
    https://segmentfault.com/a/1190000011459463#articleHeader4
    

參考：https://segmentfault.com/a/11...

?，AngularJs中雙向綁定的實(shí)現(xiàn)原理？臟值檢測(cè)呢？

雙向綁定是mvvm框架的核心特點(diǎn)。angular作為經(jīng)典mvvm框架，它內(nèi)部封裝了各種事件，例如click, settimeout,xhr response等。在其中觸發(fā)$digest循環(huán)，這個(gè)循環(huán)里會(huì)遍歷$watch列表，只要其中有值發(fā)生改變，$digest就會(huì)遞歸觸發(fā)，比較舊值和新值，直到?jīng)]有值發(fā)生改變，完成最后一次$digest循環(huán)。這個(gè)時(shí)候更新視圖，使其與數(shù)據(jù)模型一致。臟值檢測(cè)的實(shí)現(xiàn)原理也在其中，只要$digest循環(huán)在進(jìn)行，那么就存在$dirty臟值。

?，AngularJs中依賴(lài)注入的實(shí)現(xiàn)原理？html偽屬性指令呢？
依賴(lài)注入（Dependency Injection，簡(jiǎn)稱(chēng)DI）是c#、java等語(yǔ)言框架設(shè)計(jì)原則中"控制反轉(zhuǎn)"的典型案例。angular把它引入到j(luò)s中。它實(shí)際工作的原理如下：

1，得到函數(shù)的依賴(lài)項(xiàng)（即參數(shù)）
    使用Function.prototype.toString，得到函數(shù)的源碼字符串，然后解析其中的依賴(lài)項(xiàng).
2，查找依賴(lài)項(xiàng)所對(duì)應(yīng)的對(duì)象。
    在angular的一個(gè)對(duì)象數(shù)組中找到這個(gè)對(duì)象即可
3，執(zhí)行時(shí)注入：
    通過(guò) fn.apply方法把執(zhí)行上下文，和依賴(lài)列表傳入函數(shù)并執(zhí)行
    

angular指令本質(zhì)上是對(duì)html的補(bǔ)充擴(kuò)展。在angular運(yùn)行的過(guò)程中，會(huì)啟動(dòng)一個(gè)叫$compile的服務(wù)，這個(gè)服務(wù)會(huì)對(duì)dom樹(shù)進(jìn)行遍歷，找到樹(shù)上所有的指令名，并且對(duì)應(yīng)運(yùn)行。

參考：https://www.cnblogs.com/etoah... -

?，講一下你理解的promise。
Promise的誕生其實(shí)一開(kāi)始是為了加強(qiáng)node后臺(tái)可讀性的：因?yàn)閚odeJs以豐富的異步處理而提高效率著稱(chēng)，但是過(guò)多的異步操作會(huì)降低代碼的可讀性，于是在es6版本中Promise應(yīng)運(yùn)而生。
一般表示形式：

new Promise(
    function(resolve, reject) {
        if (/* success */) {
            // ...執(zhí)行代碼
            resolve();
        } else { /* fail */
            // ...執(zhí)行代碼
            reject();
        }
    }
);

方法：

1，Promise.prototype.then()
2，Promise.prototype.catch()
and so on..

關(guān)于promise的resolve和reject以及promise狀態(tài)：

如果then()方法中返回了一個(gè)參數(shù)值，那么返回的Promise將會(huì)變成接收狀態(tài)。
如果then()方法中拋出了一個(gè)異常，那么返回的Promise將會(huì)變成拒絕狀態(tài)。
如果then()方法調(diào)用resolve()方法，那么返回的Promise將會(huì)變成接收狀態(tài)。
如果then()方法調(diào)用reject()方法，那么返回的Promise將會(huì)變成拒絕狀態(tài)。
如果then()方法沒(méi)有明確指定的resolve(data)/reject(data)/return data時(shí)，那么返回的新Promise就是接收狀態(tài)，可以一層一層地往下傳遞。

?，Babel是如何編譯es6中的class的。
就是通過(guò)es5中 構(gòu)造函數(shù) + prototype原型鏈 繼承的方式來(lái)實(shí)現(xiàn)的。
參考：https://segmentfault.com/a/11...

?，ES6中數(shù)組和對(duì)象新增的常用操作方法。
?，Jquery（或zepto）和Angular源碼經(jīng)典部分解析。