rxjs TypeError：this._complete不是函数

Posted 2021-05-06

当我这样写时，我正在学习写一个rxjs运算符：

function map<T, R>(project: (value: T) => R): OperatorFunction<T, R> {
  return function mapOperation(source$: Observable<T>): Observable<R> {
    if (typeof project !== "function") {
      throw new TypeError("argument is not a function...");
    }
    return Observable.create((observer: Observer<R>) => {
      console.log(observer.complete);
      const subscription = source$.subscribe({
        next: value => {
          try {
            observer.next(project(value));
          } catch (e) {
            observer.error(e);
          }
        },
        error: observer.error,
        complete: observer.complete // here
      });
      return () => {
        subscription.unsubscribe();
      };
    });
  };
}

const source$ = of(1, 2, 3);
map((x: number) => x * x)(source$).subscribe(console.log);

它出错了：

 this._complete();
           ^
TypeError: this._complete is not a function
    at Object.Subscriber.complete (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Subscriber.ts:126:12)
    at Object.wrappedComplete (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Subscriber.ts:248:54)
    at SafeSubscriber.__tryOrUnsub (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Subscriber.ts:265:10)
    at SafeSubscriber.complete (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Subscriber.ts:251:16)
    at Subscriber._complete (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Subscriber.ts:148:22)
    at Subscriber.complete (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Subscriber.ts:126:12)
    at Observable._subscribe (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/util/subscribeToArray.ts:11:14)
    at Observable._trySubscribe (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Observable.ts:238:19)
    at Observable.subscribe (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/node_modules/rxjs/src/internal/Observable.ts:219:14)
    at Observable._subscribe (/Users/ahabhgk/moby-dick/FE/some-note/deep-in-rxjs/index.ts:10:36)

但是当我将complete: observer.complete更改为complete: () => observer.complete()时，很好

function map<T, R>(project: (value: T) => R): OperatorFunction<T, R> {
  return function mapOperation(source$: Observable<T>): Observable<R> {
    if (typeof project !== "function") {
      throw new TypeError("argument is not a function...");
    }
    return Observable.create((observer: Observer<R>) => {
      console.log(observer.complete);
      const subscription = source$.subscribe({
        next: value => {
          try {
            observer.next(project(value));
          } catch (e) {
            observer.error(e);
          }
        },
        error: observer.error,
        complete: () => observer.complete() // here
      });
      return () => {
        subscription.unsubscribe();
      };
    });
  };
}

const source$ = of(1, 2, 3);
map((x: number) => x * x)(source$).subscribe(console.log);

为什么complete: observer.complete和complete: () => observer.complete()之间存在差异，它们都传递给函数

答案

observer.complete在与箭头函数complete: () => observer.complete()不同的范围内调用，并且显然观察者complete()方法在函数（_complete()）的范围内在内部调用this._complete()。

在您的箭头函数中，这是有效的，因为它在正确的范围内（观察者的范围）调用了它，因为在另一种情况下它不起作用，因为它在可观察范围内被调用，并且没有_complete方法在该范围内定义。