blob: 889eb2be96d290be808054fd93d0748cf05e281a (
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
|
---
title: static
slug: Web/JavaScript/Reference/Classes/static
tags:
- Classes
- ECMAScript 2015
- JavaScript
- Reference
translation_of: Web/JavaScript/Reference/Classes/static
---
<div>{{jsSidebar("Classes")}}</div>
<p>Le mot-clé <code><strong>static</strong></code> permet de définir une méthode statique d'une classe. Les méthodes statiques ne sont pas disponibles sur les instances d'une classe mais sont appelées sur la classe elle-même. Les méthodes statiques sont généralement des fonctions utilitaires (qui peuvent permettre de créer ou de cloner des objets par exemple).</p>
<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">static <em>nomMéthode()</em> { ... }</pre>
<h2 id="Description">Description</h2>
<p>Les méthodes statiques sont utilisées lorsque la méthode ne s'applique qu'à la classe elle-même et pas à ses instances. Les méthodes statiques sont généralement utilisées pour créer des fonctions utilitaires.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_classique">Exemple classique</h3>
<p>Dans l'exemple qui suit, on illustre :</p>
<ul>
<li>comment une classe implémente une méthode statique</li>
<li>comment une classe avec une propriété statique peut être déclinée avec une sous-classe</li>
<li>comment une méthode statique peut ou ne peut pas être appelé</li>
</ul>
<pre class="brush: js">class Triple {
static triple(n) {
if (n === undefined) {
n = 1;
}
return n * 3;
}
}
class SuperTriple 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(SuperTriple.triple(4)); // 144
var tp = new Triple();
console.log(SuperTriple.triple(4)); // 144 (pas d'impact de l'affectation du parent)
console.log(tp.triple()); // tp.triple n'est pas une fonction
</pre>
<h3 id="Utilisation_depuis_une_autre_méthode_statique">Utilisation depuis une autre méthode statique</h3>
<p>Afin d'appeler une autre méthode statique dans une méthode statique, on pourra utiliser {{jsxref("Opérateurs/L_opérateur_this","this")}}.</p>
<pre class="brush: js">class StaticMethodCall {
static staticMethod() {
return 'Méthode statique appelée';
}
static anotherStaticMethod() {
return this.staticMethod() + ' depuis une autre statique';
}
}
StaticMethodCall.staticMethod();
// 'Méthode statique appelée'
StaticMethodCall.anotherStaticMethod();
// 'Méthode statique appelée depuis une autre statique'</pre>
<h3 id="Depuis_les_constructeurs_de_classes_et_les_autres_méthodes">Depuis les constructeurs de classes et les autres méthodes</h3>
<p>Les méthodes statiques ne sont pas directement accessibles via le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>. Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique <code>NomDeClasse.MéthodeStatique()</code> (comme pour les autres appels en dehors de la classe) ou avec la propriété <code>constructor</code> : <code>this.constructor.MéthodeStatique()</code>.</p>
<pre class="brush: js">class StaticMethodCall{
constructor(){
console.log(StaticMethodCall.staticMethod());
// 'appel de la méthode statique'
console.log(this.constructor.staticMethod());
// 'appel de la méthode statique'
}
static staticMethod(){
return 'appel de la méthode statique.';
}
}</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("javascript.classes.static")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/class">Expression <code>class</code></a></li>
<li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Déclaration <code>class</code></a></li>
<li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
</ul>
|
