initial commit

1 files changed, 138 insertions, 0 deletions

diff --git a/files/zh-cn/web/javascript/reference/classes/static/index.html b/files/zh-cn/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..f995fffdbc
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,138 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Static
+  - 静态方法
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>类（class）通过 <strong>static </strong>关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">static methodName() { ... }</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>静态方法调用直接在类上进行，不能在类的实例上调用。静态方法通常用于创建实用程序函数。</p>
+
+<h2 id="调用静态方法">调用静态方法</h2>
+
+<h3 id="从另一个静态方法">从另一个静态方法</h3>
+
+<p>静态方法调用同一个类中的其他静态方法，可使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> </code>关键字。</p>
+
+<pre class="brush: js">class StaticMethodCall {
+    static staticMethod() {
+        return 'Static method has been called';
+    }
+    static anotherStaticMethod() {
+        return this.staticMethod() + ' from another static method';
+    }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'
+</pre>
+
+<h3 id="从类的构造函数和其他方法">从类的构造函数和其他方法</h3>
+
+<p>非静态方法中，不能直接使用 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 关键字来访问静态方法。而是要用类名来调用：<code>CLASSNAME.STATIC_METHOD_NAME()</code> ，或者用构造函数的属性来调用该方法： <code>this.constructor.STATIC_METHOD_NAME()</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+    constructor() {
+        console.log(StaticMethodCall.staticMethod());
+        // 'static method has been called.'
+        console.log(this.constructor.staticMethod());
+        // 'static method has been called.'
+    }
+    static staticMethod() {
+        return 'static method has been called.';
+    }
+}</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的例子说明了这几点：</p>
+
+<ol>
+ <li>静态方法如何在类上实现。</li>
+ <li>具有静态成员的类，可以被子类化 。</li>
+ <li>什么情况下静态方法可以调用，什么情况下不能调用。</li>
+</ol>
+
+<p class="brush: js"> </p>
+
+<pre class="brush: js">class Tripple {
+  static tripple(n = 1) {
+    return n * 3;
+  }
+}
+
+
+class BiggerTripple extends Tripple {
+  static tripple(n) {
+    return super.tripple(n) * super.tripple(n);
+  }
+}
+
+
+console.log(Tripple.tripple());// 3
+console.log(Tripple.tripple(6));// 18
+
+let tp = new Tripple();
+
+console.log(BiggerTripple.tripple(3));// 81（不会受父类实例化的影响）
+console.log(tp.tripple());// 'tp.tripple 不是一个函数'.</pre>
+
+<p class="brush: js"> </p>
+
+<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-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/class"><code>class</code>表达式</a></li>
+ <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/class"><code>class</code>声明</a></li>
+ <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>