blob: 02701e550d391dd75c256f9d779ee5d6f9ed6aac (
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
|
---
title: static
slug: Web/JavaScript/Reference/Classes/static
tags:
- Classes
- ECMAScript 2015
- JavaScript
- 자바스크립트
- 클래스
translation_of: Web/JavaScript/Reference/Classes/static
---
<div>{{jsSidebar("Classes")}}</div>
<p><strong>static</strong> 키워드는 클래스의 정적 메서드를 정의합니다.</p>
<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p>
<div class="hidden">
<p>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 href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>
<h2 id="문법">문법</h2>
<pre class="syntaxbox">static methodName() { ... }</pre>
<h2 id="설명">설명</h2>
<p>정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.</p>
<h2 id="정적_메서드의_호출">정적 메서드의 호출</h2>
<h4 id="다른_정적_메서드에서의_호출">다른 정적 메서드에서의 호출</h4>
<p>동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 <code><a href="https://developer.mozilla.org/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/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 를 써서는 직접적인 접근을 할 수 없다. 바른 호출 방법은 클래스 명칭을 쓰거나, 즉 <code>CLASSNAME.STATIC_METHOD_NAME()</code> 을 이용하거나 혹은 그 메서드를 생성자의 한 속성으로 부르는 것으로, 즉 <code>constructor</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>
<pre class="brush: js">class Triple {
static triple(n) {
n = n || 1; //비트연산이 아니어야 합니다.
return n * 3;
}
}
class BiggerTriple extends Triple {
static triple(n) {
return super.triple(n) * super.triple(n);
}
}
console.log(Triple.triple()); // 3
console.log(Triple.triple(6)); // 18
console.log(BiggerTriple.triple(3)); // 81
var tp = new Triple();
console.log(BiggerTriple.triple(3)); // 81 (부모의 인스턴스에 영향을 받지 않습니다.)
console.log(tp.triple()); // 'tp.triple은 함수가 아닙니다.'.
console.log(tp.constructor.triple(4)); // 12
</pre>
<p> </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('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ES6')}}</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>
<p>{{Compat("javascript.classes.static")}}</p>
<h2 id="참고">참고</h2>
<ul>
<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>
|
