语法高亮,滚动条美化,设置页面调整

This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions

View File

@@ -3,18 +3,18 @@
<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">super([arguments]);
<pre><code class="language-javascript">super([arguments]);
// 调用 父对象/父类 的构造函数
super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法
</pre>
</code></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 class="external" href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html" rel="noopener">classes sample</a></p>
<pre class="brush: js">class Polygon {
<pre><code class="language-javascript">class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
@@ -50,10 +50,10 @@ class Square extends Polygon {
set area(value) {
this.area = value;
}
}</pre>
}</code></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">class Human {
<pre><code class="language-javascript">class Human {
constructor() {}
static ping() {
return 'ping';
@@ -66,10 +66,10 @@ class Computer extends Human {
return super.ping() + ' pong';
}
}
Computer.pingpong(); // 'ping pong'</pre>
Computer.pingpong(); // 'ping pong'</code></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> 去删除父类的属性,这样做会抛出 <a href="Reference/Global_Objects/ReferenceError" title="ReferenceError引用错误 对象代表当一个不存在的变量被引用时发生的错误。"><code>ReferenceError</code></a></p>
<pre class="brush: js">class Base {
<pre><code class="language-javascript">class Base {
constructor() {}
foo() {}
}
@@ -81,10 +81,10 @@ class Derived extends Base {
}
new Derived().delete();
// ReferenceError: invalid delete involving 'super'.</pre>
// ReferenceError: invalid delete involving 'super'.</code></pre>
<h3 id="Super.prop_不能覆写不可写属性"><code>Super.prop</code> 不能覆写不可写属性</h3>
<p>当使用 <a href="Reference/Global_Objects/Object/defineProperty" title="Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。"><code>Object.defineProperty</code></a> 定义一个属性为不可写时,<code>super</code>将不能重写这个属性的值。</p>
<pre class="brush: js">class X {
<pre><code class="language-javascript">class X {
constructor() {
Object.defineProperty(this, "prop", {
configurable: true,
@@ -102,10 +102,10 @@ let x = new X();
x.f();
// TypeError: "prop" is read-only
console.log(x.prop);
// 1</pre>
// 1</code></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>调用了第一个对象中的方法。 当然,这需要我们先利用 <a href="Reference/Global_Objects/Object/setPrototypeOf" title="如果对象的[[Prototype]]被修改成不可扩展(通过 Object.isExtensible()查看)就会抛出 TypeError异常。如果prototype参数不是一个对象或者null(例如数字字符串boolean或者 undefined)则什么都不做。否则该方法将obj的[[Prototype]]修改为新的值。"><code>Object.setPrototypeOf()</code></a><code>obj2</code>的原型加到<code>obj1</code>上,然后才能够使用<code>super</code>调用 <code>obj1</code>上的<code>method1</code></p>
<pre class="brush: js">var obj1 = {
<pre><code class="language-javascript">var obj1 = {
method1() {
console.log("method 1");
}
@@ -120,7 +120,7 @@ var obj2 = {
Object.setPrototypeOf(obj2, obj1);
obj2.method2();
// logs "method 1"
</pre>
</code></pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>