blob: 2264eaa6a8047a7f61efe45dfd70a900ed470837 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: 构造方法
slug: Web/JavaScript/Reference/Classes/constructor
tags:
- Classes
- ECMAScript 2015
- JavaScript
translation_of: Web/JavaScript/Reference/Classes/constructor
---
<div>{{jsSidebar("Classes")}}</div>
<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>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">constructor([arguments]) { ... }</pre>
<h2 id="描述">描述</h2>
<p>在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (<code>constructor)</code>方法将会抛出一个 {{jsxref("SyntaxError")}} 错误。</p>
<p>在一个构造方法中可以使用<code>super</code>关键字来调用一个父类的构造方法。</p>
<p>如果没有显式指定构造方法，则会添加默认的 constructor 方法。</p>
<p>如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。</p>
<h2 id="示例">示例</h2>
<h3 id="使用constructor方法">使用<code>constructor</code>方法</h3>
<p>以下代码片段来自 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">类的实例</a>（<a href="https://googlechrome.github.io/samples/classes-es6/index.html">在线 demo</a>）。</p>
<pre class="brush: js">class Square extends Polygon {
constructor(length) {
// 在这里, 它调用了父类的构造函数, 并将 lengths 提供给 Polygon 的"width"和"height"
super(length, length);
// 注意: 在派生类中, 必须先调用 super() 才能使用 "this"。
// 忽略这个，将会导致一个引用错误。
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
// 注意：不可使用 this.area = value
// 否则会导致循环call setter方法导致爆栈
this._area = value;
}
}
</pre>
<h3 id="另一个例子">另一个例子</h3>
<p>看看这个代码片段</p>
<pre class="brush: js">class Polygon {
constructor() {
this.name = "Polygon";
}
}
class Square extends Polygon {
constructor() {
super();
}
}
class Rectangle {}
Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
let newInstance = new Square();
console.log(newInstance.name); //Polygon
</pre>
<p>这里，<strong>Square</strong>类的原型被改变，但是在正在创建一个新的正方形实例时，仍然调用前一个基类<strong>Polygon</strong>的构造函数。</p>
<h3 id="默认构造方法">默认构造方法</h3>
<p>如前所述，如果不指定构造方法，则使用默认构造函数。对于基类，默认构造函数是：</p>
<pre class="brush: js">constructor() {}</pre>
<p>对于派生类，默认构造函数是：</p>
<pre class="brush: js">constructor(...args) {
super(...args);
}</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-static-semantics-constructormethod', 'Constructor Method')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("javascript.classes.constructor")}}</p>
<h2 id="参阅">参阅</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
</ul>
|
