javascript - 在 this 上定义的方法与在类主体中定义的方法的区别

Question

当我通过在构造函数中向类的所有实例添加方法时有什么区别

this.bar = function() {}

而不是在类体中定义函数权

baz() {}

?

class Foo {
  constructor() {
    this.bar = function() {};
  }
  
  baz() {}
}

console.log(Object.prototype.hasOwnProperty.call(new Foo, 'bar')); // true
console.log(Object.prototype.hasOwnProperty.call(new Foo, 'baz')); // false

如果我只是替换 this.baz与 this.baz在构造函数中，两个测试都返回 true :

class Foo {
  constructor() {
    this.bar = function() {};
    this.baz = this.baz;
  }
  
  baz() {}
}

console.log(Object.prototype.hasOwnProperty.call(new Foo, 'bar')); // true
console.log(Object.prototype.hasOwnProperty.call(new Foo, 'baz')); // true now

Answer 1

当你这样做 this.bar = function() { };在构造函数中，您为每个实例创建一个新函数，并将其分配给 bar属性(property)。如果您愿意，这可以让函数关闭构造函数中的某些内容。 (如果您使用箭头函数，该函数将关闭 this 和 super 。)
当你在 class 中声明一个方法时，您正在该类将分配给实例的原型(prototype)对象上创建一个函数，并重用该函数。这让函数可以使用 super如果它需要访问父类(super class)功能。
两者都有自己的位置，具体取决于您在做什么。您可以在这里看到这种差异:

class Foo1 {
    constructor() {
        this.bar = function() {};
    }
}

class Foo2 {
    bar() {}
}

const f1a = new Foo1();
const f1b = new Foo1();
console.log(f1a.bar === f1b.bar); // false

const f2a = new Foo2();
const f2b = new Foo2();
console.log(f2a.bar === f2b.bar); // true

对这个:

this.baz = this.baz;

在

class Foo {
  constructor() {
    this.bar = function() {};
//             vvvvvvvv−−−−−−−−−−−−−−− reads from the prototype
    this.baz = this.baz;
//  ^^^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−− writes to the instance

  }
  
  baz() {}
}

那是在原型(prototype)上查找函数，然后直接在对象上分配它，这就是为什么它在分配后成为自己的属性。