摘要：如果函數(shù)沒(méi)有名稱函數(shù)表達(dá)式，就叫做匿名回調(diào)函數(shù)?；卣{(diào)函數(shù)不一定用于異步，同步阻塞場(chǎng)景下也會(huì)用到回調(diào)函數(shù)。比如說(shuō)要求在執(zhí)行完某些操作后執(zhí)行回調(diào)函數(shù)。通過(guò)標(biāo)簽訪問(wèn)跨域的地址，返回一個(gè)參數(shù)為請(qǐng)求數(shù)據(jù)的的回調(diào)函數(shù)，而不再直接是數(shù)據(jù)。

作為junior developer,僅僅覺(jué)得這些問(wèn)題經(jīng)常在我面試的時(shí)候被問(wèn)到，好記性不如爛筆頭，自己整理記錄一遍~~~

1.javascript如何實(shí)現(xiàn)繼承？

三種方式：

 1. 原型繼承

            // 優(yōu)點(diǎn)：既繼承了父類(lèi)的模板，又繼承了父類(lèi)的原型對(duì)象
             // 缺點(diǎn)：父類(lèi)實(shí)例化傳參，而不是子類(lèi)實(shí)例化傳參（不符合常規(guī)語(yǔ)言的寫(xiě)法）
            
            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

    關(guān)于原型鏈的解釋：https://www.cnblogs.com/chengzp/p/prototype.html
 2. 類(lèi)繼承（借用構(gòu)造函數(shù)的方式繼承）

            // 優(yōu)點(diǎn)：繼承了父類(lèi)的模板，方便通過(guò)子類(lèi)實(shí)例化傳參
            // 缺點(diǎn)：不能繼承父類(lèi)的原型對(duì)象
            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(); //沒(méi)有繼承父類(lèi)的原型對(duì)象，所以，會(huì)報(bào)錯(cuò)：xiaoLi.draw() is not a function
            console.log(xiaoLi.sex); // male
 3. 混合繼承（原型繼承和類(lèi)繼承）

            // 混合繼承（原型繼承和類(lèi)繼承（借用構(gòu)造函數(shù)的方式繼承））
            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是如何實(shí)現(xiàn)的？

特點(diǎn)：
在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)頁(yè)面局部進(jìn)行刷新。
XMLHttpRequest對(duì)象是實(shí)現(xiàn)ajax的基礎(chǔ),XMLHttpRequest有很多方法，常用的有open(),send()等
ajax請(qǐng)求共包含五個(gè)步驟：
1.創(chuàng)建XMLHttpRequest對(duì)象(一個(gè)異步調(diào)用對(duì)象)
2.設(shè)置HTTP請(qǐng)求的參數(shù)（請(qǐng)求方法，url，是否異步）
3.設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的回調(diào)函數(shù)
4.發(fā)送HTTP請(qǐng)求
5.獲取異步調(diào)用返回的數(shù)據(jù)
6.局部更新頁(yè)面
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.作用域
塊級(jí)作用域：ES6才支持，在{}大括號(hào)內(nèi)的就是塊級(jí)作用域
(塊級(jí)作用域的出現(xiàn)解決了：for循環(huán)定義的變量造成的全局污染;不用再通過(guò)閉包來(lái)保存必要的變量了)
函數(shù)作用域：在函數(shù)中實(shí)現(xiàn)的
全局作用域：在外部聲明的，如果沒(méi)有用var關(guān)鍵字聲明，在非嚴(yán)格模式下，也為全局作用域

注意：
在es6之前沒(méi)有塊級(jí)作用域這個(gè)概念，所以在{}塊級(jí)作用域中聲明的變量其實(shí)就是全局變量（舉個(gè)栗子）
    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?
    
    關(guān)于es6的let和const:
    let和const沒(méi)有變量聲明的提升；
    let和const不允許在相同作用域內(nèi)重復(fù)聲明；

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

5.回調(diào)函數(shù)
定義：
函數(shù)A作為參數(shù)傳遞給函數(shù)B，在函數(shù)B中執(zhí)行函數(shù)A，此時(shí)函數(shù)A就叫做回調(diào)函數(shù)。如果函數(shù)沒(méi)有名稱（函數(shù)表達(dá)式），就叫做匿名回調(diào)函數(shù)。

回調(diào)函數(shù)不一定用于異步，同步（阻塞）場(chǎng)景下也會(huì)用到回調(diào)函數(shù)。比如說(shuō)要求在執(zhí)行完某些操作后執(zhí)行回調(diào)函數(shù)。

舉幾個(gè)栗子：
同步(阻塞)回調(diào)：
fn1執(zhí)行完后執(zhí)行fn2
在同步場(chǎng)景下，回調(diào)函數(shù)最后執(zhí)行
異步回調(diào)：
ajax請(qǐng)求
在異步回調(diào)中，回調(diào)函數(shù)有可能不執(zhí)行，因?yàn)闀r(shí)間沒(méi)有被觸發(fā)或者條件不滿足

回調(diào)函數(shù)的應(yīng)用場(chǎng)景：
動(dòng)態(tài)加載js后，圖片加載完成后，ajax請(qǐng)求等

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

6.es6常用新特性：

1.let和const(新的變量聲明方式，允許把變量作用域控制在塊級(jí)里面)
2.解構(gòu)賦值(對(duì)象和數(shù)組都適用)
3.promise
一個(gè)對(duì)象，用來(lái)表示并傳遞異步操作的最終結(jié)果
交互方式：將回調(diào)函數(shù)傳入then方法獲取最終結(jié)果或出錯(cuò)原因
以鏈?zhǔn)秸{(diào)用代替回調(diào)函數(shù)層層嵌套
//生成promise實(shí)例
var promise = new Promise(function(resolve, reject) {
 //...other code...
 if (/* 異步操作成功 */){
   resolve(value);//resolve函數(shù)將Promise對(duì)象的狀態(tài)從Pending變?yōu)镽esolved
 } else {
   reject(error);//reject函數(shù)將Promise對(duì)象的狀態(tài)從Pending變?yōu)镽ejected
 }
});
//Promise實(shí)例生成以后，用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)。
promise.then(function(value) {
 // success
}, function(err) {
 // failure
});

jQuery.ajax()方法中運(yùn)用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的區(qū)別？
1.與服務(wù)器的交互上
cookie始終會(huì)在http同源請(qǐng)求頭上攜帶(即使不需要)，在瀏覽器端和客戶端之間傳來(lái)傳去
localStorage和sessionStorage不會(huì)主動(dòng)發(fā)送給服務(wù)器，僅保存在本地
2.儲(chǔ)存大小
cookie由于不同瀏覽器的限制，大小在4KB左右
localStorage和sessionStorage儲(chǔ)存大小達(dá)5MB或以上
3.過(guò)期時(shí)間
cookie與設(shè)置的有效期時(shí)間有關(guān)
localStorage存儲(chǔ)持久數(shù)據(jù)，除非主動(dòng)刪除
sessionStorage在瀏覽器關(guān)閉后自動(dòng)刪除
8.cookie和session的區(qū)別？
cookie數(shù)據(jù)存放在客戶的瀏覽器，session存儲(chǔ)在服務(wù)器上
考慮到安全性
建議：
將登陸等重要信息存放為session
其它信息可以放在cookie中
9.一個(gè)頁(yè)面從輸入url到頁(yè)面加載，這個(gè)過(guò)程都發(fā)生了什么？
簡(jiǎn)潔版：
1.瀏覽器根據(jù)請(qǐng)求的url向服務(wù)器發(fā)送請(qǐng)求
2.服務(wù)求處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件
3.瀏覽器對(duì)加載到的資源(html, css, js, image等)進(jìn)行語(yǔ)法解析
4.載入解析到的資源，渲染頁(yè)面
10.事件委派
優(yōu)點(diǎn)：減少事件注冊(cè)；簡(jiǎn)化DOM更新時(shí)，相應(yīng)事件的更新
    
    
        
            
            
        
        
            

        
        
    

11.拖拽

    
    
        
            
            
            
        
        
            

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


        DOM事件捕獲的具體流程:
        window->document->html->body->...->目標(biāo)元素
        
        事件流:
        捕獲->目標(biāo)階段->冒泡
        
        一個(gè)節(jié)點(diǎn)上注冊(cè)多個(gè)事件:
        解決響應(yīng)優(yōu)先級(jí):event.stopImmediatePropagation();
13.javascript如何實(shí)現(xiàn)一個(gè)類(lèi)，怎么實(shí)例化這個(gè)類(lèi)?

1.構(gòu)造函數(shù)法
            // 構(gòu)造函數(shù)法(this + prototype)
            // 用new關(guān)鍵字生成實(shí)例 對(duì)象
            
            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語(yǔ)法糖
            // es6語(yǔ)法糖
            // 用new關(guān)鍵字生成實(shí)例化對(duì)象
            
            
            // 優(yōu)點(diǎn)：避免了使用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.全局函數(shù)無(wú)法查看局部函數(shù)的細(xì)節(jié)，局部函數(shù)可以訪問(wèn)全局函數(shù)的屬性
2.當(dāng)前作用域沒(méi)有找到屬性或方法，可以向上層乃至全局尋找，這種形式就是作用域鏈
15. .call()和.apply()的區(qū)別？
.call()和.apply()是每個(gè)函數(shù)都包含而非繼承來(lái)的方法，用于改變函數(shù)的作用域
兩方法作用相同
區(qū)別在接收參數(shù)的方式不同，call()要求明確傳入每一個(gè)參數(shù)；

擴(kuò)充作用域，舉個(gè)栗子：
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標(biāo)簽可以跨域訪問(wèn)的特性，動(dòng)態(tài)創(chuàng)建script標(biāo)簽，給標(biāo)簽設(shè)置src屬性。
通過(guò)script標(biāo)簽訪問(wèn)跨域的地址，返回一個(gè)參數(shù)為請(qǐng)求數(shù)據(jù)的callback的回調(diào)函數(shù)，而不再直接是json數(shù)據(jù)。

具體實(shí)現(xiàn)步驟：
原生：
    $(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", //請(qǐng)求php的參數(shù)名
            jsonpCallback: "jsonhandle",//要執(zhí)行的回調(diào)函數(shù)
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });
16.jquery鏈?zhǔn)秸{(diào)用
原理：對(duì)象方法上最后加上return this;語(yǔ)句
優(yōu)點(diǎn)：節(jié)省代碼，代碼看起來(lái)更優(yōu)雅
17.原型和原型鏈
先記兩個(gè)干巴巴的結(jié)論：
舉個(gè)栗子：
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.實(shí)例的構(gòu)造函數(shù)屬性（constructor）指向構(gòu)造函數(shù)。
var A = new Person();
Person.prototype = A;
2.原型對(duì)象（Person.prototype）是 構(gòu)造函數(shù)（Person）的一個(gè)實(shí)例。