1. 給開發者的 Web 技術文件
  2. JavaScript
  3. JavaScript 參考文件
  4. Functions
  5. 方法定義

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in English Always switch to English

方法定義

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.

自 ECMAScript 2015 開始，引入了一種於物件初始器（objects initializers）中定義方法的簡短語法。是一個將函式指派予方法名稱的簡便方式。

嘗試一下

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

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

語法

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // compare getter/setter syntax:
  get property() {},
  set property(value) {}
};

說明

這個簡短的語法和在 ECMAScript 2015 引入 getter 以及 setter 類似。

請看以下程式碼：

js
var obj = {
  foo: function () {
    /* code */
  },
  bar: function () {
    /* code */
  },
};

你可以把它縮減為：

js
var obj = {
  foo() {
    /* code */
  },
  bar() {
    /* code */
  },
};

產生器方法

產生器方法（Generator method）也可以透過簡短語法定義之。用的時候：

  • 簡短語法的星號（*）必須放在產生器方法的屬性名前面。也就是說 * g(){} 能動但 g *(){} 不行；
  • 非產生器方法的定義可能不會有 yield 關鍵字。也就是說過往的產生器函式動不了、並拋出SyntaxError。Always use yield in conjunction with the asterisk (*).
js
// Using a named property
var obj2 = {
  g: function* () {
    var index = 0;
    while (true) yield index++;
  },
};

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

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

Async 方法

Async 方法 也可以透過簡短語法定義。

js
// Using a named property
var obj3 = {
  f: async function () {
    await some_promise;
  },
};

// The same object using shorthand syntax
var obj3 = {
  async f() {
    await some_promise;
  },
};

Async generator methods

Generator methods can also be async.

js
var obj4 = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

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

Method definitions are not constructable

All method definitions are not constructors and will throw a TypeError if you try to instantiate them.

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

var obj = {
  *g() {},
};
new obj.g(); // TypeError: obj.g is not a constructor (changed in ES2016)

範例

Simple test case

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

Computed property names

The shorthand syntax also supports computed property names.

js
var bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo" + 2]() {
    return 2;
  },
};

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

規範

Specification
ECMAScript® 2027 Language Specification
# sec-method-definitions

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content