摘要：作為構(gòu)造函數(shù)使用，綁定到新創(chuàng)建的對(duì)象。內(nèi)部實(shí)現(xiàn)類和類的繼承構(gòu)造函數(shù)構(gòu)造函數(shù)調(diào)用父類構(gòu)造函數(shù)參考請(qǐng)盡可能詳盡的解釋的工作原理的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用來(lái)操作而更新頁(yè)面。

1 . 請(qǐng)解釋事件代理 (event delegation)

當(dāng)需要對(duì)很多元素添加事件的時(shí)，可以通過(guò)將事件添加到它們的父節(jié)點(diǎn)通過(guò)委托來(lái)觸發(fā)處理函數(shù)。其中利用到了瀏覽器的事件冒泡機(jī)制。

var delegate = function(client, clientMethod) {
  return function() {
      return clientMethod.apply(client, arguments);
  }
}

var agentMethod = delegate (client, clientMethod);
agentMethod();


// 獲取父節(jié)點(diǎn)，并為它添加一個(gè)click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
  // 檢查事件源e.targe是否為L(zhǎng)i
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的處理過(guò)程在這里
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});

2 . 談?wù)劄g覽器的事件冒泡機(jī)制

對(duì)于事件的捕獲和處理，不同的瀏覽器廠商有不同的處理機(jī)制，我們以W3C對(duì)DOM2.0定義的標(biāo)準(zhǔn)事件為例
DOM2.0模型將事件處理流程分為三個(gè)階段：一、事件捕獲階段，二、事件目標(biāo)階段，三、事件起泡階段。

事件捕獲：當(dāng)某個(gè)元素觸發(fā)某個(gè)事件（如onclick），頂層對(duì)象document就會(huì)發(fā)出一個(gè)事件流，隨著DOM樹的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去，直到到達(dá)事件真正發(fā)生的目標(biāo)元素。在這個(gè)過(guò)程中，事件相應(yīng)的監(jiān)聽函數(shù)是不會(huì)被觸發(fā)的。

事件目標(biāo)：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，那就不執(zhí)行。

事件起泡：從目標(biāo)元素開始，往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來(lái)組織事件的冒泡傳播。

3 . JavaScript 中 this 是如何工作的。

作為函數(shù)調(diào)用，this 綁定全局對(duì)象，瀏覽器環(huán)境全局對(duì)象為 window 。

內(nèi)部函數(shù)的 this 也綁定全局對(duì)象，應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上，這是 JavaScript的缺陷，用that替換。

作為構(gòu)造函數(shù)使用，this 綁定到新創(chuàng)建的對(duì)象。

作為對(duì)象方法使用，this 綁定到該對(duì)象。

使用apply或call調(diào)用 this 將會(huì)被顯式設(shè)置為函數(shù)調(diào)用的第一個(gè)參數(shù)。

4 . 談?wù)凜ommonJs 、AMD 和CMD

CommonJS規(guī)范，一個(gè)多帶帶的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)多帶帶的作用域            CommonJS的使用代表：NodeJS
AMD 即Asynchronous Module Definition 異步模塊定義 它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范 AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出
CMD 即Common Module Definition  通用模塊定義 其代表為SeaJS

requireJS主要解決兩個(gè)問(wèn)題

多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器

js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)

CMD和AMD的區(qū)別

AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊

CMD推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require

5 . 談?wù)剬?duì)IIFE的理解

IIFE即Immediately-Invoked Function Expression 立即執(zhí)行函數(shù)表達(dá)式

不推薦

(function(){})();

推薦

(function(){}());

在javascript里，括號(hào)內(nèi)部不能包含語(yǔ)句，當(dāng)解析器對(duì)代碼進(jìn)行解釋的時(shí)候，先碰到了()，然后碰到function關(guān)鍵字就會(huì)自動(dòng)將()里面的代碼識(shí)別為函數(shù)表達(dá)式而不是函數(shù)聲明。

知識(shí)拓展：

function(){ /* code */ }();  解釋下該代碼能正確執(zhí)行嗎？

不行，在javascript代碼解釋時(shí)，當(dāng)遇到function關(guān)鍵字時(shí)，會(huì)默認(rèn)把它當(dāng)做是一個(gè)函數(shù)聲明，而不是函數(shù)表達(dá)式，如果沒有把它顯視地表達(dá)成函數(shù)表達(dá)式，就報(bào)錯(cuò)了，因?yàn)楹瘮?shù)聲明需要一個(gè)函數(shù)名，而上面的代碼中函數(shù)沒有函數(shù)名。（以上代碼，也正是在執(zhí)行到第一個(gè)左括號(hào)(時(shí)報(bào)錯(cuò)，因?yàn)?前理論上是應(yīng)該有個(gè)函數(shù)名的。）

function foo(){ /* code */ }();  解釋下該代碼能正確執(zhí)行嗎？

在一個(gè)表達(dá)式后面加上括號(hào)，表示該表達(dá)式立即執(zhí)行；而如果是在一個(gè)語(yǔ)句后面加上括號(hào)，該括號(hào)完全和之前的語(yǔ)句無(wú)法匹配，而只是一個(gè)分組操作符，用來(lái)控制運(yùn)算中的優(yōu)先級(jí)（小括號(hào)里的先運(yùn)算）相當(dāng)于先聲明了一個(gè)叫foo的函數(shù)，之后進(jìn)行()內(nèi)的表達(dá)式運(yùn)算，但是()（分組操作符）內(nèi)的表達(dá)式不能為空，所以報(bào)錯(cuò)。（以上代碼，也就是執(zhí)行到右括號(hào)時(shí)，發(fā)現(xiàn)表達(dá)式為空，所以報(bào)錯(cuò)）。

6 . .call 和 .apply 的區(qū)別是什么？

    foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

call, apply方法區(qū)別是,從第二個(gè)參數(shù)起, call方法參數(shù)將依次傳遞給借用的方法作參數(shù), 而apply直接將這些參數(shù)放到一個(gè)數(shù)組中再傳遞, 最后借用方法的參數(shù)列表是一樣的.

7 . 請(qǐng)解釋 Function.prototype.bind？

bind() 方法的主要作用就是將函數(shù)綁定至某個(gè)對(duì)象，bind() 方法會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)this對(duì)象的值會(huì)被綁定到傳入bind() 函數(shù)的值。

原理

Function.prototype.bind = function(context) {
 var self = this; // 保存原函數(shù)
 return function() { // 返回一個(gè)新函數(shù)
  return self.apply(context, arguments); // 執(zhí)行新函數(shù)時(shí)，將傳入的上下文context作為新函數(shù)的this
 }
}

用法：

var paint = {
 color: "red",
 count: 0,
 updateCount: function() {
  this.count++;
  console.log(this.count);
 }
};

// 事件處理函數(shù)綁定的錯(cuò)誤方法：
document.querySelector("button")
 .addEventListener("click", paint.updateCount); // paint.updateCount函數(shù)的this指向變成了該DOM對(duì)象

// 事件處理函數(shù)綁定的正確方法：
document.querySelector("button")
 .addEventListener("click", paint.updateCount.bind(paint)); // paint.updateCount函數(shù)的this指向變成了paint

8 . 請(qǐng)解釋原型繼承 (prototypal inheritance) 的原理。

當(dāng)查找一個(gè)對(duì)象的屬性時(shí)，JavaScript 會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止。——出自JavaScript秘密花園

JavaScript中的每個(gè)對(duì)象，都有一個(gè)內(nèi)置的 proto 屬性。這個(gè)屬性是編程不可見的（雖然ES6標(biāo)準(zhǔn)中開放了這個(gè)屬性，然而瀏覽器對(duì)這個(gè)屬性的可見性的支持不同），它實(shí)際上是對(duì)另一個(gè)對(duì)象或者 null 的引用。

當(dāng)一個(gè)對(duì)象需要引用一個(gè)屬性時(shí)，JavaScript引擎首先會(huì)從這個(gè)對(duì)象自身的屬性表中尋找這個(gè)屬性標(biāo)識(shí)，如果找到則進(jìn)行相應(yīng)讀寫操作，若沒有在自身的屬性表中找到，則在 proto 屬性引用的對(duì)象的屬性表中查找，如此往復(fù)，直到找到這個(gè)屬性或者 proto 屬性指向 null 為止。

以下代碼展示了JS引擎如何查找屬性：

//__proto__ 是一個(gè)不應(yīng)在你代碼中出現(xiàn)的非正規(guī)的用法，這里僅僅用它來(lái)解釋JavaScript原型繼承的工作原理。
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop))
    return obj[prop]
else if (obj.__proto__ !== null)
    return getProperty(obj.__proto__, prop)
else
    return undefined
}

JS的ECMA規(guī)范只允許我們采用 new 運(yùn)算符來(lái)進(jìn)行原型繼承

原型繼承

function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype = {
    print: function () { console.log(this.x, this.y); }
};

var p = new Point(10, 20);
p.print(); // 10 20

順便闡述下new 運(yùn)算符是如何工作的?

創(chuàng)建類的實(shí)例。這步是把一個(gè)空的對(duì)象的 proto 屬性設(shè)置為 F.prototype 。

初始化實(shí)例。函數(shù) F 被傳入?yún)?shù)并調(diào)用，關(guān)鍵字 this 被設(shè)定為該實(shí)例。

返回實(shí)例。

function New (f) {
    var n = { "__proto__": f.prototype }; /*第一步*/
    return function () {
        f.apply(n, arguments);            /*第二步*/
        return n;                         /*第三步*/
    };
}

JavaScript中真正的原型繼承

Object.create = function (parent) {
    function F() {}
    F.prototype = parent;
    return new F();
};

使用真正的原型繼承（如 Object.create 以及 __proto__）還是存在以下缺點(diǎn)：

標(biāo)準(zhǔn)性差：__proto__ 不是一個(gè)標(biāo)準(zhǔn)用法，甚至是一個(gè)不贊成使用的用法。同時(shí)原生態(tài)的 Object.create 和道爺寫的原版也不盡相同。

優(yōu)化性差： 不論是原生的還是自定義的 Object.create ，其性能都遠(yuǎn)沒有 new 的優(yōu)化程度高，前者要比后者慢高達(dá)10倍。

ES6 內(nèi)部實(shí)現(xiàn)類和類的繼承

class Parent {
    constructor(name) { //構(gòu)造函數(shù)
          this.name = name;
    }
    say() {
          console.log("Hello, " + this.name + "!");
    }
}

class Children extends Parent {
    constructor(name) { //構(gòu)造函數(shù)
        super(name);    //調(diào)用父類構(gòu)造函數(shù)
        // ...
    }
    say() {
          console.log("Hello, " + this.name + "! hoo~~");
    }
}

參考：

http://blog.csdn.net/xujie_03...

http://blog.vjeux.com/2011/ja...

9 . 請(qǐng)盡可能詳盡的解釋 AJAX 的工作原理

Ajax 的原理簡(jiǎn)單來(lái)說(shuō)通過(guò) XmlHttpRequest 對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用 JavaScript來(lái)操作 DOM 而更新頁(yè)面。  這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。

不使用ajax工作原理

使用ajax工作原理

10 . javascript中"attribute" 和 "property" 的區(qū)別是什么？

property 和 attribute非常容易混淆，兩個(gè)單詞的中文翻譯也都非常相近（property：屬性，attribute：特性），但實(shí)際上，二者是不同的東西，屬于不同的范疇。每一個(gè)DOM對(duì)象都會(huì)有它默認(rèn)的基本屬性，而在創(chuàng)建的時(shí)候，它只會(huì)創(chuàng)建這些基本屬性，我們?cè)赥AG標(biāo)簽中自定義的屬性是不會(huì)直接放到DOM中的。

property是DOM中的屬性，是JavaScript里的對(duì)象；

attribute是HTML標(biāo)簽上的特性，它的值只能夠是字符串；

DOM有其默認(rèn)的基本屬性，而這些屬性就是所謂的“property”，無(wú)論如何，它們都會(huì)在初始化的時(shí)候再DOM對(duì)象上創(chuàng)建。

如果在TAG對(duì)這些屬性進(jìn)行賦值，那么這些值就會(huì)作為初始值賦給DOM的同名property。