1 files changed, 184 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/operators/super/index.html b/files/zh-cn/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..6681f759ab
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,184 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>super</strong>关键字用于访问和调用一个对象的父对象上的函数。</p>
+
+<p><code>super.prop</code>和<code>super[expr]</code>表达式在<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">类</a>和<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">对象字面量</a>任何<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">方法定义</a>中都是有效的。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">super([arguments]);
+// 调用 父对象/父类 的构造函数
+
+super.functionOnParent([arguments]);
+// 调用 父对象/父类 上的方法
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>在构造函数中使用时，<code>super</code>关键字将单独出现，并且必须在使用<code>this</code>关键字之前使用。<code>super</code>关键字也可以用来调用父对象上的函数。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="在类中使用super">在类中使用<code>super</code></h3>
+
+<p>以下代码片段来自于 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a>。</p>
+
+<pre class="brush: js notranslate">class Polygon {
+  constructor(height, width) {
+    this.name = 'Rectangle';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this._area = value;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    this.height; // ReferenceError，super 需要先被调用！
+
+    // 这里，它调用父类的构造函数的,
+    // 作为Polygon 的 height, width
+    super(length, length);
+
+    // 注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
+    // 忽略这, 这将导致引用错误。
+    this.name = 'Square';
+  }
+}
+</pre>
+
+<h3 id="调用父类上的静态方法">调用父类上的静态方法</h3>
+
+<p>你也可以用 super 调用父类的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static">静态方法</a>。</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I have 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' which are all equal';
+  }
+}
+Square.logDescription(); // 'I have 4 sides which are all equal'</pre>
+
+<h3 id="删除_super_上的属性将抛出异常">删除 super 上的属性将抛出异常</h3>
+
+<p>你不能使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete 操作符</a> 加 <code>super.prop</code> 或者 <code>super[expr]</code> 去删除父类的属性，这样做会抛出 {{jsxref("ReferenceError")}}。</p>
+
+<pre class="brush: js notranslate">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // this is bad
+  }
+}
+
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'.</pre>
+
+<h3 id="super.prop_不能覆写不可写属性"><code>super.prop</code> 不能覆写不可写属性</h3>
+
+<p>当使用 {{jsxref("Object.defineProperty")}} 定义一个属性为不可写时，<code>super</code>将不能重写这个属性的值。</p>
+
+<pre class="brush: js notranslate">class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Cannot overwrite the value.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" is read-only
+console.log(y.prop); // 1</pre>
+
+<h3 id="在对象字面量中使用super.prop">在对象字面量中使用<code>super.prop</code></h3>
+
+<p><code>Super</code>也可以在<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> 符号中使用。在下面的例子中，两个对象各定义了一个方法。在第二个对象中, 我们使用<code>super</code>调用了第一个对象中的方法。 当然，这需要我们先利用 {{jsxref("Object.setPrototypeOf()")}} 设置<code>obj2</code>的原型为<code>obj1</code>，然后才能够使用<code>super</code>调用 <code>obj1</code>上的<code>method1</code>。</p>
+
+<pre class="brush: js notranslate">var obj1 = {
+  method1() {
+    console.log("method 1");
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</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-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</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.operators.super")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super &amp; Extends in JavaScript</a></li>
+</ul>