类方法、类字段函数和类字段箭头函数有什么区别？

类方法、类属性（函数）和类属性（箭头函数）之间有什么区别？是否this关键字在方法的不同变体中表现不同？

class Greeter {
  constructor() {
    this.greet();
    this.greet2();
    this.greet3();
  }

  greet() {
    console.log('greet1', this);
  }

  greet2 = () => {
    console.log('greet2', this);
  }

  greet3 = function() {
    console.log('greet3', this);
  }
}
      
let bla = new Greeter();

这是从 TypeScript 转译后生成的 JavaScript。

var Greeter = /** @class */ (function () {
function Greeter() {
    var _this = this;
    this.greet2 = function () {
        console.log('greet2', _this);
    };
    this.greet3 = function () {
        console.log('greet3', this);
    };
    this.greet();
    this.greet2();
    this.greet3();
}
Greeter.prototype.greet = function () {
    console.log('greet1', this);
};
return Greeter;
}());
var bla = new Greeter();

我的 TypeScript 版本是 3.4.5。

所有 3 个版本之间都存在差异。这种差异体现在 3 个方面：

1. Who is this在运行时
2. 函数被分配的地方
3. 是什么类型的this在打字稿中。

让我们从它们工作的地方开始。考虑这个类，它有一个类字段：

class Greeter {
  constructor(private x: string) {
  }
  greet() {
    console.log('greet1', this.x);
  }

  greet2 = () => {
    console.log('greet2', this.x);
  }

  greet3 = function () {    
    // this is typed as any 
    console.log('greet3', this.x);
  }
}

let bla = new Greeter(" me");

对于此类，所有 3 个函数调用都将按预期打印：'greet* me'当调用时bla

bla.greet()
bla.greet2()
bla.greet3()

运行时这是谁

箭头函数捕获this从声明上下文来看，所以this in greet2始终保证是创建此函数的类实例。其他版本（方法和函数）没有做出这样的保证。

因此，在这段代码中，并非所有 3 个都打印相同的文本：

function call(fn: () => void) {
  fn();
}

call(bla.greet) // greet1 undefined 
call(bla.greet2) //greet2 me
call(bla.greet3) // greet3 undefined

当将函数作为事件处理程序传递给另一个组件时，这一点尤其重要。

函数被分配的地方

类方法（例如greet）被分配在原型上，字段初始化（例如greet2 and greet3) 在构造函数中赋值。这意味着greet2 and greet3将具有更大的内存占用，因为它们每次都需要分配新的闭包Greeter被实例化。

typescript 中的 this 类型是什么？

打字稿将输入this作为一个例子Greeter在这两个方法中（greet）和箭头函数（greet2）但会输入this与任何在greet3。如果您尝试使用，这将导致错误this in greet3 under noImplictAny

何时使用它们

1. 如果此函数不会作为事件处理程序传递给另一个组件，请使用方法语法（除非您使用bind或其他东西来确保this仍然是类的实例）

2. 当您的函数将传递给其他组件并且您需要访问时，请使用箭头函数语法this函数内部。

3. 实在想不出一个好的用例，通常会避免。