摘要：請解釋事件代理事件代理也稱為事件委托，利用了事件冒泡。同源指的是協議域名端口相同，同源策略是一種安全協議。目的同源策略保證了用戶的信息安全，瀏覽器打開多個站點時，互相之間不能利用獲取對方站點的敏感信息。

請解釋事件代理(event delegation)

事件代理也稱為事件委托，利用了事件冒泡。例如：

    
item1
    
item2
    
item3

當頁面li增多時多帶帶給每個li元素添加事件處理程序既繁瑣又容易出錯，利用事件冒泡，在ul去監聽事件，li產生事件往上冒泡時去捕獲，利用e.target來判斷是否為我們的目標元素，是的話就可以做相應操作了。

請解釋JavaScript中this是如何工作的。

作為獨立函數的調用

function func(){
    console.log(this);
}


func();
//Window

全局作用域中聲明一個函數,并調用它,此時函數中的this指向全局對象。

作為對象方法調用

function say(){
    console.log(this);
}

var obj = {
    name: "f2er",
    say: say
};

obj.say();
//Object {name: "f2er"}

當函數作為一個對象的方法調用時,函數中的this綁定到了這個對象。

使用call或apply來調用函數

function func(){
    console.log(this);
}

var obj = {
    name:"f2er"
};

func.call(obj);
//Object {name: "f2er"}

func.apply(obj);
//Object {name: "f2er"}

當使用call()或apply()函數進行函數調用時,傳入參數對象的將被設置為函數體內this的值,這兩個函數都是設置調用函數體內的this值的,且第一個參數都為this,區別是第二個參數apply()是一個參數arguments(類數組對象),而call(),傳遞給他的是一系列參數。

new來調用函數

function F2er(name){
    this.name = name;   
    console.log(this);
}

var f2er = new F2er("f2er");
// F2er {name: "f2er"}

當使用new來調用一個函數時,會創建一個新的對象,然后綁定到Dog()調用中的this。

請解釋原型繼承(prototypal inheritance)的原理。

先上一個例子:

function Super(){
    this.superValue = "super";
}

Super.prototype.getSuperValue = function (){
    return this.superValue;
}

function Sub(){
    this.subValue = "sub";
}

var superInstance = new Super();

Sub.prototype = superInstance;

Sub.prototype.getSubValue = function (){
    return this.subValue;
}

var instance = new Sub();
console.log(instance.getSuperValue());
// super

每個函數Sub都有一個屬性prototype，prototype指向一個原型對象，原型對象中也有一個指向函數的屬性constructor，通過new一個函數Sub可以產生實例instance，調用這個instance的某個屬性或方法時，instance會先查找自身是否有這個方法或者屬性，沒有的話就會去實例的構造函數Sub的原型prototype中查找，即Sub.prototype，如果給原型對象Sub.prototype賦予另一個類型的實例superInstance，則是在superInstance中查找的，這個superInstance中也有屬性prototype指向某個原型對象，以此一級級往上最終到Object.prototype，這樣就形成了原型繼承。

利用此原理可以自己實現一個inherits函數：

function inherits(subType, superType){
    var _prototype = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}

IIFE(立即調用的函數表達式)是什么?有什么作用?

(function fn(){..})(),函數被包含在一個括號內,變成為一個表達式,隨后跟著一個(),就立即執行這個函數,

這種模式就是立即執行函數表達式(Immediately Invoked Function Expression),簡稱IIFE。

?也有用(function fn(){..}())后面的括號在前面的括號內這種形式表示的,這兩種形式在功能上都是一致的。

IIFE的一些作用:

創建作用域,內部保存一些大量臨時變量的代碼防止命名沖突。

一些庫的外層用這種形式包起來防止作用域污染。

運行一些只執行一次的代碼。

(function(){

    var module = require("module");

    module.setup();

    module.run();

})();

用閉包保存狀態

以下點擊頁面標簽的時候，實際并不是彈出每個具體的i的，而是elems.length，因為每個a監聽器中引用的i都是同一個作用域的。

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener("click", function (e) {
        e.preventDefault();
        alert("I am link #" + i);
    }, "false");
}

以下點擊頁面標簽的時候，每一個i傳入一個IIFE，IIFE形成多帶帶一個作用域保存了當時的i值，所以點擊a標簽，可以彈出不同的i值。

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {
    (function (lockedInIndex) {
        elems[i].addEventListener("click", function (e) {
            e.preventDefault();
            alert("I am link #" + lockedInIndex);
        }, "false");
    })(i);
}

什么是閉包(closure)，有什么作用?

當某個函數調用時會創建一個執行環境以及作用域鏈，然后根據arguments和其它命名參數初始化形成活動對象。在外部函數調用結束后，其執行環境與作用域鏈被銷毀，但是其活動對象保存在了閉包之中，最后在閉包函數調用結束后才銷毀。簡單的說，閉包就是能夠讀取其他函數內部變量的函數。在js中，閉包是指有權訪問另一個函數作用域中的變量的函數。

閉包的作用

匿名自執行函數

有的場景下函數只需要執行一次，例如init()之類的函數，其內部變量無需維護，我們可以使用閉包。 我們創建了一個匿名的函數，并立即執行它，由于外部無法引用它內部的變量，因此在函數執行完后會立刻釋放資源，而且不污染全局對象。

封裝

模擬面向對象的代碼風格進行封裝，使私有屬性存在成為可能。

缺點

常駐內存，會增大內存使用量，易造成內存泄露

請指出JavaScript宿主對象和原生對象的區別？

宿主對象是指DOM和BOM。

原生對象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等對象。

請指出以下代碼的區別:function Person(){}、var person = Person()、var person = new Person()?

function Person(){}

聲明一個函數Person()。

var person = Person()

將函數Person()的結果返回給變量person，如果沒有返回值則person為undefined。

var person = new Person()

new一個Person的實例對象。

.call和.apply的區別是什么?

.call和.apply的共同點是都是用來改變函數體內this對象的值。

區別是第二個參數不一樣。apply()的第二個參數是一個類數組對象arguments,參數都是以數組的形式傳入,而call(),傳遞給他的是一系列參數。例如

Math.max.call(null, 1, 2, 3, 4);
//4

Math.max.apply(null, [1, 2, 3, 4]);
//4

請解釋Function.prototype.bind

Function.prototype.bind方法會創建一個新函數，當這個新函數被調用時，它的this值是傳遞給bind()的第一個參數, 它的參數是bind()的其他參數和其原本的參數.

Function.prototype.bind的實現類似于:

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope, arguments);
    };
}

Function.prototype.bind的作用

創建綁定函數

一些函數的參數常常也是函數，給當做參數的函數綁定this值確保參數函數執行時有正確的this指向。

Ajax的工作原理

Ajax是無需刷新頁面就能從服務器取得數據的一種方法。

原理

Ajax通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM更新頁面。

過程

創建XMLHttpRequest對象。

設置響應HTTP請求的回調函數。

創建一個HTTP請求，指定相應的請求方法、url等。

發送HTTP請求。

獲取服務器端返回的數據。

使用JavaScript操作DOM更新頁面。

缺點

對搜索引擎不友好

要實現Ajax下的前后退功能成本較大

跨域問題限制

JSONP的工作原理

JSONP（JSON with Padding）是一種非官方跨域數據交互協議，它允許在服務器端集成