javascript - ES6 Method Definition Shorthand 是否只创建一个函数对象？

Question

使用在 JavaScript 中创建类的“旧方法”，您通常会避免执行以下操作:

function Car {
    this.make = "Renault";
    this.model = "Twingo";
    this.name = function () {
        return this.make + this.model;
    };
}

因为它会在类的每个实例化时创建一个新的函数对象，所以您宁愿这样做:

function Car {
    this.make = "Renault";
    this.model = "Twingo";
}

Car.prototype.name = function() {
    return this.make + this.model;
}

在 ES6 中，使用更新的 class 语法，我们可以做如下事情:

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
    name () {
        return this.make + this.model;
    }
}

这是否只创建一个共享函数对象？或者它是否像第一次一样在每次 new 调用时实例化一个新实例？

Answer 1

您在构造函数中定义为属性的函数将为每个实例创建。您在构造函数外部定义的函数将在该原型(prototype)上可用。因此名称函数只会创建一次。

说这是你的课

class Test {
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
    this.func1 = function() {};
  }
  func2() {}
}

const test = new Test('一','二');

如果您 checkin devtools，您可以看到 func1 可用于每个实例，但 func2 可用于原型(prototype)。

Test {prop1: "one", prop2: "two", func1: ƒ}
  func1: ƒ ()
  prop1: "one"
  prop2: "two"
  __proto__:
    constructor: class Test
    func2: ƒ func2()