看下面這段使用 filter Operator 的程式碼：
```typescript
import { fromEvent, interval, MonoTypeOperatorFunction } from 'rxjs';

import { filter } from 'rxjs/operators';

function filterKey(key) {
  console.log('input: ', key);
  const result: MonoTypeOperatorFunction<keyboardevent> = filter(
    (event: KeyboardEvent) => {
      console.log('input event: ', event);
      return event.key === key;
    }
  );
  console.log('result: ', result);
  return result;
}

fromEvent(document, 'keyup')
  .pipe(filterKey('Enter'))
  .subscribe(
    (data) => console.log(data) // KeyboardEvent
  );

```
原始 Observable 呼叫 pipe，執行自定義 Operator 的邏輯，在邏輯裡生成一個 filter Operator 例項。單步除錯如下：

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

返回一個 filterOperatorFunction：

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

filter 呼叫返回的是一個 filterOperatorFunction：
![](https://img-blog.csdnimg.cn/img_convert/419c0a3cd005e6d7d4db5f8672929457.png)

至此我們只完成了 pipe 兩段呼叫的第一段：得到 filter 返回的 filterOperatorFunction.

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

然後執行 pipe 操作的第二段，如上圖圖例所示，將原始 Observable 傳入 filterOperatorFunction：

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

這個第二段操作，就會建立新的 FilterOperator 例項，在 lift 操作裡，新建一個 Observable，然後把原始的 Observable 設定為這個新 Observable 例項的 source 欄位，將 FilterOperator 例項賦給原始 Observable 的 Operator 欄位。

pipe 呼叫執行的結果，返回一個新的 Observable 給 pipe 的呼叫者。最後我們 subscribe 的，就是這個 pipe 返回的 Observable.

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

subscribe 內部，this 就是 pipe 返回的新 Observable，operator 指向 filterOperator，source 指向 fromEvent 返回的原始 Observable：

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

首先利用 TypeScript 物件結構語法，object destructing，將 this.operator 欄位賦給變數 Operator，然後以原始 Observable 作為上下文，呼叫 filter Operator.

這樣，pipe 返回的 Observable 上進行訂閱，會傳遞到原始 Observable 的 subscribe 操作：
![](https://img-blog.csdnimg.cn/img_convert/4a97d38b68c56f9027b5afa1a04c12ae.png)

當我們在鍵盤上隨便敲擊一個字元後，觸發 MouseEvent 對應的 handler，在 handler 裡呼叫 Observer 的 next 操作。

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

next 操作最後會觸發 filtersubscriber predicate 屬性即應用開發人員傳入 filter Operator 的匿名函式：

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

filter 輸入引數也是一個函式，該函式的輸入即 MouseEvent：
![](https://img-blog.csdnimg.cn/img_convert/d99126bd001fa28ee8bc974166c29b3b.png)

fromEvent 新建的 Observable，其實現邏輯內部，同樣呼叫了 subscriber 的 next 方法來發射值。同時 fromEvent 返回的 Observable 同其他建立運算子比如 of 的特色 之處，就在於其能夠響應各種事件，比如 document 的 keyup 事件。

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

這種事件序號產生器制，是在上圖 `setupSubscription` 函式里實現的。

註冊的具體實現，採取了瀏覽器原生提供的 addEventListener，呼叫者為 document 全域性物件，傳入的 eventName 為 keyup，handler 即 fromEvent 內部實現，即上圖綠色高亮區域內的程式碼。
![](https://img-blog.csdnimg.cn/img_convert/4ae7c94c4f8a697d062be6e224e97142.png)

```typescript
export declare function filter<t>(predicate: (value: T, index: number) => boolean, thisArg?: any): MonoTypeOperatorFunction<t>;
```
![](https://img-blog.csdnimg.cn/img_convert/cc23319a8cb42518eee59f8516839cbb.png)

filter Operator 接受一個 predicate 作為輸入引數，返回一個型別為 MonoTypeOperatorFunction 的函式。

這裡的 T 為型別引數。MonoType 對應 T，意思是單引數。

MonoTypeOperatorFunction 是一種特殊的 OperatorFunction，當後者的輸入和返回引數都相同時，即特殊化為單型別 OperatorFunction：
![](https://img-blog.csdnimg.cn/img_convert/743cd4a1cd8a2c79c72428b5c643930d.png)

OperatorFunction 又是一種特殊的 UnaryFunction(一元函式)，當一元函式的輸入和輸出型別都是一個 Observable 時，即特殊化成了 OperatorFunction.

![](https://img-blog.csdnimg.cn/img_convert/a823f13ba58ea2f54dcbe9efc6994575.png)</t></t></keyboardevent>

rxjs Observable filter Operator 的實現原理介紹

相關文章