为什么你会在 Observable 函数上调用 .call() ? [英] Why would you ever call .call() on Observable functions?

问题描述

我是 Angular 的相对初学者，我正在努力理解我从 ng-bootstrap 项目中阅读的一些源代码.可以在这里找到源代码.

I am a relative beginner in Angular, and I am struggling to understand some source I am reading from the ng-bootstrap project. The source code can be found here.

我对 ngOnInit 中的代码很困惑:

I am very confused by the code in ngOnInit:

ngOnInit(): void {
    const inputValues$ = _do.call(this._valueChanges, value => {
      this._userInput = value;
      if (this.editable) {
        this._onChange(value);
      }
    });
    const results$ = letProto.call(inputValues$, this.ngbTypeahead);
    const processedResults$ = _do.call(results$, () => {
      if (!this.editable) {
        this._onChange(undefined);
      }
    });
    const userInput$ = switchMap.call(this._resubscribeTypeahead, () => processedResults$);
    this._subscription = this._subscribeToUserInput(userInput$);
  }

在这些 Observable 函数上调用 .call(...) 有什么意义?这是试图实现什么样的行为?这是正常模式吗?

What is the point of calling .call(...) on these Observable functions? What kind of behaviour is this trying to achieve? Is this a normal pattern?

作为我的 Angular 教育的一部分，我已经阅读/观看了大量关于 Observables(没有双关语)的阅读/观看，但我从未遇到过这样的事情.任何解释将不胜感激

I've done a lot of reading/watching about Observables (no pun intended) as part of my Angular education but I have never come across anything like this. Any explanation would be appreciated

推荐答案

要理解它，首先可以看看预定义的 JavaScript 函数方法call":

To understand it, first you can have a look at the predefined JavaScript function method "call":

var person = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var myObject = {
    firstName:"Mary",
    lastName: "Doe",
}
person.fullName.call(myObject);  // Will return "Mary Doe"

调用call"的原因是调用对象person"中的一个函数，并将上下文传递给它myObject".

The reason of calling "call" is to invoke a function in object "person" and pass the context to it "myObject".

同理，这个叫call"的原因如下:

Similarly, the reason of this calling "call" below:

const inputValues$ = _do.call(this._valueChanges, value => {
  this._userInput = value;
  if (this.editable) {
    this._onChange(value);
  }
});

在提供上下文this._valueChanges"的同时，也提供了基于该上下文调用的函数，即第二个参数，匿名函数

is providing the context "this._valueChanges", but also provide the function to be called base on that context, that is the second parameter, the anonymous function

value => {
  this._userInput = value;
  if (this.editable) {
    this._onChange(value);
  }
}

在您使用的示例中:

• this._valueChanges 是可观察的输入事件

• this._valueChanges is the Input Event Observerable

_do.call 用于在事件输入发生时做一些副作用，然后它返回源 Observable(事件 observable)的镜像 Observable

The _do.call is for doing some side affects whenever the event input happens, then it returns a mirrored Observable of the source Observable (the event observable)

更新示例代码:https://plnkr.co/edit/dJNRNI?p=preview

关于do调用:

你可以像这样在 Observable 上调用它:

You can call it on an Observable like this:

const source = Rx.Observable.of(1,2,3,4,5);
const example = source
.do(val => console.log(`BEFORE MAP: ${val}`))
.map(val => val + 10)
.do(val => console.log(`AFTER MAP: ${val}`));
const subscribe = example.subscribe(val => console.log(val));

在这种情况下，您不必将第一个参数作为上下文Observable"传递.

In this case you don't have to pass the first parameter as the context "Observable".

但是当你像你说的那样从它自己的地方调用它时，你需要将第一个参数作为你想要调用的Observable"传递.就是不一样.

But when you call it from its own place like you said, you need to pass the first parameter as the "Observable" that you want to call on. That's the different.

正如@Fan Cheung 提到的，如果你不想从它自己的地方调用它，你可以这样做:

as @Fan Cheung mentioned, if you don't want to call it from its own place, you can do it like:

const inputValues$=this._valueChanges.do(value=>{
  this._userInput = value;
  if (this.editable) {
    this._onChange(value);
  }
})

这篇关于为什么你会在 Observable 函数上调用 .call() ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！