源代碼:
const source$ = range(0, 10);
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5iY2MmM1MTO1YmN4cTYiNTY5UzY0UGZmNWZkVTMzkDZz8CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
range(0,10)傳回一個新的Observable,但是不會立即執行,直到遇到subscribe調用為止:
下圖高亮的這段代碼,在Observable.subscribe後會執行:
注冊到Observable的_subscribe裡:
ngOnInit(): void {
console.log('before ngOnInit');
const source$ = range(0, 10);
source$.pipe(
filter((x, index) => {
console.log('inside filter!: ' + x + ' index: ' + index);
return x % 2 === 0 }),
map( x => {
console.log('inside map: ' + x);
return (x + x); }
),
// scan((acc, x) => acc + x, 0)
scan(this.accumulator)
)
.subscribe(x => console.log('result: ' + x));
}
pipe調用的參數傳入的是filter, map和scan三個操作的結果,是以首先執行filter:
位于operators目錄裡:
filter操作接收的參數predicate, 類型是一個函數,該函數接收x和index兩個參數,傳回boolean類型,這就是所謂的filter-過濾器。filter操作傳回一個新的函數,該函數接收一個新的輸入source,對source調用lift操作,施加predicate操作。
然後執行pipe操作:
pipe的輸入參數就是filter調用的傳回結果:
pipeFromArray傳回的就是包裹了filter操作的filterOperatorFunction:
進入之前filter調用傳回的新函數:
這個source應該是range(0,10)傳回的Observable:
對原始Observable對象調用filter傳回的predicate操作:
life操作内部建立了一個Observable對象,source是原始Observable對象,operator就是filter對應的predicate.
Observable遇到subscribe方法才會真正地執行Observable内部的方法:
建立一個subscriber,第一個輸入參數nextOrObserver就是應用程式裡subscribe方法裡傳入的箭頭函數:
subscriber是subscription的子類:
next就是應用程式傳入的箭頭函數:
注意這裡,sink已經準備調用operator了。operator就是filter操作:
進入filter操作:
開始執行subscribe:
執行complete的條件:
調用next:
由此可見,range Observable裡包含的值,逐一調用filter:
如果filter傳回true,繼續調用下一個Observable對象:
這裡最終就調用應用程式裡傳入的subscribe方法了:
range = 0的value已經執行完畢了,下面進行range1:
因為range = 1時filter傳回false,是以Observable鍊式執行到這裡就中斷了:
range = 2,下面的原理類似,不重複介紹了。