Определения методов

Определение метода — это более короткий синтаксис для определения свойства функции в инициализаторе объекта. Его также можно использовать в классах.

Попробуйте

const obj = {
  foo() {
    return "bar";
  },
};

console.log(obj.foo());
// Expected output: "bar"

Синтаксис

({
  property(parameters) {},
  *generator(parameters) {},
  async property(parameters) {},
  async *generator(parameters) {},

  // with computed keys
  [expression](parameters) {},
  *[expression](parameters) {},
  async [expression](parameters) {},
  async *[expression](parameters) {},
})

Описание

Сокращенный синтаксис похож на синтаксис геттера и сеттера.

Учитывая следующий код:

const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

Теперь вы можете сократить это до:

const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

Свойства, определенные с использованием этого синтаксиса, являются собственными свойствами созданного объекта, и они являются настраиваемыми, перечисляемыми и записываемыми, как и обычные свойства.

function*, async function и async function* свойства имеют соответствующие синтаксисы методов; см. примеры ниже.

Однако обратите внимание, что синтаксис метода не эквивалентен обычному свойству со значением функции — существуют семантические различия. Это делает методы, определенные в литералах объектов, более согласованными с методами в классах.

Определения методов не могут быть конструкторами

Методы не могут быть конструкторами! Они вызовут TypeError, если вы попытаетесь их создать. С другой стороны, свойство, созданное как функция, может быть использовано как конструктор.

const obj = {
  method() {},
};
new obj.method(); // TypeError: obj.method is not a constructor

Использование super в определениях методов

Только функции, определенные как методы, имеют доступ к ключевому слову super. super.prop ищет свойство в прототипе объекта, на котором был инициализирован метод.

const obj = {
  __proto__: {
    prop: "foo",
  },
  notAMethod: function () {
    console.log(super.prop); // SyntaxError: 'super' keyword unexpected here
  },
};

Примеры

Использование определений методов

const obj = {
  a: "foo",
  b() {
    return this.a;
  },
};
console.log(obj.b()); // "foo"

Определения методов в классах

Вы можете использовать точно такой же синтаксис для определения общедоступных методов экземпляра, доступных для экземпляров класса. В классах вам не нужен разделитель-запятая между методами.

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return "hello world";
  }
  secondPublicMethod() {
    return "goodbye world";
  }
}

const instance = new ClassWithPublicInstanceMethod();
console.log(instance.publicMethod()); // "hello world"

Общедоступные методы экземпляра определены в свойстве prototype класса и поэтому разделяются всеми экземплярами класса. Они записываемые, неперечисляемые и настраиваемые.

Внутри методов экземпляра this и super работают так же, как и в обычных методах. Обычно this ссылается на сам экземпляр. В подклассах super позволяет получить доступ к прототипу объекта, к которому присоединен метод, что позволяет вызывать методы из суперкласса.

class BaseClass {
  msg = "hello world";
  basePublicMethod() {
    return this.msg;
  }
}

class SubClass extends BaseClass {
  subPublicMethod() {
    return super.basePublicMethod();
  }
}

const instance = new SubClass();
console.log(instance.subPublicMethod()); // "hello world"

Статические методы и приватные методы используют схожие синтаксисы, которые описаны на страницах static и приватные элементы.

Вычисляемые имена свойств

Синтаксис метода также поддерживает вычисляемые имена свойств.

const bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo".toUpperCase()]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.FOO()); // 2

Методы-генераторы

Обратите внимание, что звездочка (*) в синтаксисе метода-генератора должна быть *перед* именем свойства генератора. (То есть * g(){} будет работать, а g *(){} — нет.)

// Using a named property
const obj = {
  g: function* () {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

// The same object using shorthand syntax
const obj2 = {
  *g() {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

const it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1

Асинхронные методы

// Using a named property
const obj = {
  f: async function () {
    await somePromise;
  },
};

// The same object using shorthand syntax
const obj2 = {
  async f() {
    await somePromise;
  },
};

Асинхронные методы-генераторы

// Using a named property
const obj = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

// The same object using shorthand syntax
const obj2 = {
  async *f() {
    yield 1;
    yield 2;
    yield 3;
  },
};

Спецификации

Совместимость с браузерами

См. также

• Руководство по работе с объектами
• Функции
• get
• set
• Инициализатор объекта
• class