使用一個例子來研究 map 運算子的工作原理。

推薦閱讀本文之前，先瀏覽這篇文章[RxJs fromEvent 工作原理分析](https://jerry.blog.csdn.net/article/details/117567312)以瞭解相關知識。

原始碼：

```typescript
import { Component, OnInit, Inject } from '@angular/core';
import { fromEvent, combineLatest } from 'rxjs';
import { mapTo, startWith, scan, tap, map } from 'rxjs/operators';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-combine-latest',
  templateUrl: './combine-latest.component.html'
})
export class CombineLatestComponent implements OnInit {
  readonly document: Document;

constructor(
    // https://github.com/angular/angular/issues/20351
    @Inject(DOCUMENT) document: any) {
      this.document = document as Document;
    }

redTotal:HTMLElement;
  blackTotal: HTMLElement;
  total:HTMLElement;  
  test:HTMLElement;

ngOnInit(): void {
    this.redTotal = this.document.getElementById('red-total'); 
    this.blackTotal = this.document.getElementById('black-total');
    this.total = this.document.getElementById('total');
    this.test = this.document.getElementById('test');

combineLatest(this.addOneClick$('red'), 
    
    this.addOneClick$('black')).subscribe(([red, black]: any) => {
      this.redTotal.innerHTML = red;
      this.blackTotal.innerHTML = black;
      this.total.innerHTML = red + black;
    });

fromEvent(this.test, 'click').pipe(map( event => event.timeStamp)).subscribe((event) => console.log(event));
  }

addOneClick$ = id =>
  fromEvent(this.document.getElementById(id), 'click').pipe(
    // map every click to 1
    mapTo(1),
    // keep a running total
    scan((acc, curr) => acc + curr, 0),
    startWith(0)
  );
}

```
開啟頁面，點選 Test 按鈕，能在 Chrome 控制檯裡看到每次點選發生時的 timestamp 時間戳：
![](https://img-blog.csdnimg.cn/img_convert/f0a519ce309ee9d6ec558fc38124b58c.png)

下面介紹 map 運算子是如何起作用的。

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

先縷一縷順序：

1. 首先執行fromEvent，返回一個 Observable 物件。

2. 執行 map 運算子，其結果作為輸入，傳入 pipe

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

2.執行 pipe：
![](https://img-blog.csdnimg.cn/img_convert/4668d6fd7c03291cd775da82475f82e4.png)

3. 執行 subscribe 操作。

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

我們可以把 pipe 形象地想象成管道，透過 fromEvent 返回的 Observable 物件，流過一根根管道，最後觸發其訂閱者，執行訂閱者的邏輯。那麼 RxJs 提供的各種 operator，就是安裝在管道里的處理器。

map 操作的輸入是我們定義的對映函式，在 RxJs 上下文裡，稱為 project:

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

map 返回一個新的函式，名為 mapOperation. 新函式體裡，基於傳入的 project，建立一個新的 MapOperator. 這個 MapOperator，作為新函式輸入引數 source 的 lift 方法呼叫的輸入引數。到現在為止，我們尚且不知道 source 引數的型別。

接下來執行 Observable 的 pipe 方法。

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

operations 引數是 map operator 返回的新函式，mapOperation：
![](https://img-blog.csdnimg.cn/img_convert/8c3defc3970bdb29677380e5e30750f3.png)

pipeFromArray 的實現，如果 pipe 輸入只有一個 operator，這種情況比較簡單，進入第 9 行的 IF 分支，直接將 map 返回的 mapOperation 函式作為 pipeFromArray 呼叫的返回結果。

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

注意到 Observable.js 實現裡，在 pipeFromArray(operations) 返回之後，緊跟了另一個括號，說明這是另一個函式呼叫，輸入引數為 this，即 Observable 物件本身。
![](https://img-blog.csdnimg.cn/img_convert/7a09fb6dc947c80c5f922fb5041b9b9d.png)

現在進入到 map 操作返回的 新函式 mapOperation 的函式體內部了：

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

因為此時 button 尚未點選，因此 Observable 物件並沒有 emit 值，只是完成相關的 setup 工作。

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

這行語句：

```javascript
return source.lift(new MapOperator(project, thisArg));
```

只是返回一個新的 Observable 物件，其 source 屬性指向呼叫 lift 操作的原始 Observable 物件，而 operator 屬性指向 new MapOperator 返回的結果，後者是 project 的 wrapper.

如此一來，呼叫 subscribe 方法註冊應用程式監聽函式的 Observable 物件，再也不是 fromEvent 返回的原始 Observable 物件，而是前者呼叫了 pipe，接收了 map 指定的 project 之後，由 source.lift( new MapOperator) 返回的新 Observable 物件。
![](https://img-blog.csdnimg.cn/img_convert/425ec2ea26ef2301233d44842743836b.png)

這個新的 Observable 物件，呼叫 subscribe 方法，執行邏輯和這篇文章[RxJs fromEvent 工作原理分析](https://jerry.blog.csdn.net/article/details/117567312)介紹的相比有所差異，複雜度稍稍增加了。

把 Observable 物件 operator 屬性值提取出來：
![](https://img-blog.csdnimg.cn/img_convert/bce838f0f3786748289d9ad0a5cf311e.png)

接下來的 21行程式碼執行，和之前沒有 operator 時相比，沒有差異，略過。

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

前一篇文章進入 ELSE 分支，而本文因為 operator 的存在，進入 22 行的 IF 分支：
![](https://img-blog.csdnimg.cn/img_convert/109f4c21ca2ac9a09d02f548ccb93c79.png)

首先執行 operator.call 方法：

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

MapSubscriber 也是 Subscriber 的子類之一，和其父類相比，多了 project 屬性。

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

再次執行 subscribe：

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

因為這次傳入的 Observable 是最原始的即 fromEvent 返回的 Observable，因此不存在 operator，所以進入 ELSE 分支執行：
![](https://img-blog.csdnimg.cn/img_convert/4834b72eb80156a417849836bf085c98.png)

重點分析 this 和 sink：

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

this 是 fromEvent 返回的原始 Observable，而 sink 是包含了 map operator 以及應用程式定義的訂閱邏輯的 Subscriber：

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

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

_trySubscribe 呼叫 _subscribe:
![](https://img-blog.csdnimg.cn/img_convert/a560a4b396a0f6f67385d92bdb21b062.png)

最終仍舊進入了 fromEvent 的核心邏輯：

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

這段程式碼，定義了 fromEvent，以什麼樣的方式，emit 何種型別的資料。

- 什麼樣的方式？addEventListener，每次 eventTarget 定義的 HTMLElement 發生 click 事件時，emit 資料
- emit 的資料格式為 MouseEvent.
![](https://img-blog.csdnimg.cn/img_convert/ec086c9865e2808956e9d6035f17501c.png)

至此 Observable 相關的 setup 執行完畢。

點選按鈕，觸發之前透過 addListener 註冊的 handler 函式。fromEvent.js 此處 subscriber 不是原始的 subscriber，而是 MapSubscriber，其 destination 屬性的 _next, 指向了應用程式指定的訂閱處理邏輯。Emit 的資料是 MouseEvent.

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

MapSubscriber 的特色：在將原始值 MouseEvent 交給應用程式之前，先要執行 project 對其進行處理：
![](https://img-blog.csdnimg.cn/img_convert/aa0f803f2aa9559a1a5c428c530eab38.png)

這個 project 的邏輯是，將 MouseEvent 物件對映成 timestamp 時間戳：
![](https://img-blog.csdnimg.cn/img_convert/62f0dc6888f5251373c0c559d7da2b10.png)

將 project 處理結果返回給destination 繼續進行傳遞：

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

this._next 指向的是應用程式定義的 console.log(event), 在這裡得到執行：

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

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

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

RxJs map operator 工作原理分析

相關文章