摘要：如果函數沒有名稱函數表達式，就叫做匿名回調函數。回調函數不一定用于異步，同步阻塞場景下也會用到回調函數。比如說要求在執行完某些操作后執行回調函數。通過標簽訪問跨域的地址，返回一個參數為請求數據的的回調函數，而不再直接是數據。

作為junior developer,僅僅覺得這些問題經常在我面試的時候被問到，好記性不如爛筆頭，自己整理記錄一遍~~~

1.javascript如何實現繼承？

三種方式：

 1. 原型繼承

            // 優點：既繼承了父類的模板，又繼承了父類的原型對象
             // 缺點：父類實例化傳參，而不是子類實例化傳參（不符合常規語言的寫法）
            
            function Parent(work, drink) {
                this.work = function() {
                    console.log(work);
                }
                
                this.drink = drink;
            }
            
            Parent.prototype.draw = function() {
                alert("I can draw");    
                
            }
            
            function Child() {
                this.cry = function() {
                    console.log("the best ability is to cry"); 
                }
            }
            
            Child.prototype = new Parent("code", "beer");
            var xiaoLi = new Child();
            xiaoLi.work(); // code
            xiaoLi.draw(); // I can draw
            xiaoLi.cry();  // the best ability is to cry

    關于原型鏈的解釋：https://www.cnblogs.com/chengzp/p/prototype.html
 2. 類繼承（借用構造函數的方式繼承）

            // 優點：繼承了父類的模板，方便通過子類實例化傳參
            // 缺點：不能繼承父類的原型對象
            function Parent(work, drink) {
                this.work = function() {
                    console.log(work);
                }
                
                this.drink = drink;
            }
            Parent.prototype.draw = function() {
                alert("I can draw");    
                
            }
            
            
            function Child(work, drink, sex) {
                Parent.call(this, work, drink);
                this.sex = sex;
                
            }
            
            var xiaoLi = new Child("code", "beer", "male");
            alert(xiaoLi.drink); // code
            xiaoLi.work(); // beer
            // xiaoLi.draw(); //沒有繼承父類的原型對象，所以，會報錯：xiaoLi.draw() is not a function
            console.log(xiaoLi.sex); // male
 3. 混合繼承（原型繼承和類繼承）

            // 混合繼承（原型繼承和類繼承（借用構造函數的方式繼承））
            function Parent(eat, sleep) {
                this.eat = function() {
                    console.log("function 1" + eat);
                }
                this.sleep = function() {
                    console.log("function 2" + sleep);
                }
            }
            
            Parent.prototype.other = "work";
            
            function Child(eat, sleep, age) {
                Parent.call(this, eat, sleep);
                this.age = age;
            }
            
            Child.prototype = new Parent();
            var xiaoLi = new Child("cake", "want to sleep", "10");
            xiaoLi.eat();
            xiaoLi.sleep();
            console.log(xiaoLi.age);
            console.log(xiaoLi.other);

2.原生ajax是如何實現的？

特點：
在不重新加載整個網頁的情況下，對頁面局部進行刷新。
XMLHttpRequest對象是實現ajax的基礎,XMLHttpRequest有很多方法，常用的有open(),send()等
ajax請求共包含五個步驟：
1.創建XMLHttpRequest對象(一個異步調用對象)
2.設置HTTP請求的參數（請求方法，url，是否異步）
3.設置響應HTTP請求狀態變化的回調函數
4.發送HTTP請求
5.獲取異步調用返回的數據
6.局部更新頁面
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
    }
};
xhr.send(data);
post方法一定要用setRequestHeader("header","value");

3.作用域
塊級作用域：ES6才支持，在{}大括號內的就是塊級作用域
(塊級作用域的出現解決了：for循環定義的變量造成的全局污染;不用再通過閉包來保存必要的變量了)
函數作用域：在函數中實現的
全局作用域：在外部聲明的，如果沒有用var關鍵字聲明，在非嚴格模式下，也為全局作用域

注意：
在es6之前沒有塊級作用域這個概念，所以在{}塊級作用域中聲明的變量其實就是全局變量（舉個栗子）
    for (var i = 1; i <= 10; i++) {
        console.log (i); // outputs 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;?
    };
    ?
    ?// The variable i is a global variable and it is accessible in the following function with the last value it was assigned above ?
    ?function aNumber () {
    console.log(i);
    }
    ?
    ?// The variable i in the aNumber function below is the global variable i that was changed in the for loop above. Its last value was 11, set just before the for loop exited:?
    aNumber ();  // 11?
    
    關于es6的let和const:
    let和const沒有變量聲明的提升；
    let和const不允許在相同作用域內重復聲明；

4.如何理解閉包？
比較常用的情景：
在A函數里返回B函數，B函數可以調用A函數的局部變量；
特點：
1.函數嵌套
2.函數內部可以引用外部的參數和變量
3.閉包函數里的參數和變量不會被垃圾回收機制回收（閉包會使變量始終保存在內存中，如果使用不當會增大內存消耗）
閉包的好處：
1.希望變量長期保存在內存中
2.避免全局變量的污染
3.私有變量的存在

5.回調函數
定義：
函數A作為參數傳遞給函數B，在函數B中執行函數A，此時函數A就叫做回調函數。如果函數沒有名稱（函數表達式），就叫做匿名回調函數。

回調函數不一定用于異步，同步（阻塞）場景下也會用到回調函數。比如說要求在執行完某些操作后執行回調函數。

舉幾個栗子：
同步(阻塞)回調：
fn1執行完后執行fn2
在同步場景下，回調函數最后執行
異步回調：
ajax請求
在異步回調中，回調函數有可能不執行，因為時間沒有被觸發或者條件不滿足

回調函數的應用場景：
動態加載js后，圖片加載完成后，ajax請求等

另外，最好保證回調存在且必須是函數引用或者函數表達式：
(callback && typeof(callback) === "function") && callback();

6.es6常用新特性：

1.let和const(新的變量聲明方式，允許把變量作用域控制在塊級里面)
2.解構賦值(對象和數組都適用)
3.promise
一個對象，用來表示并傳遞異步操作的最終結果
交互方式：將回調函數傳入then方法獲取最終結果或出錯原因
以鏈式調用代替回調函數層層嵌套
//生成promise實例
var promise = new Promise(function(resolve, reject) {
 //...other code...
 if (/* 異步操作成功 */){
   resolve(value);//resolve函數將Promise對象的狀態從Pending變為Resolved
 } else {
   reject(error);//reject函數將Promise對象的狀態從Pending變為Rejected
 }
});
//Promise實例生成以后，用then方法分別指定Resolved狀態和Reject狀態的回調函數。
promise.then(function(value) {
 // success
}, function(err) {
 // failure
});

jQuery.ajax()方法中運用promise：
var http = {
    get: function(url) {
        var promise = new Promise(function(resolve, reject) {
            $.ajax({
                url: url,
                method: "get",
                success: function(data) {
                    resolve(data);
                },
                error: function(xhr, statusText) {
                    reject(statusText);
                }
            });
        });
        return promise;
    }
};
http.get("data.php").then(function(data) {
    document.write(data);
}, function(err) {
    document.write(err);
});
這里是獲取的data值：
/* data.php文件 */

7.cookie和web storage的區別？
1.與服務器的交互上
cookie始終會在http同源請求頭上攜帶(即使不需要)，在瀏覽器端和客戶端之間傳來傳去
localStorage和sessionStorage不會主動發送給服務器，僅保存在本地
2.儲存大小
cookie由于不同瀏覽器的限制，大小在4KB左右
localStorage和sessionStorage儲存大小達5MB或以上
3.過期時間
cookie與設置的有效期時間有關
localStorage存儲持久數據，除非主動刪除
sessionStorage在瀏覽器關閉后自動刪除
8.cookie和session的區別？
cookie數據存放在客戶的瀏覽器，session存儲在服務器上
考慮到安全性
建議：
將登陸等重要信息存放為session
其它信息可以放在cookie中
9.一個頁面從輸入url到頁面加載，這個過程都發生了什么？
簡潔版：
1.瀏覽器根據請求的url向服務器發送請求
2.服務求處理完成后返回數據，瀏覽器接收文件
3.瀏覽器對加載到的資源(html, css, js, image等)進行語法解析
4.載入解析到的資源，渲染頁面
10.事件委派
優點：減少事件注冊；簡化DOM更新時，相應事件的更新
    
    
        
            
            
        
        
            

        
        
    

11.拖拽

    
    
        
            
            
            
        
        
            

            
        
    
12.DOM事件
        DOM事件(3個級別):DOM0;DOM2;DOM3;
        DOM0特點:js與html強耦合;綁定的速度快,不需要操作dom,可直接在元素上綁定
        dom.onclick=function(){
            do something;
        }
        
        DOM2特點:可以在一個元素中添加不同的事件,事件不會覆蓋;
        dom.addEventListener("click",function(){},false)
        
        DOM3特點:在dom2的基礎上,添加更多的事件類型;可自定義事件;
        var event=new Event("test");
        dom.addEventListener("test",function(){},false);
        setTimeout(function(){
            oBox.dispatchEvent(event);
        },2000)


        DOM事件捕獲的具體流程:
        window->document->html->body->...->目標元素
        
        事件流:
        捕獲->目標階段->冒泡
        
        一個節點上注冊多個事件:
        解決響應優先級:event.stopImmediatePropagation();
13.javascript如何實現一個類，怎么實例化這個類?

1.構造函數法
            // 構造函數法(this + prototype)
            // 用new關鍵字生成實例 對象
            
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            
            Person.prototype.info = function() {
                alert(this.name + this.age);                
            }
            
            var xiaoLi = new Person("李佳", 26);
            xiaoLi.info();

2.es6語法糖
            // es6語法糖
            // 用new關鍵字生成實例化對象
            
            
            // 優點：避免了使用prototype
            class Person {
                  constructor(x, y) {
                      this.x = x;
                      this.y = y;
                  }
                  info() {
                      alert(this.x + this.y);
                  }
                  
            }
              
            var xiaoLi = new Person("李佳", 26);
            xiaoLi.info();
14.解釋作用域鏈
1.全局函數無法查看局部函數的細節，局部函數可以訪問全局函數的屬性
2.當前作用域沒有找到屬性或方法，可以向上層乃至全局尋找，這種形式就是作用域鏈
15. .call()和.apply()的區別？
.call()和.apply()是每個函數都包含而非繼承來的方法，用于改變函數的作用域
兩方法作用相同
區別在接收參數的方式不同，call()要求明確傳入每一個參數；

擴充作用域，舉個栗子：
window.color = "red";
var o = {color: "blue"};

function sayColor() {
    alert(this.color);
}

sayColor(); // red
sayColor.call(this); // red
sayColor.call(window); //red
sayColor.call(o); // blue

15.jsonp的原理
利用script標簽可以跨域訪問的特性，動態創建script標簽，給標簽設置src屬性。
通過script標簽訪問跨域的地址，返回一個參數為請求數據的callback的回調函數，而不再直接是json數據。

具體實現步驟：
原生：
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $("");
        obj.attr("src",url);
        $("body").append(obj);
    });
jquery:
    $(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //請求php的參數名
            jsonpCallback: "jsonhandle",//要執行的回調函數
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });
16.jquery鏈式調用
原理：對象方法上最后加上return this;語句
優點：節省代碼，代碼看起來更優雅
17.原型和原型鏈
先記兩個干巴巴的結論：
舉個栗子：
function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person("Zaxlct", 28, "Software Engineer");
var person2 = new Person("Mick", 23, "Doctor");
console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true
1.實例的構造函數屬性（constructor）指向構造函數。
var A = new Person();
Person.prototype = A;
2.原型對象（Person.prototype）是 構造函數（Person）的一個實例。