服务

Question

我有一项服务正在加载要在多个组件之间共享的基本系统信息。

如果我在服务中不使用双箭头，则在getter中创建一个this的getter方法将成为组件的this。

服务

import { Injectable } from '@angular/core';

@Injectable()
export class WhoAmIService {

  constructor() { }
  whoAmI = 'I\'m a service'
  getterOne(): string {
    return this.whoAmI
  }
  getterTwo = (): string => {
    return this.whoAmI
  }  

}

组件

import { Component } from '@angular/core';
import { WhoAmIService } from './who-am-i.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  whoAmI = 'I\'m a component'
  getterOne: Function
  getterTwo: Function
  constructor(
    private whoAmIService: WhoAmIService
  ) {
    this.getterOne = whoAmIService.getterOne
    this.getterTwo = whoAmIService.getterTwo
    console.log('cool', whoAmIService.getterOne())
    console.log('cool', whoAmIService.getterTwo())
    console.log('why is this different', this.getterOne())
    console.log('cool', this.getterTwo())    
  }
}

https://stackblitz.com/edit/angular-xxsven

问题

如果我将getter函数分配给组件，为什么我需要arrow函数？

Answer 1

对于普通函数语法，this的范围通常会发生变化，从而导致意外行为。这就是您的情况。

更新的箭头函数语法通过保留this的范围来解决此问题。因此，您可以仅依靠它来使其工作并显示预期的行为。

如果您仍然想使用旧的function语法使其工作，则必须bind服务实例，如下所示：

console.log('why is this different', this.getterOne.bind(this.whoAmIService)());

以下是一些文章和SO OP供您参考：

这是您的Updated StackBlitz，供任何参考。

Answer 2

每当将函数分配给任何其他变量时，实际上都会复制该函数定义并充当具有相同代码的新函数。

您可以认为它是原始功能的克隆。

现在重要的一点是执行该功能的dim example as string Example = Range("O4").End(xlDown).End(xlDown).End(xlDown).End(xlDown).End(xlDown).Offset(5, 0).Address(referencestyle:=xlR1C1) Range(TableDaysStart).Formula = "=" & Example。因此context只不过是this在哪里执行。

现在让我们回到您的示例

context-在whoAmIService.getterOne()内部执行，因此whoAmIService（context）指向this。
whoAmIService-由于上下文为this.getterOne()，此处将指向AppComponent类。

注意：这与Angular无关。它的Javascript概念。

只需访问此即可了解更多信息-https://hackernoon.com/execution-context-in-javascript-319dd72e8e2c

Angular 5：Service Getter为什么引用Getter而不是直接调用Getter时使用双箭头

服务

组件

问题

2 个答案: