老樣子，答的好的這裡就不寫了。只記錄答的不好的的。
這次暴露出來的問題就是要多做專案，都實踐。

1.改這個程式碼

//目的碼
const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function () {
        for (var i = 0, len = this.skill.length; i < len; i++) {
            setTimeout(function(){
                console.log(i);
                console.log(this.skill[i]);
            }, 0)
            console.log(i);
        }
    }
};
obj.say();
 

第一種：

const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function ()
    {
        var that = this;
        for (var i = 0, len = this.skill.length; i < len; i++)
        {
            setTimeout((function()
            {
                console.log(i);
                console.log(that.skill[i]);
            })(i), 0)
            console.log(i);
        }
    }
};
obj.say();
 

結果：

面試官當時就讓我寫在瀏覽器裡的，但是我當時使用的webstorm，用的node環境，就報錯了，結果就很慌。。。。。搞得最後不敢交。。這個程式碼可以在瀏覽器中執行的。

第二種：
同時在Node和瀏覽器(chrome)中都可以實現的：

const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function ()
    {
        var that = this;
        for (let i = 0, len = this.skill.length; i < len; i++)
        {
            (function () {
                setTimeout(function () {
                    console.log(i);
                    console.log(that.skill[i])
                })
            })(i)
            console.log(i);
        }
    }
};
obj.say();
 

結果是這樣

兩種結果雖然取到了我們想要的結果，但是和外層的console.log(i)出現了順序的差異。第二種寫法先列印完這個，再依次列印()()自執行函式的。
應該是執行第一個script巨集任務的時候，遇到了三個()()，把這三個推進了微任務，當第一個巨集任務結束之後，依次執行完本次遇到的所有的微任務。

第一種順序列印，是因為每個setTimeout即是一次巨集任務。但如果把setTimeout包括起來就是微任務了。

其他更多騷方法我都寫在這裡：

const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function () {
        this.skill.forEach(function(item,index){
            setTimeout(function(){
                console.log(index)
                console.log(item);
            },0)
        })
    },
    say2:function(){
        for (var i = 0, len = this.skill.length; i < len; i++) {
            setTimeout(function(i,item){
                console.log(i);
                console.log(item);
            },0,i,this.skill[i]);
        }
    },
    say3:function () {
        let i = 0;
        const arr = this.skill.slice();
        function self_shift() {
            //shift() 方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。空返回undefined
            const item = arr.shift();
            if(item) {
                console.log(i);
                console.log(item);
                i++;
                setTimeout(self_shift, 0);
            }
        }
        setTimeout(self_shift,0);
    }
};
obj.say();
obj.say2();
obj.say3();

// 閉包了，裡面的i跟外面的i不是同一個,加上自執行
const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function () {
        for (var i = 0, len = this.skill.length; i < len; i++) {
            setTimeout(((j) => {
                return () => {
                    console.log(j);
                    console.log(this.skill[j]);
                }
            })(i), 0)
            console.log(i);
        }
    }
};
obj.say();

const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function () {
        var that = this;
        for (let i = 0, len = this.skill.length; i < len; i++) {
            setTimeout(function(){
                console.log(i);
                console.log(that.skill[i]);
            }, 0)
            console.log(i);
        }
    }
};
obj.say();

2.手寫bind，bind還有其他什麼作用？

3.什麼時候304什麼時候200,相關瀏覽器快取問題？

1. 在瀏覽器第一次請求某一個URL時，伺服器端的返回狀態會是200，內容是你請求的資源，同時有一個Last-Modified的屬性標記此檔案在服務期端最後被修改的時間，：
   Last-Modified: Fri, 12 May 2006 18:53:33 GMT

2. 客戶端第二次請求此URL時，根據 HTTP 協議的規定，瀏覽器會向伺服器傳送 If-Modified-Since 報頭，詢問該時間之後檔案是否有被修改過：
   If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT
   伺服器端的程式先取得這個欄位的值，然後與伺服器上的資料最後修改時間對比，如果伺服器端的資源沒有變化，就直接返回 304 Not Modified 狀態碼，然後停止。這樣就節省了傳輸資料量，達到節省頻寬的目的。當伺服器端程式碼發生改變或者重啟伺服器時，則重新發出資源，返回和第一次請求時類似。（傳送200？）從而保證不向客戶端重複發出資源，也保證當伺服器有變化時，客戶端能夠得到最新的資源。

3. 但是Last-Modified不是全能的，後來在Http1.1加入了Etag來標記，Etag的精確度更高
   想象在這個一個情景——客戶端上某個資源儲存的快取時間過期了，但這時候其實伺服器並沒有更新過這個資源，如果這個資源資料量很大，客戶端要求伺服器再把這個東西重新發一遍過來，是否非常浪費頻寬和時間呢？
   所以就有了Etag：
   當你第一次請求一個資源的時候，server會同時生成並返回一個字串在響應頭裡，叫Etag。
   瀏覽器接到資源後，快取資源的同時也會把這個Etag儲存下來，成為If-None_Match 。Etag可以看作是一個資源的唯一標識，當你第二次請求這個資源的時候，請求頭裡會帶著這個Etag,server會拿server該資源現在的Etag跟請求頭中的If-None_Match做對比，然後看看If-Modified-Since過沒過期，如果一樣，直接告訴他：你就用本地的吧，我沒變，就不給你返回了。所以返回了304，304就是這樣。

4. 200 From Cache
   這個雖然是200，但他根本就沒有跟server做互動，直接拉的本地快取。

5. 與瀏覽器快取相關的還有Expires欄位，這個欄位儲存的時間是相對伺服器而言，無法保證和客戶端時間統一”的問題，http1.1新增了 Cache-Control 來定義快取過期時間，若報文中同時出現了 Pragma、Expires 和 Cache-Control，會以 Cache-Control 為準。Last-Modified之後的Etag就是為了解決，因為如果在伺服器上，一個資源被修改了，但其實際內容根本沒發生改變，會因為Last-Modified時間匹配不上而返回了整個實體給客戶端（即使客戶端快取裡有個一模一樣的資源）。

4.手寫一個jsonp，怎麼返回資料的？