es6 中的generator函數控制流程
Generator函數跟普通函數的寫法有非常大的區別:
一是,function關鍵字與函數名之間有一個星號;
二是,函數體內部使用yield語句,定義不同的內部狀態(yield在英語裏的意思就是“產出”)。
最簡單的Generator函數如下:
function* g() {
yield ‘a‘;
yield ‘b‘;
yield ‘c‘;
return ‘ending‘;
}
g(); // 返回一個對象
g函數呢,有四個階段,分別是‘a‘,‘b‘,‘c‘,‘ending‘。
Generator 函數神奇之一:g()並不執行g函數
g()
並不會執行g函數,返回的也不是函數運行結果,而是一個指向內部狀態的指針對象,也就是叠代器對象(Iterator Object)。
Generator 函數神奇之二:分段執行
先看如下代碼:
function* g() {
yield ‘a‘;
yield ‘b‘;
yield ‘c‘;
return ‘ending‘;
}
var gen = g();
gen.next(); // 返回Object {value: "a", done: false}
gen.next()
返回一個非常非常簡單的對象{value: "a", done: false}
,‘a‘就是g函數執行到第一個yield語句之後得到的值,false表示g函數還沒有執行完,只是在這暫停。
如果再寫一行代碼,還是gen.next();
{value: "b", done: false}
,說明g函數運行到了第二個yield語句,返回的是該yield語句的返回值‘b‘。返回之後依然是暫停。
再寫一行gen.next();
返回{value: "c", done: false}
,再寫一行gen.next();
,返回{value: "ending", done: true}
,這樣,整個g函數就運行完畢了。
提問:如果再寫一行gen.next();
呢?
答:返回{value: undefined, done: true}
,這樣沒意義。
提問:如果g函數沒有return語句呢?
答:那麽第三次.next()
之後就返回{value: undefined, done: true}
next()
唯一意義就是證明g函數全部執行完了。
提問:如果g函數的return語句後面依然有yield呢?
答:js的老規定:return語句標誌著該函數所有有效語句結束,return下方還有多少語句都是無效,白寫。
提問:如果g函數沒有yield和return語句呢?
答:第一次調用next就返回{value: undefined, done: true}
,之後也是{value: undefined, done: true}
。
提問:如果只有return語句呢?
答:第一次調用就返回{value: xxx, done: true}
,其中xxx
是return語句的返回值。之後永遠是{value: undefined, done: true}
。
提問:下面代碼會有什麽結果?
function* g() {
var o = 1;
yield o++;
yield o++;
yield o++;
}
var gen = g();
console.log(gen.next()); // 1
var xxx = g();
console.log(gen.next()); // 2
console.log(xxx.next()); // 1
console.log(gen.next()); // 3
答:見上面註釋。每個叠代器之間互不幹擾,作用域獨立。
繼續提問:如果第二個yield o++;
改成yield;
會怎樣?
答:那麽指針指向這個yield的時候,返回{value: undefined, done: false}
。
繼續提問:如果第二個yield o++;
改成o++;yield;
會怎樣?
答:那麽指針指向這個yield的時候,返回{value: undefined, done: false}
,因為返回的永遠是yield後面的那個表達式的值。
所以現在可以看出,每次調用next方法,內部指針就從函數頭部或上一次停下來的地方開始執行,直到遇到下一個yield語句(或return語句)為止。換言之,Generator函數是分段執行的,yield語句是暫停執行的標記,而next方法可以恢復執行。
總之,每調用一次Generator函數,就返回一個叠代器對象,代表Generator函數的內部指針。以後,每次調用叠代器對象的next方法,就會返回一個有著value和done兩個屬性的對象。value屬性表示當前的內部狀態的值,是yield語句後面那個表達式的值;done屬性是一個布爾值,表示是否遍歷結束。
所以可以看出,Generator 函數的特點就是:
1、分段執行,可以暫停
2、可以控制階段和每個階段的返回值
3、可以知道是否執行到結尾
yield語句
叠代器對象的next方法的運行邏輯如下。
(1)遇到yield語句,就暫停執行後面的操作,並將緊跟在yield後面的那個表達式的值,作為返回的對象的value屬性值。
(2)下一次調用next方法時,再繼續往下執行,直到遇到下一個yield語句。
(3)如果沒有再遇到新的yield語句,就一直運行到函數結束,直到return語句為止,並將return語句後面的表達式的值,作為返回的對象的value屬性值。
(4)如果該函數沒有return語句,則返回的對象的value屬性值為undefined。
yield語句與return語句既有相似之處,也有區別。
相似之處在於,都能返回緊跟在語句後面的那個表達式的值。
區別在於每次遇到yield,函數暫停執行,下一次再從該位置繼續向後執行,而return語句不具備位置記憶的功能。一個函數裏面,只能執行一次(或者說一個)return語句,但是可以執行多次(或者說多個)yield語句。正常函數只能返回一個值,因為只能執行一次return;Generator函數可以返回一系列的值,因為可以有任意多個yield。從另一個角度看,也可以說Generator生成了一系列的值,這也就是它的名稱的來歷(在英語中,generator這個詞是“生成器”的意思)。
註意:yield語句只能用於function*
的作用域,如果function*
的內部還定義了其他的普通函數,則函數內部不允許使用yield語句。
註意:yield語句如果參與運算,必須用括號括起來。
console.log(3 + yield 4); // 語法錯誤
console.log(3 + (yield 4)); // 打印7
next方法可以有參數
一句話說,next方法參數的作用,是覆蓋掉上一個yield語句的值。
function* g() {
var o = 1;
var a = yield o++;
console.log(‘a = ‘ + a);
var b = yield o++;
}
var gen = g();
console.log(gen.next());
console.log(‘------‘);
console.log(gen.next(11));
得到:
Paste_Image.png首先說,console.log(gen.next());
的作用就是輸出了{value: 1, done: false}
,註意var a = yield o++;
,由於賦值運算是先計算等號右邊,然後賦值給左邊,所以目前階段,只運算了yield o++
,並沒有賦值。
然後說,console.log(gen.next(11));
的作用,首先是執行gen.next(11)
,得到什麽?首先:把第一個yield o++
重置為11,然後,賦值給a,再然後,console.log(‘a = ‘ + a);
,打印a = 11
,繼續然後,yield o++
,得到2,最後打印出來。
從這我們看出了端倪:帶參數跟不帶參數的區別是,帶參數的情況,首先第一步就是將上一個yield語句重置為參數值,然後再照常執行剩下的語句。總之,區別就是先有一步先重置值,接下來其他全都一樣。
這個功能有很重要的語法意義,通過next方法的參數,就有辦法在Generator函數開始運行之後,繼續向函數體內部註入值。也就是說,可以在Generator函數運行的不同階段,從外部向內部註入不同的值,從而調整函數行為。
提問:第一個.next()可以有參數麽?
答:設這樣的參數沒任何意義,因為第一個.next()的前面沒有yield語句。
for...of循環
for...of循環可以自動遍歷Generator函數時生成的Iterator對象,且此時不再需要調用next方法。for...of循環的基本語法是:
for (let v of foo()) {
console.log(v);
}
其中foo()
是叠代器對象,可以把它賦值給變量,然後遍歷這個變量。
function* foo() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
let a = foo();
for (let v of a) {
console.log(v);
}
// 1 2 3 4 5
上面代碼使用for...of循環,依次顯示5個yield語句的值。這裏需要註意,一旦next方法的返回對象的done屬性為true,for...of循環就會中止,且不包含該返回對象,所以上面代碼的return語句返回的6,不包括在for...of循環之中。
下面是一個利用Generator函數和for...of循環,實現斐波那契數列的例子。
斐波那契數列是什麽?它指的是這樣一個數列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144........
這個數列前兩項是0和1,從第3項開始,每一項都等於前兩項之和。
function* fibonacci() {
let [prev, curr] = [0, 1];
for (;;) { // 這裏請思考:為什麽這個循環不設定結束條件?
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
if (n > 1000) {
break;
}
console.log(n);
}
Generator.prototype.throw()
Generator函數返回的叠代器對象,都有一個throw方法,可以在函數體外拋出錯誤,然後在Generator函數體內捕獲。
既然我的文章是簡單理解Generator函數,所以錯誤捕獲直接跳過。
Generator.prototype.return()
Generator函數返回的叠代器對象,還有一個return方法,可以返回給定的值,並且終結遍歷Generator函數。
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.return(‘foo‘)); // { value: "foo", done: true }
console.log(g.next()); // {value: undefined, done: true}
就是說,return的參數值覆蓋本次yield語句的返回值,並且提前終結遍歷,即使後面還有yield語句也一律無視。
提問:return方法跟next方法的區別都有哪些?
答:
1、return終結遍歷,之後的yield語句都失效;next返回本次yield語句的返回值。
2、return沒有參數的時候,返回{ value: undefined, done: true }
;next沒有參數的時候返回本次yield語句的返回值。
3、return有參數的時候,覆蓋本次yield語句的返回值,也就是說,返回{ value: 參數, done: true }
;next有參數的時候,覆蓋上次yield語句的返回值,返回值可能跟參數有關(參數參與計算的話),也可能跟參數無關(參數不參與計算)。
yield*語句
如果你打算在Generater函數內部,調用另一個Generator函數,默認情況下是沒有效果的。比如:
function* foo() {
yield ‘a‘;
yield ‘b‘;
}
function* bar() {
yield ‘x‘;
foo();
yield ‘y‘;
}
for (let v of bar()){
console.log(v);
}
// "x"
// "y"
可見,並沒有遍歷出‘a‘和‘b‘。那麽如果想在一個Generator函數裏調用另一個Generator函數,怎麽辦?用yield*語句。比如:
function* bar() {
yield ‘x‘;
yield* foo();
yield ‘y‘;
}
// 上個函數等同於
function* bar() {
yield ‘x‘;
yield ‘a‘;
yield ‘b‘;
yield ‘y‘;
}
// 也等同於
function* bar() {
yield ‘x‘;
for (let v of foo()) {
yield v;
}
yield ‘y‘;
}
for (let v of bar()){
console.log(v);
}
// "x"
// "a"
// "b"
// "y"
也就是說,我們約定被調用的Generator函數為A函數,調用A函數的Generator函數為B函數。yield*
語句的作用,就是遍歷一遍A函數的叠代器對象。A函數(沒有return語句時)是for...of的一種簡寫形式,完全可以用for...of替代yield*
。反之,由於B函數的return語句,不會被yield*
遍歷,所以需要用var value = yield* iterator
的形式獲取return語句的值。
function *foo() {
yield 2;
yield 3;
return "foo";
}
function *bar() {
yield 1;
var v = yield *foo();
console.log( "v: " + v );
yield 4;
}
var it = bar();
it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}
上面代碼在第四次調用next方法的時候,屏幕上會有輸出,這是因為函數foo的return語句,向函數bar提供了返回值。
提問:如果不寫*會怎樣?
答:yield語句會返回叠代器對象。
提問:如果寫兩遍yield* foo();
會得到什麽?
答:
a
b
a
b
提問:如果yield*語句後面跟著一個數組會怎樣?
答:
function* gen(){
yield* ["a", "b", "c"];
}
gen().next() // { value:"a", done:false }
這說明,任何數據結構只要有Iterator接口,就可以被yield*遍歷。數組有這個接口。
Generator函數到底怎麽用於異步編程?
Generator可以暫停函數執行,返回任意表達式的值。這種特點使得Generator有多種應用場景。
狀態機
Generator是實現狀態機的最佳結構。比如,下面的clock函數就是一個常規寫法的狀態機。
var ticking = true;
var clock = function() {
if (ticking)
console.log(‘Tick!‘);
else
console.log(‘Tock!‘);
ticking = !ticking;
}
上面代碼的clock函數一共有兩種狀態(Tick和Tock),每運行一次,就改變一次狀態。這個函數如果用Generator實現,就是下面這樣。
var clock = function*() {
while (true) {
console.log(‘Tick!‘);
yield;
console.log(‘Tock!‘);
yield;
}
};
可以看到,Generator 函數實現的狀態機不用設初始變量,不用切換狀態,上面的Generator函數實現與ES5實現對比,可以看到少了用來保存狀態的外部變量ticking,這樣就更簡潔,更安全(狀態不會被非法篡改)、更符合函數式編程的思想,在寫法上也更優雅。Generator之所以可以不用外部變量保存狀態,是因為它本身就包含了第一個狀態和第二個狀態。
異步操作的同步化寫法
下面這個自然段非常重要!非常重要!非常重要!
Generator函數的暫停執行的效果,意味著可以把異步操作寫在yield語句裏面,等到調用next方法時再往後執行。這實際上等同於不需要寫回調函數了,因為異步操作的後續操作可以放在yield語句下面,反正要等到調用next方法時再執行。所以,Generator函數的一個重要實際意義就是用來處理異步操作,改寫回調函數。
舉個例子,比如我在測試服務器的某目錄建了4個文件,分別是‘test.html‘、‘a.html‘、‘b.html‘、‘c.html‘,後三個文件的文件內容跟文件名相同,現在我編輯‘test.html‘的代碼,想要先ajax-get相對網址‘a.html‘,然後再回調裏ajax-get相對網址‘b.html‘,然後在回調裏ajax-get相對網址‘c.html‘,常規的寫法是(用上jQuery):
$.get(‘a.html‘,function(dataa) {
console.log(dataa);
$.get(‘b.html‘,function(datab) {
console.log(datab);
$.get(‘c.html‘,function(datac) {
console.log(datac);
});
});
});
// a.html
// b.html
// c.html
可以看到,就算用上jquery,也依然是回調地獄的既視感,對不對?那麽改成生成器函數寫法是:
function request(url) {
$.get(url, function(response){
it.next(response);
});
}
function* ajaxs() {
console.log(yield request(‘a.html‘));
console.log(yield request(‘b.html‘));
console.log(yield request(‘c.html‘));
}
var it = ajaxs();
it.next();
// a.html
// b.html
// c.html
可以看到,輸出結果也是這樣。我們分析一下:
首先我們定義了一個普通的request函數,初步分析它的作用是:接受一個url參數,通過異步操作得到response,然後把response作為參數傳給it.next(),執行it.next()
。可能你還沒看懂,沒關系,繼續看:
接著我們定義了一個叫ajaxs的生成器函數,它的代碼挺整齊的。沒看懂也不要緊,先不說它。
最後是兩個語句var it = ajaxs(); it.next();
,這兩句最簡單,你當然能看懂,就是定義一個叫it的叠代器對象,然後執行it.next();
。
當執行了it.next();
之後,開始遍歷ajaxs()對象。ajaxs函數的執行順序在這必須講,因為它是異步代碼表現改寫成同步代碼表現的核心關鍵。記住簡單一句話:只有當yield後面跟的函數先執行完,無論執行體裏面有多少異步回調,都要等所有回調先執行完,才會執行等號賦值,以及再後面的操作。這也是yield最大的特性。你可能會說,怎麽前面那麽多文字都從沒提過yield居然這麽牛逼呢?因為前面的例子為了最簡單化,並沒有讓yield後面跟函數,而是跟了簡單值,這並不能體現出生成器函數的優勢,因為根本哪也沒異步嘛。
還記得我寫的《Promises到底是個啥?》裏面關於Promise構造函數的超能力嗎?yield的超能力就跟Promise構造函數的超能力差不多:
Promises寫法的本質就是把異步寫法擼成同步寫法。要做這麽酷炫這麽變態的事情,當然需要Promise構造函數有超能力,它的超能力就是傳入Promise構造函數的函數參數會第一優先執行,無論這個函數多麽的繁復,有多少層回調,有多少秒的計數器,統統都會最優先執行,也就是說,我們只要new了一個Promise(),那麽Promise構造函數的函數參數就是最高優先級執行,一直到new出一個promise對象實例,後面的代碼才會執行。
想象一下,如果yield沒有這種超能力,那麽,下面a、b、c三行幾乎同時執行,誰先獲得響應鬼才知道,這就無法保證get a獲得響應之後才去get b,get b獲得響應之後才get c。
console.log(yield request(‘a.html‘));
console.log(yield request(‘b.html‘));
console.log(yield request(‘c.html‘));
回到原話題,ajaxs函數執行的第一步是request(‘a.html‘)
,這是一個異步函數,但沒關系,JS引擎會耐心等它執行完,它執行的第一步是向a.html發請求,回調執行it.next(response)
,也就是把response傳遞給it.next()
,這就有趣味了,這個next是第幾個next?第二個。因為最初已經執行了一個了。現在有種什麽感覺?沒錯,叠代的感覺。再復習一下next的參數,.next(response)
意味著什麽?意味著覆蓋上一個yield語句的返回值。然後,yield request(‘a.html‘)
將叠代暫停,然而下一個叠代已經開始了。
最終形成了什麽?在每一個階段開始,next(參數)幹了兩件事,第一件事是用參數覆蓋前一個yield語句的值,第二件事是執行本階段的代碼,這樣不斷叠代下去,最終形成了一個next觸發了一串next。這就形成了一個現象:最開始的一個.next()觸發了一連串的request函數的執行,無論啥時候我想要執行這一串異步操作,我都只需要兩行代碼:var it = ajaxs(); it.next();
就夠了。夠短吧?
妙不妙?
最後一個問題:怎樣最快最簡單地寫出采用 Generator 函數的同步形式的代碼?
第1步:將所有異步代碼的每一步都封裝成一個普通的、可以有參數的函數,比如上面的request函數。你可能問,上面例子為啥三個異步代碼卻只定義了一個request函數?因為request函數能復用的嘛。如果不能復用的話,請老老實實定義三個普通函數,函數內容就是需要執行的異步代碼。
第2步:定義一個生成器函數,把流程寫進去,完全的同步代碼的寫法。生成器函數可以有參數。
第三步:定義一個變量,賦值為叠代器對象。叠代器對象可以加參數,參數通常將作為流程所需的初始值。
第四步:變量名.next()。不要給這個next()傳參數,傳了也沒用,因為它找不到上一個yield語句。
上面的例子是最簡單舉例,沒有涉及到下一步借用上一步的執行結果的情況,如果想讓下一步借用上一步的執行結果的話,其實也簡單,比如,我想把a.html的響應內容當做參數,發給b.html,把b.html的響應內容當做參數,發給c.html,也很簡單,不多說。
然後我們再對比一下,Promise寫法是怎樣:
new Promise(function(resolve) {
$.get(‘a.html‘,function(dataa) {
console.log(dataa);
resolve();
});
}).then(function(resolve) {
return new Promise(function(resolve) {
$.get(‘b.html‘,function(datab) {
console.log(datab);
resolve();
});
});
}).then(function(resolve) {
$.get(‘c.html‘,function(datac) {
console.log(datac);
});
});
Promise的寫法的優點就是理解起來很簡單,每一步中間用then一連就OK。
Promise的寫法的缺點就是各種promise實例對象跟一連串的then,代碼量大、行數多,滿眼的promise、then、resolve看得頭暈,而且每一個then都是一個獨立的作用域,傳遞參數痛苦。
再舉一例,我想在上述每一步異步中間,都間隔3秒。怎麽寫?
function request(url) {
$.get(url, function(response){
it.next(response);
});
}
function sleep(time) {
setTimeout(function() {
console.log(‘I\‘m awake.‘);
it.next();
}, time);
}
function* ajaxs(ur) {
console.log(yield request(ur));
yield sleep(3000);
console.log(yield request(‘b.html‘));
yield sleep(3000);
console.log(yield request(‘c.html‘));
}
var it = ajaxs(‘a.html‘);
it.next();
是不是跟Promise寫法的差別更明顯了?ajaxs生成器函數裏面的代碼完全是同步寫法表現。
總之,Generator 函數是比Promise寫法更科學的一種寫法,實踐中應當盡量使用Generator 函數。
作者:microkof
鏈接:https://www.jianshu.com/p/e0778b004596
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並註明出處。
es6 中的generator函數控制流程