切圖崽的自我修養(yǎng)－[ES6] 生成器Generator淺析

mj 發(fā)布于2019-08-20 10:33 / 736人閱讀

摘要：搞這么神秘其實就是個迭代器的核心實際上就是一個，通過關(guān)鍵字能夠把函數(shù)體拆成完全可控執(zhí)行片段，在函數(shù)體外部通過來對這些執(zhí)行片段進行遍歷這和遍歷這些數(shù)據(jù)結(jié)構(gòu)是一個道理只不過用來遍歷函數(shù)片段，而用來遍歷元素對生成器執(zhí)行操作，進行生成器的入口開始執(zhí)

Generator

搞這么神秘其實就是個迭代器

Generator的核心實際上就是一個Iterator，通過yield關(guān)鍵字能夠把函數(shù)體拆成完全可控執(zhí)行片段，在函數(shù)體外部通過next來對這些執(zhí)行片段進行遍歷. 這和遍歷array,set,map這些數(shù)據(jù)結(jié)構(gòu)是一個道理.只不過generator用來遍歷函數(shù)片段，而array/set/map 用來遍歷元素.

對生成器執(zhí)行next()操作，進行生成器的入口開始執(zhí)行代碼

執(zhí)行到第一個yield時，向調(diào)用者返回一個值，并將函數(shù)掛起；

掛起時，函數(shù)當(dāng)前的執(zhí)行上下文環(huán)境和參數(shù)被保存下來；

執(zhí)行到第二個yield時，參數(shù)從掛起狀態(tài)被重新調(diào)用，進入上次掛起的執(zhí)行上下文環(huán)境繼續(xù)下面的操作，到下一個yield操作時重復(fù)上面的過程

執(zhí)行過程解析

    function *generator() {
      console.log(1);
      var x = (yield 2) +3
      console.log(3);
        var y = yield 4;
    }

    var g = generator(); 
    console.log(g.next());
    console.log(g.next());
    console.log(g.next());
    console.log(g.next());

var g = generator() 這一句毛都不會輸出,實際上這句話執(zhí)行完之后，generator()形成了內(nèi)存泄漏狀態(tài)，因為函數(shù)體內(nèi)部的對象被外部全局變量(g)所引用，導(dǎo)致generator()無法被回收. 這一句執(zhí)行完后實際上 g = {next:function(){xxxxxx}},

第一個g.next()會執(zhí)行console.log(1),向下執(zhí)行到y(tǒng)ield關(guān)鍵字,將{value:2,done:false}返回給外部，然后掛起當(dāng)前函數(shù)

第二個g.next()會執(zhí)行 (yield 2)+3 的操作，會執(zhí)行把 (yield 2)+3 賦值給x的操作，會執(zhí)行console.log(3)的操作，向下執(zhí)行到y(tǒng)ield關(guān)鍵字，把{value:4,done:false}返回給外部，掛起當(dāng)前函數(shù).

第三個g.next()會執(zhí)行把(yield 4)賦值給y的操作，向下掃描執(zhí)行，沒有發(fā)現(xiàn)有yield或者return了,這時候會throw一個stopIterator的異常，表示在這之后已經(jīng)沒有yield或者return語句可以迭代了，于是把done值置為true. 返回{value:undefined,done:true}

第四個g.next()同理，返回{value:undefined,done:true}

    function *generator(z) {
      console.log(1);
      var x = (yield 2) +z
      console.log(x);
      console.log(3);
        var y = yield 4;
        console.log(y)
    }

    var g = generator(5); 
    console.log(g.next(7)); 
    console.log(g.next(8));
    console.log(g.next(9));
    console.log(g.next(10));

var g = generator(5)這一句毛都不輸出，實際上這句話執(zhí)行完之后，generator()形成了內(nèi)存泄漏狀態(tài)，因為函數(shù)體內(nèi)部的對象被外部全局變量(g)所引用，導(dǎo)致generator()無法被回收. 這一句執(zhí)行完后實際上 g = {next:function(){xxxxxx}}, 且函數(shù)體內(nèi)的z參數(shù)被初始化成5.

第一個g.next(7)進入函數(shù)，會執(zhí)行console.log(1),向下執(zhí)行掃描到了yield關(guān)鍵字,于是將{value:2,done:false}返回給外部，然后掛起當(dāng)前函數(shù)

第二個g.next(8)從上次掛起的地方進入函數(shù)，會執(zhí)行 把next的參數(shù)8賦值給(yield 2)的操作，會執(zhí)行 (yield 2)+z 的操作，會執(zhí)行 把(yield 2)+z的結(jié)果賦值給x的操作, 會執(zhí)行console.log(x)的操作，會執(zhí)行console.log(3)的操作，繼續(xù)向下執(zhí)行掃描到了yield關(guān)鍵字，于是將{value:4,done:false}返回給外部，然后掛起當(dāng)前函數(shù)

第三個g.next(9)從上次掛起的地方進入函數(shù)，會執(zhí)行把next的參數(shù)9賦值給(yield 4)操作，會執(zhí)行把(yield 4)賦值給y的操作，會執(zhí)行console.log(y)的操作. 然后把向下執(zhí)行掃描，沒有發(fā)現(xiàn)有yield或者return了,這時候會throw一個stopIterator的異常，表示在這之后已經(jīng)沒有yield或者return語句可以迭代了，于是把done值置為true. 返回{value:undefined,done:true}，然后掛起當(dāng)前函數(shù)

第四個g.next(10)從上次掛起的地方進入函數(shù)，也是同理，返回{value:undefined,done:true}，然后掛起當(dāng)前函數(shù)

相關(guān)參考

由于Iterator/Generator無一例外的都涉及到了javascript函數(shù)從創(chuàng)建到執(zhí)行到銷毀的過程，涉及到了 執(zhí)行上下文EC／活動對象AO/變量對象VO/內(nèi)存泄漏/回收機制 等核心概念，東西多且較復(fù)雜，有興趣的同學(xué)可以參考湯姆大叔深入理解JavasSript系列, 里面有對javascript的核心(函數(shù)/原型鏈)等做了詳盡的介紹.