blob: f995fffdbc2d989ac8132d46dc4d5d07b505dc3c (
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
131
132
133
134
135
136
137
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>
|
