将方法放在构造函数中或在类中放置方法的差异（给出相同的结果）[重复]答案

【问题标题】：Difference in putting method in Constructor or Outside it in a Class (Gives same Result) [duplicate]将方法放在构造函数中或在类中放置方法的差异（给出相同的结果）[重复]
【发布时间】：2019-06-13 06:45:15
【问题描述】：

以下 2 个 sn-ps 给出相同的结果。我想知道这两种方法的真正区别是什么，什么时候应该使用一种方法而不是另一种方法。有人可以帮我理解其中的区别吗？

案例一：

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);
    }
  }
}

【问题讨论】：

标签： javascript html typescript function ecmascript-6

【解决方案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

【讨论】：

【解决方案2】：

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

每个场景都可能有它的用例，但根据我的经验，大多数时候你应该更喜欢原型方法，所以在 TypeScript 中，类方法。它也更适合 TypeScript 的 OO 世界。

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

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

【讨论】：