initial commit

1 files changed, 220 insertions, 0 deletions

diff --git a/files/zh-cn/web/javascript/reference/functions/method_definitions/index.html b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.html
new file mode 100644
index 0000000000..a26e15dc20
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.html
@@ -0,0 +1,220 @@
+---
+title: 方法的定义
+slug: Web/JavaScript/Reference/Functions/Method_definitions
+tags:
+  - ECMAScript 2015
+  - Functions
+  - JavaScript
+  - Object
+  - 语法
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>从ECMAScript 2015开始，在对象初始器中引入了一种更简短定义方法的语法，这是一种把方法名直接赋给函数的简写方式。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div>
+
+<p class="hidden">这个交互式例子的源代码位于 GitHub 仓库中。如果你想对这个交互式的样例做出一些贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后提一个 pull request 给我们。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+  async property( <var>parameters…</var> ) {},
+  async* generator( <var>parameters…</var> ) {},
+
+  // with computed keys:
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+  async [property]( <var>parameters…</var> ) {},
+
+  // compare getter/setter syntax:
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>该简写语法与ECMAScript 2015的<a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a>和<a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>语法类似。</p>
+
+<p>如下代码：</p>
+
+<pre class="brush: js">var obj = {
+  foo: function() {
+    /* code */
+  },
+  bar: function() {
+    /* code */
+  }
+};</pre>
+
+<p>现可被简写为：</p>
+
+<pre class="brush: js">var obj = {
+  foo() {
+    /* code */
+  },
+  bar() {
+    /* code */
+  }
+};</pre>
+
+<div class="note">
+<p><strong>注意：</strong>简写语法使用命名函数而不是匿名函数（如…<code>foo: function() {}</code>…）。命名函数可以从函数体调用（这对匿名函数是不可能的，因为没有标识符可以引用）。详细信息，请参阅{{jsxref("Operators/function","function","#Examples")}}。</p>
+</div>
+
+<h3 id="生成器方法">生成器方法</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">生成器方法</a>也可以用这种简写语法定义。使用它们时，</p>
+
+<ul>
+ <li>简写语法中的星号（*）必须出现在生成器名前，也就是说<code>* g(){}</code>可以正常工作，而<code>g *(){}</code>不行。</li>
+ <li>
+  <p>非生成器方法定义可能不包含<code>yield</code>关键字。这意味着<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">遗留的生成器函数</a>也不会工作，并且将抛出 {{jsxref("SyntaxError")}}。始终使用<code>yield</code>与星号（*）结合使用。</p>
+ </li>
+</ul>
+
+<pre class="brush: js;highlight[12]">// 用有属性名的语法定义方法（ES6之前）：
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// 同一个方法，简写语法：
+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</pre>
+
+<h3 id="Async_方法">Async 方法</h3>
+
+<p>{{jsxref("Statements/async_function", "Async 方法", "", 1)}}也可以使用简写语法来定义。</p>
+
+<pre class="brush: js">// 用有属性名的语法定义方法（ES6之前）：
+var obj3 = {
+  f: async function () {
+    await some_promise;
+  }
+};
+
+// 同一个方法，简写语法：
+var obj3 = {
+  async f() {
+    await some_promise;
+  }
+};</pre>
+
+<h3 id="Async_生成器方法">Async 生成器方法</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">生成器方法</a>也能成为 {{jsxref("Statements/async_function", "async", "", 1)}}.</p>
+
+<pre class="brush: 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;<code>
+   yield 3;
+  }
+};</code></pre>
+
+<h3 id="方法定义不是构造函数">方法定义不是构造函数</h3>
+
+<p>所有方法定义不是构造函数，如果您尝试实例化它们，将抛出{{jsxref("TypeError")}}。</p>
+
+<pre class="brush: js example-bad">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)
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="简单示例">简单示例</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="计算的属性名">计算的属性名</h3>
+
+<p>该简写语法还支持计算的属性名称作为方法名。</p>
+
+<pre class="brush: js;highlight[4]">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</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Changed that generator methods should also not have a [[Construct]] trap and will throw when used with <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div class="hidden">浏览器兼容表是通过一些结构化的数据生成的。如果你想贡献一些兼容数据，请参阅 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并将 pull request 发送给我们。</div>
+
+<p>{{Compat("javascript.functions.method_definitions")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>