```typescript
fromEvent(this.test, 'click').subscribe((event) => console.log(event));
```

this.test 的賦值邏輯：

```typescript
this.test = this.document.getElementById('test');
```

每當該 id 為 test 的按鈕被點選一次，則 fromEvent issue 一個新的值，內容為 MouseClick 事件：

![](https://img-blog.csdnimg.cn/img_convert/c08c603fa3f550acfd8986084d14ffd8.png)

本文介紹這個神奇的 fromEvent 的工作原理。

在 rxjs/_esm2015/index.js 下能看到所有 rxjs 支援的 operators：
![](https://img-blog.csdnimg.cn/img_convert/ffd3e48b284f6c2800b89b4a578934b7.png)

fromEvent 建構函式支援最多 4 個輸入引數，但我的例子裡，之傳入了兩個。因此直接進入 Observable 物件的構造邏輯：

![](https://img-blog.csdnimg.cn/img_convert/d8b95a058d9db2c05fb3a562c7aef227.png)

Observable 的建構函式，只有一個輸入引數，該輸入引數為一個函式。這個函式是一個匿名函式，只有函式體而無函式名稱。

![](https://img-blog.csdnimg.cn/img_convert/b919ad0af1895934b71218fd42adbb07.png)

把該匿名函式維護在 Observable 的私有屬性 _subscribe 裡。
![](https://img-blog.csdnimg.cn/img_convert/547dbd77d78fc94235ec0fee5ae430f8.png)

fromEvent 返回一個可觀察物件，呼叫該物件的 subscribe 方法，給其註冊觀察者。

![](https://img-blog.csdnimg.cn/img_convert/bd8c0ccb693b098c27143d6c9853dbcb.png)

上圖 observerOrNext 就是我們應用程式裡，傳入給 subscribe 方法的匿名函式，即使用 console.log 列印 id 為 test 的 button 被點選之後丟擲的 MouseEvent 事件。

因為我們暫時沒有給 fromEvent 返回的 Observable 物件指定 operator，因此第 20 行 operator 為 undefined：

![](https://img-blog.csdnimg.cn/img_convert/d4b88092653a1933d0d339e98f996ec2.png)

呼叫函式 toSubscriber 建立一個新的 subscriber：
![](https://img-blog.csdnimg.cn/img_convert/9d285c1b956fc10171d5399ed4bd8bcc.png)

上圖 nextOrObserver 就是我應用程式裡指定的 console.log(event) 匿名函式，只是用 Subscriber 包了一層。

Subscriber.js 內部：Subscriber 的 destination 屬性，指向了 SafeSubscriber 例項：

![](https://img-blog.csdnimg.cn/img_convert/1876c8962f3f4b79af28ee4a5e9d428a.png)

![](https://img-blog.csdnimg.cn/img_convert/d5331aa954f1651a92b0e0c52c79b387.png)

再回到 Observable 的 subscribe 方法。現在我們知道了，在其 toSubscriber 方法裡，建立了一個 Subscriber 例項，其重要屬性如上圖1，2，3所示。因為沒有為該 Observable 指定 operator，所以第 22 行的 IF 分支進不去，而是執行第 26 行的 else 分支。

![](https://img-blog.csdnimg.cn/img_convert/9c21cf0f4f7569cf54f9ef257161f5ed.png)

進入 trySubscribe 方法：

![](https://img-blog.csdnimg.cn/img_convert/032f1a8a1f8ec56ecf46155f642da650.png)

_trySubscribe 是 _subscribe 方法的包裹，再加上錯誤處理：
![](https://img-blog.csdnimg.cn/img_convert/d4b907d8b3a6f35595cdc2f0f7e07d28.png)

文章開頭提到的 Observable 私有屬性 _subscribe, 指向 fromEvent.js 第14行匿名函式：

![](https://img-blog.csdnimg.cn/img_convert/4fa8ee609b7e70c5c0304c4798f96d4e.png)

現在執行該匿名函式，函式體內 setupSubscription.

如何判斷傳進來的變數是 EventTarget 呢？

![](https://img-blog.csdnimg.cn/img_convert/30d04ea99de47c06eba139ebc734e172.png)

檢查其是否具有 addEventListner 和 removeEventListener 即可。

![](https://img-blog.csdnimg.cn/img_convert/9a8344f4e39b292043f51f1b52a37194.png)

這裡把 fromEvent.js 裡某個 handler 函式，作為按鈕點選後的事件處理函式進行註冊。

![](https://img-blog.csdnimg.cn/img_convert/5f7cbc0c4103f011edd9d09137b148c7.png)

注意，這裡給 click 點選事件註冊的，並不是我們應用程式指定的 console.log(event), 而是 fromEvent.js 裡一個內部函式，如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/7b70bd860dacc8be502b874a85de1c1f.png)

當我點選 UI 的 test 按鈕後，觸發 click 事件，fromEvent.js 裡定義的事件處理函式被呼叫：
![](https://img-blog.csdnimg.cn/img_convert/da5c17e34f73a4d834e8351a2b4ba0ff.png)

還記得我們之前提到的 toSubscriber 函式呼叫麼？將應用程式定義的 console.log(event), 包裝成 SafeSubscriber，儲存到 _next 屬性裡。

![](https://img-blog.csdnimg.cn/img_convert/5e65676a998b4ac281cf805090043b52.png)

這裡，最終觸發 subscriber 的私有屬性 _next 指向的應用程式處理邏輯：

![](https://img-blog.csdnimg.cn/img_convert/9ab0ad0921dd84aaaeb746066e5067be.png)

使用了 JavaScript function 原生的 call 方法進行呼叫：
![](https://img-blog.csdnimg.cn/img_convert/71b63e171365b7525a75202ed2dcefc4.png)

最終，進入了應用程式列印程式碼執行，謎底就此解開：
![](https://img-blog.csdnimg.cn/img_convert/e39d49809bcde5c03d9ee2d5e133e4cd.png)

RxJs fromEvent 工作原理分析

相關文章