为了账号安全,请及时绑定邮箱和手机立即绑定

我应该在Angular的类中编写方法作为箭头函数

/ 猿问

我应该在Angular的类中编写方法作为箭头函数

犯罪嫌疑人X 2019-08-19 17:23:34

我应该在Angular的类中编写方法作为箭头函数

在Angular中,在技术上可以将类方法编写为ES2015箭头函数,但我从未真正见过有人这样做过。以这个简单的组件为例:

@Component({
  selector: 'sample'})export class SampleComponent {
  arrowFunction = param => {
    // Do something
  };
  normalFunction(param) {
    // Do something
  }}

这没有任何问题。有什么不同吗?为什么我应该或不应该使用它?


查看完整描述

3 回答

?
慕盖茨9453107

本React答案中的要点在Angular,任何其他框架或vanilla JavaScript / TypeScript中仍然有效。

类原型方法是ES6,类箭头方法不是。箭头方法属于类字段提案,而不是现有规范的一部分。它们在TypeScript中实现,也可以使用Babel进行转换。

通常最好使用原型而method() { ... }不是箭头,method = () => { ... }因为它更灵活。

回调

arrow方法提供的唯一真正机会是它可以无缝地用作回调:

class Class {
  method = () => { ... }}registerCallback(new Class().method);

如果原型方法应该用作回调,它应该另外绑定,这应该最好在构造函数中完成:

class Class {
  constructor() {
    this.method = this.method.bind(this);
  }

  method() { ... }}registerCallback(new Class().method);

类似装饰器bind-decorator可以在TypeScript和ES Next中使用,为构造函数中的方法绑定提供更简洁的替代方法:

import bind from 'bind-decorator';class Class {
  @bind
  method() { ... }}

遗产

Arrow方法也限制子类使用箭头方法,否则不会覆盖它们。如果忽略箭头,则会产生问题:

class Parent {
  method = () => { ... }}class Child extends Parent {
  method() { ... } // won't override Parent method}

super.method()在子类中使用是不可能的,因为它super.method引用了Parent.prototype.method,它不存在:

class Parent {
  method = () => { ... }}class Child extends Parent {
  method = () => {
    super.method(); // won't work
    ...
  }}

混入

原型方法可以有效地用于mixins。Mixins可用于多重继承或修复TypeScript方法可见性中的问题。

由于箭头方法在类原型上不可用,因此无法从类外部访问:

class Parent {
  method = () => { ... }}class Child extends OtherParent { ... }Object.assign(Child.prototype, Parent.prototype) // method won't be copied

测试

原型方法提供的一个有价值的特性是它们可以在类实例化之前访问,因此它们可以在测试中进行间谍或模拟,即使它们在构造后立即被调用:

class Class {
  constructor(arg) {
    this.init(arg);
  }

  init(arg) { ... }}spyOn(Class.prototype, 'init').and.callThrough();const object = new Class(1);expect(object.init).toHaveBeenCalledWith(1);

当方法是箭头时,这是不可能的。

TL; DR:原型和箭头类方法之间的选择似乎是一种品味问题,但实际上使用原型方法更具有远见卓识。您通常可能希望避免箭头类方法,除非您确定它们不会造成任何不便。bind如果将它们作为回调传递,请不要忘记使用原型方法。


查看完整回答
反对 回复 2019-08-19
?
BIG阳

类箭头函数的一个很好的用例是当你想将一个函数传递给另一个组件并在函数中保存当前组件的上下文时。

@Component({

   template:`
        I'm the parent       <child-component></child-component>

  `})export class PerentComponent{

   text= "default text"
   arrowFunction = param => {
    // Do something
    // let's update something in parent component ( this)

    this.text = "Updated by parent, but called by child"
  };}@Component({

   template:`
        I'm the child component  `})export class ChildComponent{
   @Input() parentFunction;

   ngOnInit(){
      this.parentFunction.()
   }}

 <parent-component></parent-component>

在上面的例子中,child能够调用父组件的函数并且文本将被正确地更新,就好像我只是将父级更改为:

export class PerentComponent{

   text= "default text"
   arrowFunction (){
    this.text = "This text will never update the parent's text property, because `this` will be child component  "
  };}


查看完整回答
反对 回复 2019-08-19
?
ibeautiful

只有一种情况,如果你需要进行AOT编译,你必须避免使用箭头功能,如此处所述

配置模块时,不能使用箭头功能。

❌DONT:

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { Routes, RouterModule } from '@angular/router';@NgModule({
  imports: [
    BrowserModule,
    RouterModule,
    HttpModule,
    RouterModule.forRoot([], { errorHandler: (err) => console.error(err) })
  ],
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ]})export class AppModule {}

✅做:

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { Routes, RouterModule } from '@angular/router';function errorHandler(err) {
  console.error(err);}@NgModule({
  imports: [
    BrowserModule,
    RouterModule,
    HttpModule,
    RouterModule.forRoot([], { errorHandler })
  ],
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ]})export class AppModule {}


查看完整回答
反对 回复 2019-08-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信