rxjs TypeError : this. _complete 不是函数

Question

我正在学习编写一个 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()有区别，都是传入一个函数

Answer 1

observer.complete 在您使用箭头函数 complete: () => observer.complete() 和使用 时在不同的范围内被调用完成:observer.complete。

观察者complete()方法在函数的执行范围内调用_complete()，this._complete()。

在你的箭头函数中，这将起作用，因为你在 observer 对象实例上调用该方法，这意味着它在正确的范围(观察者的范围)中执行，因为它在其他情况是因为它是在订阅者范围内调用的，并且该范围内没有定义 _complete 方法，因此会抛出错误。

你也可以这样做:

complete: observer.complete.bind(observer),

使用 bind 方法，您可以将完整的方法绑定(bind)到正确的范围，即观察者的范围。