Сокращения определения метода ES6 создают только один функциональный объект?

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

Функции, которые вы определяете как свойство внутри конструктора, будут создаваться для каждого экземпляра. Функции, которые вы определяете за пределами конструктора, будут доступны в этом прототипе. Таким образом, имя functon будет создано только один раз.

Скажи, что это твой класс

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

const test = new Test ('one', 'two');

Если вы включите devtools, вы увидите, что func1 доступен для каждого экземпляра, но func2 доступен для прототипа.

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