Question

我跟随这个heroku教程，在本节https://devcenter.heroku.com/articles/mean-apps-restful-api#create-the-contact-list-template-and-component中有ContactListComponent的类列表

有功能

  private getIndexOfContact = ( contactId : String ) => {
    return this.contacts.findIndex( (contact) => { return contact._id === contactId; } );
  }

就像这样使用：

deleteContact = (contactId: String) => {
var idx = this.getIndexOfContact(contactId);
if (idx !== -1) {
  this.contacts.splice(idx, 1);
  this.selectContact(null);
}
return this.contacts;

}

为什么getIndexOfContact是这样实现的，而不是ie：

  private getIndexOfContact( contactId : String )
  {
    return this.contacts.findIndex( (contact) => { return contact._id === contactId; } );
  }

这种语法有什么变化？

Answer 1

语法更改是一种推荐的解决方案，可以避免在使用“this”关键字调用每个示例声明的函数作为回调函数时遇到问题。

我在使用“普通”风格方式时遇到了很多麻烦，在我的项目中始终使用解决方案“=（）=＆gt; {...”之后问题就消失了。

Answer 2

他们使用arrow function处理this的上下文比常规函数更好。

示例：

class A {
      fn1() {
            console.log(this);
      }

      fn2 = () => {
            console.log(this);
      }
}

let a = new A();
setTimeout(a.fn1, 10); // Window
setTimeout(a.fn2, 10); // A {}

（code in playground）

两者之间的另一个区别是，当使用箭头函数作为类方法时，您实际上并没有获得方法，而是在类型函数的实例上获得属性。
这意味着该功能不会被添加到原型中，也不会被添加到子类中。

我的例子的编译js是：

var A = (function () {
    function A() {
        var _this = this;
        this.fn2 = function () {
            console.log(_this);
        };
    }
    A.prototype.fn1 = function () {
        console.log(this);
    };
    return A;
}());

正如您所见，fn1已分配给原型，而fn2已分配给构造函数中的实例。

修改

很多人会说使用箭头函数作为类方法是很好的做法，因为它为函数保留了this的上下文，但它们很少谈论缺点，所以这里是：

class B extends A {
      fn1() {
            console.log("B.fn1");
            super.fn1();
      }

      fn2 = () => {
            console.log("B.fn2");
            super.fn2(); // error: Only public and protected methods of the base class are accessible via the 'super' keyword
      }
}

当然，还有很多方法：

class B extends A {
      private oldFn2 = this.fn2;

      constructor() {
            super();      
      }

      fn1() {
            console.log("B.fn1");
            super.fn1();
      }

      fn2 = () => {
            console.log("B.fn2");
            this.oldFn2();
      }
}

但这太过分了，无法打电话给超级。

Typescript类中的奇怪方法定义

2 个答案:

修改