天天看点

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方法的执行原理

继续阅读