Question

以下2个摘要给出了相同的结果。我想知道这两种方法的真正区别是什么，何时应该使用一种方法代替另一种方法。有人可以帮我理解差异吗？

案例1：

class Person{
  constructor(name){
    this.name = name;
  }

  printData(){
    console.log(this.name);
  }
}

案例2：

class Person{
  constructor(name){
    this.name = name;
    this.printData = function(){
      console.log(this.name);
    }
  }
}

Answer 1

实例属性与原型不同。

在构造函数中定义函数时，每个新实例都会定义一个新函数，类似于

{
  printData: function () { ... }
}

当您在类中定义方法时，该方法在原型中定义并由每个实例共享。

即第一种方法，

const p1 = new Person('bob')
const p2 = new Person('rob')
p1.printData === p2.printData // false

第二种方法

const p1 = new Person('bob')
const p2 = new Person('rob')
p1.printData === p2.printData // true

Answer 2

有一些区别，但我认为最重要的是，当您添加类方法时，TypeScript会将其转换为所谓的 prototype 方法，即 >共享用于所有对象实例。另一方面，将方法添加到构造函数中的对象将仅将其添加到该对象实例，可能覆盖任何具有相同名称的原型方法。

每个场景都有其用例，但是根据我的经验，大多数时候您应该首选原型方法，因此在TypeScript中是类方法。它还更适合TypeScript的OO世界。

您可以阅读有关原型成员和对象成员的更多信息，例如here。

另一个差异是 Class 2 示例甚至可能不是有效的TypeScript代码（取决于我猜的版本），因为基本上您是在向实例动态添加方法，而不是静态声明它在课堂上。即使您可以使其成为有效的TypeScript（例如，使用诸如强制转换为any之类的技巧），我也很确定您会失去方法printData的编辑器intellisense。

类中构造函数中或外部构造方法的不同（给出相同的结果）

2 个答案: