1.下面這段代碼拓春，輸出內(nèi)容是什么，并說明為什么
A. 0 1 2 3 ????B. 0 0 0 0?????C. 4 4 4 4????D. 3 3 3 3

var length = 4;
for(var i=0; i<length; i++){
    setTimeout(function ting(){
        console.log(i);
    }, 2000);
}

答案是C拷肌，原因如下：
setTimeout是異步調(diào)用的，且延遲兩秒執(zhí)行，因此等到setTimeout執(zhí)行的時候蘸拔，這個時候i的值已經(jīng)變成了4，因此循環(huán)四次就會輸出4個4环葵。
以上是個人的理解调窍，這里有更詳細(xì)的介紹：戳我就能看了

2.下面那個選項是返回true的
A. null == undefined
B. null === undefined
C. null instanceof Object
D. NaN == NaN
答案是A，原因如下：
null和undefined是類似的值张遭，undefined值是派生自null值的邓萨，因此A會返回true；可是又因為null和undefined的值雖然類似，可卻是不同類型的值缔恳，因此B返回false宝剖；instanceof 運算符用來檢測 constructor.prototype 是否存在于參數(shù) object 的原型，因此C返回false歉甚；因為NaN與任何值都不相等万细，包括NaN本身，因此D返回false

3.下面的代碼返回的值分別是什么
A. 3 1 ????B. 1 2?????C. 1 3 ????D. 2 1

// 第一段
var one = 1;
function ha (ha_val){
    ha_val = 2;
    ha2(ha_val);
}
function ha2(ha2_val){
    ha2_val = 3;
}
ha(one);
console.log(one);

// 第二段
var two = {
    'val': 1
};
function changeVal_1(two){
    two.val = 2;
    changeVal_2(two.val);
}
function changeVal_2(value){
    value = 3;
}
changeVal_1(two);
console.log(two.val);

答案是B铃芦，原因如下：

• 這題考察的是局部變量跟全局變量的內(nèi)容雅镊，第一段代碼，只是將one的值傳給函數(shù)ha刃滓，并賦值給函數(shù)局部變量ha_val仁烹，因此ha_val變量的值改變，不會影響變量one的值咧虎，所以最后輸出的值是1卓缰。
• 第二段代碼，傳給函數(shù) changeVal_1的是對象two砰诵，而不是僅僅傳了two的值征唬，因此改變的是對象two的值；而傳給函數(shù)changeVal_2的是two.val的值茁彭，改變它的值总寒，不會改變對象two的值，因此最后輸出的值是2理肺。
  點擊查看對應(yīng)的參考文章

4.下面運用了哪個之后摄闸，左右上下偏移量無效
A. position: absolute
B. position: relative
C. position: fixed
D. position: static
答案是D，原因是：
static是position屬性的默認(rèn)值妹萨。這時候年枕，我們稱那個元素沒有被定位，只有設(shè)置了定位之后乎完，我們才能使用offset參數(shù)來為我們的元素指定我們想要的位置熏兄，否則top、left树姨、right摩桶、bottom等偏移量設(shè)置無效

5.Ajax的請求有多少種Callback，分別是什么娃弓？
Ajax請求總共有八種Callback典格，分別是：onSuccess、onFailure台丛、onUninitialized耍缴、onLoading砾肺、onLoaded、onInteractive防嗡、onComplete和onException变汪。

6.ajax的同步請求跟異步請求的區(qū)別是什么？
同步請求：當(dāng)執(zhí)行當(dāng)前ajax的時候會停止執(zhí)行后面的JS代碼蚁趁，直到ajax執(zhí)行完畢后時裙盾，才能繼續(xù)執(zhí)行后面的JS代碼。
異步請求：當(dāng)ajax發(fā)送請求后他嫡，在等待server端返回的這個過程中番官，前臺會繼續(xù) 執(zhí)行ajax塊后面的腳本，直到server端返回正確的結(jié)果才會去執(zhí)行success钢属，也就是說這時候執(zhí)行的是兩個線程徘熔，ajax塊發(fā)出請求后一個線程 和ajax塊后面的腳本（另一個線程）
參考文章：
AJAX中同步和異步的區(qū)別和使用
同步請求和異步請求的區(qū)別

7.用javascript寫一個一秒的定時任務(wù)，一秒之后彈出彈窗淆党，內(nèi)容是“你好”

// 我當(dāng)時的做法是這樣的
var isPause =  false;
var startTime = new Date().getTime();
while(!isPause){
   var nowTime = new Date().getTime();
   if (nowTime - startTime >= 1000) {
       window.alert('你好');
       isPause = true;
   }
}

結(jié)束后去網(wǎng)上看看有沒有更好的方法酷师，發(fā)現(xiàn)網(wǎng)上大部分是直接用setTimeout的，看來是我想太多了染乌？

8.說說對前端工程化的理解

前端工程化

• 使用軟件工程的技術(shù)和方法來進(jìn)行前端項目的開發(fā)山孔、維護(hù)和管理
• 所有能降低成本，并且能提高效率的事情的總稱為工程化
• 軟件工程化關(guān)注的是性能荷憋、穩(wěn)定性台颠、可用性、可維護(hù)性等方面勒庄，一切以這些為目標(biāo)的工作都是"前端工程化"

前端工程化分為這四個部分：規(guī)范化蓉媳，自動化，模塊化锅铅，組件化。

下面是一些詳細(xì)解析上面四個部分內(nèi)容的參考文章：
1.http://www.reibang.com/p/2e096d7d3e03
2.http://www.xuefeng666.com/WebGCH/WebGCH/#%E5%BD%92%E7%B1%BB%E6%8F%8F%E8%BF%B0
3.https://segmentfault.com/a/1190000009815823

9.下面的代碼最終的結(jié)果會輸入什么减宣？

function Test(){
    this.a = 0;
    this.b = function(){
        alert(this.a);
    }
}
Test.prototype = {
    b: function(){
        this.a = 20;
        alert(a);
    },
    c: (function(){
        this.a = 20;
        alert(this.a);
    })()
};
var fanshu = new Test();
fanshu.b();
fanshu.c;

fanshu.b()彈出的數(shù)字是：0
fanshu.c彈出的數(shù)字是：20
原因是：fanshu是Test的實例盐须，當(dāng)調(diào)用fanshu.b()時，會先在實例上查找有沒有b屬性漆腌，發(fā)現(xiàn)有對應(yīng)的b屬性贼邓，因此不會繼續(xù)往上查找，因此彈出的值是0闷尿；當(dāng)調(diào)用fanshu.c時塑径，在實例沒有查找到對應(yīng)的屬性，因此繼續(xù)在原型對象上查找填具，查找到對應(yīng)的c屬性统舀， c屬性是一個立即執(zhí)行的函數(shù)匆骗，因此可以直接執(zhí)行，彈出值20誉简。

10.事件委托的優(yōu)點碉就，如何優(yōu)化？
優(yōu)點：1.減少事件處理程序的綁定闷串，節(jié)省內(nèi)存瓮钥；2.減少dom節(jié)點操作，提高性能
優(yōu)化：1.降低層級烹吵，把事件綁定在低層級的元素上碉熄，不在body元素或者document上綁定；2.即使是用事件委托肋拔，也要減少綁定的次數(shù)锈津。
參考文章：深入理解-事件委托、事件委托優(yōu)缺點

11.用javaScript寫一個用來替換replace方法的方法只损，替換掉下面的字符串

var type = { "company": "信息科技公司", "adjective": "領(lǐng)導(dǎo)nice" };
var date = "{{ company }} {{ adjective }}一姿，而且人才很多。";

額外思考：type的順序可以跟字符串里面的變量順序不一致跃惫，以及字符串的變量不一定存在于type中叮叹。
代碼如下:

function replaceString(type, string){
    var result = [];
    // 對字符串進(jìn)行第一次切割
    var items = string.split("{{");
    // 循環(huán)切割后得到的數(shù)組
    for(var i=0; i<items.length; i++){
        var item = items[i];
        // 對有“}}”的字符串進(jìn)行二次切割，沒有則放進(jìn)新數(shù)組中
        if(item.indexOf('}}') !== -1){
            var pieces = item.split("}}");
            // 獲取對應(yīng)的映射值爆存，并放進(jìn)新數(shù)組中
            var mappingVal = type[pieces[0]] ? type[pieces[0]] : ("{{" + pieces[0] + "}}");
            result.push(mappingVal);
            // 若"}}"后面還有字符串蛉顽，則放進(jìn)新數(shù)組中
            if(pieces.length > 1 && pieces[1] !== ''){
                result.push(pieces[1]);
            }
        }
        else if(item !== ''){
            result.push(item);
        }
    }
    // 連接數(shù)組中各項
    var result = result.join('');
    return result;
}

后來跟朋友討論了下，發(fā)現(xiàn)還可以用遞歸+substring的方法：

function replaceString(type, stringVal){
    var startIndex = 0;
    var res = '';
    function runStr(stringVal, startIndex){
        var leftIndex = stringVal.indexOf('{{', startIndex);
        var rightIndex = stringVal.indexOf("}}", startIndex);
        if(leftIndex !== -1 && rightIndex !== -1){
            var val = stringVal.substring(leftIndex + 2, rightIndex);
            if(type[val]){
                res = stringVal.substring(0, leftIndex) + type[val] + stringVal.substring(rightIndex + 2, stringVal.length);
                startIndex = res.indexOf("{{");
            }
            else {
                startIndex = res.indexOf("}}") + 2;
            }
            runStr(res, startIndex);
        }
    }
    runStr(stringVal, startIndex);
    return (res !== '' ? res : stringVal);
}