天天看點

rxjs裡的Observable對象subscribe方法的執行原理

看個例子:

rxjs裡的Observable對象subscribe方法的執行原理

調用Observable的subscribe方法,傳入一個包含回調函數的observer對象:

rxjs裡的Observable對象subscribe方法的執行原理

後兩個參數都是undefined:

rxjs裡的Observable對象subscribe方法的執行原理

在toSubscriber函數裡,因為nextOrObserver是我手動傳入的對象,是以前兩個IF條件均不滿足:

rxjs裡的Observable對象subscribe方法的執行原理

進入預設實作,建立一個Subscriber對象:

rxjs裡的Observable對象subscribe方法的執行原理

Subscriber是Subscription的子類:

rxjs裡的Observable對象subscribe方法的執行原理

我們現在的Subscriber的構造函數裡,建立一個SafeSubscruber執行個體:this作為parent subscriber傳入

rxjs裡的Observable對象subscribe方法的執行原理

EmptyObserver是從./Observer導入進來的:

rxjs裡的Observable對象subscribe方法的執行原理

從SafeSubscriber的實作能看出,傳入的Observer對象的next,error和complete這些函數名稱都是寫死的,必須符合這個命名規範:

rxjs裡的Observable對象subscribe方法的執行原理
rxjs裡的Observable對象subscribe方法的執行原理

Object.create()方法建立一個新對象,使用現有的對象來提供新建立的對象的__proto__。

rxjs裡的Observable對象subscribe方法的執行原理

執行subscribe:

rxjs裡的Observable對象subscribe方法的執行原理

sink的destination包含了應用程式傳入的complete, next, error邏輯:

rxjs裡的Observable對象subscribe方法的執行原理

這裡能看到,subscribe的邏輯就是,周遊所有Observable參數,依次調用observer的next方法,最後再調用一次complete方法:

rxjs裡的Observable對象subscribe方法的執行原理

next調用私有的_next方法:

rxjs裡的Observable對象subscribe方法的執行原理

this._next調用this.destination.next:

rxjs裡的Observable對象subscribe方法的執行原理
rxjs裡的Observable對象subscribe方法的執行原理

最終調用到應用程式員傳入的next方法:

rxjs裡的Observable對象subscribe方法的執行原理

最後的輸出:

rxjs裡的Observable對象subscribe方法的執行原理

繼續閱讀