代碼：

const a = of([1, 2, 3]); a.subscribe((data) => console.log('Fairy:' + data));

單步調試，首先執行of所在的index.ts:

of.js的實現很簡單：

import { isScheduler } from '../util/isScheduler'; import { fromArray } from './fromArray'; import { scheduleArray } from '../scheduled/scheduleArray'; export function of(...args) {let scheduler = args[args.length - 1];if (isScheduler(scheduler)) {args.pop();return scheduleArray(args, scheduler);}else {return fromArray(args);} } //# sourceMappingURL=of.js.map

沒有scheduler，走fromArray這條路：

fromArray.js的實現：

import { Observable } from '../Observable'; import { subscribeToArray } from '../util/subscribeToArray'; import { scheduleArray } from '../scheduled/scheduleArray'; export function fromArray(input, scheduler) {if (!scheduler) {return new Observable(subscribeToArray(input));}else {return scheduleArray(input, scheduler);} } //# sourceMappingURL=fromArray.js.map

這個subscribeToArray是一個函數構造器，接收一個數組，返回一個新的函數：

export const subscribeToArray = (array) => (subscriber) => {for (let i = 0, len = array.length; i < len && !subscriber.closed; i++) {subscriber.next(array[i]);}subscriber.complete(); }; //# sourceMappingURL=subscribeToArray.js.map

該函數和我們在應用代碼里調用Observable對象的subscribe方法時傳入的回調函數有何區別？

繼續往下調試。

調用Observable對象的subscribe方法：

ObserverOrNext就是上圖第63行的箭頭函數，error和complete為undefined：

新建一個Subscriber對象：

subscriber的父類是subscription：

subscriber的destination是一個SafeSubscriber：

SafeSubscriber也是一個Subscriber：

這個emptyObservable啥實現也沒有：

import { config } from './config'; import { hostReportError } from './util/hostReportError'; export const empty = {closed: true,next(value) { },error(err) {if (config.useDeprecatedSynchronousErrorHandling) {throw err;}else {hostReportError(err);}},complete() { } }; //# sourceMappingURL=Observer.js.map ExtensibilityExtensibility所以toSubscriber返回的實際是一個subscriber對象： 首先調用subscriber對象的add方法，目的是通過這個三元表達式，判斷到底應該調用subscribe方法，還是trySubscribe方法：在我的Angular10，執行后者：記住這個語義：Observable的subscribe方法，輸入參數為subscriber：_trySubscribe調用_subscribe:然后就執行到了之前用subscribeToArray返回的function內部：注意在這個上下文里，我們既有輸入，又有應用程序傳入的subscribe函數，因此可以調用next了： next和_next的區別就在于有個this.isStopped的判斷：注意語義：Observable調用subscribe，而subscriber調用next.subscriber的desination里包含了應用程序傳入的callback： subscriber的_tryOrUnsub函數里，最終調用應用程序的callback： 更多Jerry的原創文章，盡在："汪子熙": 

總結

以上是生活随笔為你收集整理的rxjs of操作符生成的Observable对象的执行详细分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。