在构造函数中放置方法或在类中放置方法的差异（给出相同的结果）

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