js中Generator函數(shù)的深入講解
前言
Generator函數(shù)是es6提供的一種異步編程的解決方案,語(yǔ)法行為與傳統(tǒng)函數(shù)完全不一樣。
Generator函數(shù)有多種理解角度,從語(yǔ)法上,首先可以把它理解成,Generator函數(shù)是一個(gè)狀態(tài)機(jī),封裝了多個(gè)內(nèi)部狀態(tài)。
執(zhí)
行Generator函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象,也就是說(shuō),Generator函數(shù)除了是狀態(tài)機(jī)還是一個(gè)遍歷器對(duì)象生成函數(shù)。 返回遍歷器對(duì)象,可以依次遍歷Generator函數(shù)內(nèi)部的每一個(gè)狀態(tài)。
下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
語(yǔ)法上
首先可以把它理解成,Generator 函數(shù)是一個(gè)狀態(tài)機(jī),封裝了多個(gè)內(nèi)部狀態(tài)。執(zhí)行 Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象,也就是說(shuō),Generator 函數(shù)除了狀態(tài)機(jī),還是一個(gè)遍歷器對(duì)象生成函數(shù)。返回的遍歷器對(duì)象,可以依次遍歷 Generator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)。
形式上
Generator 函數(shù)是一個(gè)普通函數(shù),但是有兩個(gè)特征。
一是,function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào);
二是,函數(shù)體內(nèi)部使用yield表達(dá)式,定義不同的內(nèi)部狀態(tài)(yield在英語(yǔ)里的意思就是“產(chǎn)出”)。
調(diào)用上
Generator 函數(shù)的調(diào)用方法與普通函數(shù)一樣,也是在函數(shù)名后面加上一對(duì)圓括號(hào)。不同的是,調(diào)用 Generator 函數(shù)后,該函數(shù)并不執(zhí)行,返回的也不是函數(shù)運(yùn)行結(jié)果,而是一個(gè)指向內(nèi)部狀態(tài)的指針對(duì)象,也就是上一章介紹的遍歷器對(duì)象(Iterator Object)。我們必須調(diào)用遍歷器對(duì)象的next方法,使得指針移向下一個(gè)狀態(tài)。也就是說(shuō),每次調(diào)用next方法,內(nèi)部指針就從函數(shù)頭部或上一次停下來(lái)的地方開(kāi)始執(zhí)行,直到遇到下一個(gè)yield表達(dá)式(或return語(yǔ)句)為止。換言之,Generator 函數(shù)是分段執(zhí)行的,yield表達(dá)式是暫停執(zhí)行的標(biāo)記,而next方法可以恢復(fù)執(zhí)行
function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); hw.next() // { value: 'hello', done: false } hw.next() // { value: 'world', done: false } hw.next() // { value: 'ending', done: true } hw.next() // { value: undefined, done: true }
調(diào)用 Generator 函數(shù),返回一個(gè)遍歷器對(duì)象,代表 Generator 函數(shù)的內(nèi)部指針。以后,每次調(diào)用遍歷器對(duì)象的next方法,就會(huì)返回一個(gè)有著value和done兩個(gè)屬性的對(duì)象。value屬性表示當(dāng)前的內(nèi)部狀態(tài)的值,是yield表達(dá)式后面那個(gè)表達(dá)式的值;done屬性是一個(gè)布爾值,表示是否遍歷結(jié)束。
yield表達(dá)式
yield表達(dá)式與return語(yǔ)句既有相似之處,也有區(qū)別。相似之處在于,都能返回緊跟在語(yǔ)句后面的那個(gè)表達(dá)式的值。區(qū)別在于每次遇到y(tǒng)ield,函數(shù)暫停執(zhí)行,下一次再?gòu)脑撐恢美^續(xù)向后執(zhí)行,而return語(yǔ)句不具備位置記憶的功能。一個(gè)函數(shù)里面,只能執(zhí)行一次(或者說(shuō)一個(gè))return語(yǔ)句,但是可以執(zhí)行多次(或者說(shuō)多個(gè))yield表達(dá)式。正常函數(shù)只能返回一個(gè)值,因?yàn)橹荒軋?zhí)行一次return;Generator 函數(shù)可以返回一系列的值,因?yàn)榭梢杂腥我舛鄠€(gè)yield。從另一個(gè)角度看,也可以說(shuō) Generator 生成了一系列的值,這也就是它的名稱的來(lái)歷(英語(yǔ)中,generator 這個(gè)詞是“生成器”的意思)。
語(yǔ)法注意點(diǎn):
1.yield表達(dá)式只能用在 Generator 函數(shù)里面
2.yield表達(dá)式如果用在另一個(gè)表達(dá)式之中,必須放在圓括號(hào)里面
3.yield表達(dá)式用作函數(shù)參數(shù)或放在賦值表達(dá)式的右邊,可以不加括號(hào)。
例如:
function* demo() { foo(yield 'a', yield 'b'); // OK let input = yield; // OK }
next 方法的參數(shù)
yield表達(dá)式本身沒(méi)有返回值(就是說(shuō)let a=yield ;會(huì)返回undefined),或者說(shuō)總是返回undefined。next方法可以帶一個(gè)參數(shù),該參數(shù)就會(huì)被當(dāng)作上一個(gè)yield表達(dá)式的返回值 (注意,是表達(dá)式的返回值,例如 let a=yield.......... 參數(shù)會(huì)是a 的值并且會(huì)覆蓋表達(dá)式之前的值)。
function* f() { for(var i = 0; true; i++) { var reset = yield i; console.log(reset); if(reset) { i = -1; } } } var g = f(); g.next()
由于next方法的參數(shù)表示上一個(gè)yield表達(dá)式的返回值,所以在第一次使用next方法時(shí),傳遞參數(shù)是無(wú)效的。V8 引擎直接忽略第一次使用next方法時(shí)的參數(shù),只有從第二次使用next方法開(kāi)始,參數(shù)才是有效的。從語(yǔ)義上講,第一個(gè)next方法用來(lái)啟動(dòng)遍歷器對(duì)象,所以不用帶有參數(shù)。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JS實(shí)現(xiàn)的自定義網(wǎng)頁(yè)拖動(dòng)類
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義網(wǎng)頁(yè)拖動(dòng)類,涉及頁(yè)面元素響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-11-11JS實(shí)現(xiàn)光滑展開(kāi)合攏的菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)光滑展開(kāi)合攏的菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷并改變頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09iframe里使用JavaScript控制主頁(yè)轉(zhuǎn)向的方法
這篇文章主要介紹了iframe里使用JavaScript控制主頁(yè)轉(zhuǎn)向的方法,涉及使用javascript實(shí)現(xiàn)iframe頁(yè)面跳轉(zhuǎn)的技巧,需要的朋友可以參考下2015-04-04layui表格checkbox選擇全選樣式及功能的實(shí)例
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Javascript判斷對(duì)象是否相等實(shí)現(xiàn)代碼
想判斷2個(gè)js對(duì)象,是不是所有完全相同在表單頁(yè)面應(yīng)用是很常見(jiàn)的,接下來(lái)分享一段判斷代碼,感興趣的你可以參考下哈,希望可以幫助到你2013-03-03Threejs實(shí)現(xiàn)滴滴官網(wǎng)首頁(yè)地球動(dòng)畫(huà)功能
這篇文章主要介紹了Threejs實(shí)現(xiàn)滴滴官網(wǎng)首頁(yè)地球動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07