mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-17 16:34:32 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -3,7 +3,7 @@
|
||||
<p><strong> <code>constructor </code></strong>是一种用于创建和初始化<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code>创建的对象的特殊方法。</p>
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/classes-constructor.html" width="100%"></iframe></p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">constructor([arguments]) { ... }</pre>
|
||||
<pre><code class="language-javascript">constructor([arguments]) { ... }</code></pre>
|
||||
<h2 id="描述">描述</h2>
|
||||
<p>在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (<code>constructor)</code>方法将会抛出一个 <a href="Reference/Global_Objects/SyntaxError" title="SyntaxError 对象代表尝试解析语法上不合法的代码的错误。"><code>SyntaxError</code></a> 错误。</p>
|
||||
<p>在一个构造方法中可以使用<code>super</code>关键字来调用一个父类的构造方法。</p>
|
||||
@@ -12,7 +12,7 @@
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="使用constructor方法">使用<code>constructor</code>方法</h3>
|
||||
<p>以下代码片段来自 <a class="external" href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html" rel="noopener">类的实例</a>（<a class="external" href="https://googlechrome.github.io/samples/classes-es6/index.html" rel="noopener">在线 demo</a>）。</p>
|
||||
<pre class="brush: js">class Square extends Polygon {
|
||||
<pre><code class="language-javascript">class Square extends Polygon {
|
||||
constructor(length) {
|
||||
// 在这里, 它调用了父类的构造函数, 并将 lengths 提供给 Polygon 的"width"和"height"
|
||||
super(length, length);
|
||||
@@ -30,10 +30,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="另一个例子">另一个例子</h3>
|
||||
<p>看看这个代码片段</p>
|
||||
<pre class="brush: js">class Polygon {
|
||||
<pre><code class="language-javascript">class Polygon {
|
||||
constructor() {
|
||||
this.name = "Polygon";
|
||||
}
|
||||
@@ -54,15 +54,15 @@ console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //
|
||||
|
||||
let newInstance = new Square();
|
||||
console.log(newInstance.name); //Polygon
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>这里，<strong>Square</strong>类的原型被改变，但是在正在创建一个新的正方形实例时，仍然调用前一个基类<strong>Polygon</strong>的构造函数。</p>
|
||||
<h3 id="默认构造方法">默认构造方法</h3>
|
||||
<p>如前所述，如果不指定构造方法，则使用默认构造函数。对于基类，默认构造函数是：</p>
|
||||
<pre class="brush: js">constructor() {}</pre>
|
||||
<pre><code class="language-javascript">constructor() {}</code></pre>
|
||||
<p>对于派生类，默认构造函数是：</p>
|
||||
<pre class="brush: js">constructor(...args) {
|
||||
<pre><code class="language-javascript">constructor(...args) {
|
||||
super(...args);
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="标准">标准</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div></div>
|
||||
<p><strong><code>extends</code></strong>关键字用于<a href="Reference/Statements/class">类声明</a>或者<a href="Reference/Operators/class">类表达式</a>中，以创建一个类，该类是另一个类的子类。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
|
||||
<pre><code class="language-javascript">class ChildClass extends ParentClass { ... }</code></pre>
|
||||
<h2 id="描述">描述</h2>
|
||||
<p><code>extends</code>关键字用来创建一个普通类或者内建对象的子类。</p>
|
||||
<p><font face="Open Sans, Arial, sans-serif">继承的</font><code>.prototype</code>必须是一个<a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a> 或者 <a href="Reference/Global_Objects/null" title="值 null 特指对象的值未设置。它是 JavaScript 基本类型 之一。"><code>null</code></a>。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="使用_extends">使用 <code>extends</code></h3>
|
||||
<p>第一个例子是根据名为 <code style="font-style: normal;">Polygon</code> 类创建一个名为<code>Square</code>的类。这个例子是从这个<a class="external" href="https://googlechrome.github.io/samples/classes-es6/index.html" rel="noopener">在线演示</a>中提取出来的。</p>
|
||||
<pre class="brush: js">class Square extends Polygon {
|
||||
<pre><code class="language-javascript">class Square extends Polygon {
|
||||
constructor(length) {
|
||||
// Here, it calls the parent class' constructor with lengths
|
||||
// provided for the Polygon's width and height
|
||||
@@ -22,10 +22,10 @@
|
||||
get area() {
|
||||
return this.height * this.width;
|
||||
}
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h3 id="使用_extends与内置对象">使用 <code>extends</code>与内置对象</h3>
|
||||
<p>这个示例继承了内置的<a href="Reference/Date" title="此页面仍未被本地化, 期待您的翻译!"><code>Date</code></a>对象。这个例子是从这个<a class="external" href="https://googlechrome.github.io/samples/classes-es6/index.html" rel="noopener">在线演示</a>中提取出来的。</p>
|
||||
<pre class="brush: js">class myDate extends Date {
|
||||
<pre><code class="language-javascript">class myDate extends Date {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@@ -34,17 +34,17 @@
|
||||
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
|
||||
}
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h3 id="扩展_null">扩展 <code>null</code></h3>
|
||||
<p>可以像扩展普通类一样扩展<a href="Reference/Global_Objects/null" title="值 null 特指对象的值未设置。它是 JavaScript 基本类型 之一。"><code>null</code></a>，但是新对象的原型将不会继承 <a href="Reference/Global_Objects/Object/prototype" title="Object.prototype 属性表示 Object 的原型对象。"><code>Object.prototype</code></a>。</p>
|
||||
<pre class="brush: js">class nullExtends extends null {
|
||||
<pre><code class="language-javascript">class nullExtends extends null {
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
Object.getPrototypeOf(nullExtends); // Function.prototype
|
||||
Object.getPrototypeOf(nullExtends.prototype) // null
|
||||
|
||||
new nullExtends(); //ReferenceError: this is not defined</pre>
|
||||
new nullExtends(); //ReferenceError: this is not defined</code></pre>
|
||||
<h2 id="标准">标准</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/classes-static.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">static methodName() { ... }</pre>
|
||||
<pre><code class="language-javascript">static methodName() { ... }</code></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 {
|
||||
<pre><code class="language-javascript">class StaticMethodCall {
|
||||
static staticMethod() {
|
||||
return 'Static method has been called';
|
||||
}
|
||||
@@ -24,10 +24,10 @@ StaticMethodCall.staticMethod();
|
||||
|
||||
StaticMethodCall.anotherStaticMethod();
|
||||
// 'Static method has been called from another static method'
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从类的构造函数和其他方法">从类的构造函数和其他方法</h3>
|
||||
<p>非静态方法中，不能直接使用 <code><a href="https://developer.mozilla.orgReference/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 {
|
||||
<pre><code class="language-javascript">class StaticMethodCall {
|
||||
constructor() {
|
||||
console.log(StaticMethodCall.staticMethod());
|
||||
// 'static method has been called.'
|
||||
@@ -37,7 +37,7 @@ StaticMethodCall.anotherStaticMethod();
|
||||
static staticMethod() {
|
||||
return 'static method has been called.';
|
||||
}
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="示例">示例</h2>
|
||||
<p>下面的例子说明了这几点：</p>
|
||||
<ol>
|
||||
@@ -46,7 +46,7 @@ StaticMethodCall.anotherStaticMethod();
|
||||
<li>什么情况下静态方法可以调用，什么情况下不能调用。</li>
|
||||
</ol>
|
||||
<p class="brush: js"> </p>
|
||||
<pre class="brush: js">class Tripple {
|
||||
<pre><code class="language-javascript">class Tripple {
|
||||
static tripple(n = 1) {
|
||||
return n * 3;
|
||||
}
|
||||
@@ -66,7 +66,7 @@ console.log(Tripple.tripple(6));// 18
|
||||
let tp = new Tripple();
|
||||
|
||||
console.log(BiggerTripple.tripple(3));// 81（不会受父类实例化的影响）
|
||||
console.log(tp.tripple());// 'tp.tripple 不是一个函数'.</pre>
|
||||
console.log(tp.tripple());// 'tp.tripple 不是一个函数'.</code></pre>
|
||||
<p class="brush: js"> </p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
Reference in New Issue
Block a user