閉包

使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。
閉包有三個特性：
1.函式巢狀函式 2.函式內部可以引用外部的引數和變數 3.引數和變數不會被垃圾回收機制回收

如果這道題僅僅是考察候選人對 JS 非同步程式碼、變數作用域的理解，侷限性未免太大，接下來我會追問，如果期望程式碼的輸出變成： 0,1,2,3,4

for (var i = 0; i < 5; i++) 
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}
 

巧妙的利用 IIFE**（Immediately Invoked Function Expression：宣告即執行的函式表示式）

對迴圈體稍做手腳，讓負責輸出的那段程式碼能拿到每次迴圈的 i 值,利用 JS 中基本型別（Primitive Type）的引數傳遞是按值傳遞**（Pass by Value）的特徵

for (var i=1; i<=5; i++) {
     (function() {
         var j = i;
         setTimeout( function timer() {
             console.log( j );
         }, j*1000 );
})(); }
 

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

這裡給 setTimeout 傳遞了一個立即執行函式。額，setTimeout 可以接受函式或者字串作為引數，那麼這裡立即執行函式應該是個 undefined ，也就是說等價於：
setTimeout(undefined, ...);
而立即執行函式會立即執行，那麼應該是立馬輸出的。
多以還是立馬輸出0-4；

非同步程式設計方法

js中的非同步程式設計共有下面這些方法，好吧以前我就知道前兩個，其中事件監聽和觀察者有些類似，下面我們將分別介紹

• 回撥函式
• 事件監聽
• 觀察者
• Promise
• Generator
• async/await

回撥函式
callback是我們最熟悉的方式，上面提到的動畫的例子，用callback實現程式碼如下
moveTo(100, 0, function () { moveTo(200, 0, function () { moveTo(300, 0, function () { moveTo(400, 0, function () { // 無限不迴圈 }) }) })})

Node採用的是first error，所有系統非同步介面第一個引數都是error物件

function callback(err, data) { if (err) { // 出錯 return; } // 成功 console.log(data);}async("url", callback);

pub和sub函式
let eventMap = {};function pub(msg, ...rest) { eventMap[msg] && eventMap[msg].forEach((cb) => { cb(...rest); });}function sub(msg, cb) { eventMap[msg] = eventMap[msg] || []; eventMap[msg].push(cb);}

Promise

Promise其實是一種控制反轉，舉個例子，就是原來我們要給非同步函式傳入一個回撥函式，現在變成了非同步函式返回一個Promise物件，堪稱神來之筆，而Promise就是實現這種反轉的工具，Promise是一個雙方約定的契約（規範）
其實Promise還有很多優點，要知道Promise是後面新技術的基礎，堪稱一切非同步方案的粘合劑，沒有Promise，可能就不會有generator，那麼為什麼說是可能呢？請看Generator一節
Promise解決了回撥的一些問題，但並沒有全部解決，比如Promise有很好的錯誤追蹤，避免了回撥地獄，對併發執行很友好，因為Promise只決議一次，就很好的解決了信任問題
但Promise對違反直覺並不友好，回撥變成了長長的Promise鏈
var chain = Promise.resolve();for (let i = 0; i < arr.length; ++i) { chain = chain.then(() => async(arr[i]).then((x) => arr[i] = x))}

Generator
Generator是一個革命性特性，es2015(es6)中引入，讓原本必須一次執行完畢函式，現在可以在中間暫停，並在下次繼續執行，這就讓js可以模擬協程的概念

動畫的例子用generator實現如下，就好像是同步的一樣
function* gen() { yield moveTo(100, 0) yield moveTo(200, 0) yield moveTo(300, 0) yield moveTo(400, 0) // 無限不迴圈}run(gen)

moveTo函式如下
function moveTo(x = 0, y = 0) { return new Promise(function (resolve, reject) { move('.box').x(x).y(y).end(resolve); })}

run函式
function run(fn) { let gen = fn() function next(data) { var res = gen.next(data) if (res.done) return res.value; res.value.then(function (data) { next(data) }) } next()}

生成器要實現非同步，必須得有啟動函式，也就是run，好在社群有封裝好的run函式，比如co這個庫

async function run() { await moveTo(100, 0) await moveTo(200, 0) await moveTo(300, 0) await moveTo(400, 0) // 無限不迴圈}run()

moveTo函式如下
async function moveTo(x = 0, y = 0) { await new Promise(function (resolve, reject) { move('.box').x(x).y(y).end(resolve); })}

fetch

1.RN官方文件中,可使用XMLHttpRequest

var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { console.log('success', request.responseText); } else { console.warn('error'); } }; request.open('GET', 'https://mywebsite.com/endpoint.php'); request.send();

這是http的原生方法,這裡不做多的介紹.

2.RN官方文件中,推薦使用fetch


fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }).then(function(res){
　　console.log(res)
})
body中的資料就是我們需要向伺服器提交的資料,比如使用者名稱,密碼等;如果上述body中的資料提交失敗,那麼你可能需要把資料轉換成如下的表單提交的格式:

fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'key1=value1&key2=value2' }).then(function(res){

　　console.log(res)
})
這樣可以獲取純文字的返回資料.
如果你需要返回json格式的資料:
fetch('https://mywebsite.com/endpoint/').then(function(res) {

    if (res.ok) {

        res.json().then(function(obj) {

            // 這樣資料就轉換成json格式的了

        })

    }

}, function(ex) {

    console.log(ex)

})

fetch模擬表單提交:

fetch('doAct.action', { 

    method: 'post', 

    headers: { 

      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 

    }, 

    body: 'foo=bar&lorem=ipsum' 

  })

  .then(json) 

  .then(function (data) { 

    console.log('Request succeeded with JSON response', data); 

  }) 

  .catch(function (error) { 

    console.log('Request failed', error); 

  });