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
|
---
title: クラス式
slug: Web/JavaScript/Reference/Operators/class
tags:
- クラス
- ECMAScript 2015
- 式
- JavaScript
- 言語機能
- 演算子
- リファレンス
browser-compat: javascript.operators.class
translation_of: Web/JavaScript/Reference/Operators/class
---
{{jsSidebar("Operators")}}
**クラス式**は、 ECMAScript 2015 でクラスを定義する方法の 1 つです。{{jsxref("Operators/function", "関数式", "", "true")}}と同じように、クラス式は名前を付けることも付けないこともできます。名前を付けた場合、クラス名はクラス内部のみのローカルです。
JavaScript のクラスはプロトタイプベースの継承が使われます。
{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}
## 構文
```js
const MyClass = class [className] [extends otherClassName] {
// クラス本体
}
```
## 解説
クラス式の構文は、{{jsxref("Statements/class", "クラス宣言（文）", "", "true")}} と似ています。 `class` 文では、 `class` 式の本体が{{jsxref("Strict_mode", "厳格モード", "", 1)}}で実行されます。
しかし、クラス式と{{jsxref("Statements/class", "クラス文", "", "true")}}ではいくつかの相違点があります。
- クラス式ではクラス名（「束縛識別子」 (binding identifier)）を省略できますが、{{jsxref("Statements/class", "クラス文", "", "true")}}では省略できません。
- クラス式は {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}} を**発生させずに**クラスを再宣言することができます。これは{{jsxref("Statements/class", "クラス文", "", "true")}}の場合はできません。
`constructor` メソッドは省略可能です。クラス式で生成されたクラスは、常に {{jsxref("Operators/typeof", "typeof")}} が "`function`" の値を返します。
```js
'use strict';
let Foo = class {}; // コンストラクタープロパティは省略可能
Foo = class {}; // 再宣言が可能
typeof Foo; // "function" を返す
typeof class {}; // "function" を返す
Foo instanceof Object; // true
Foo instanceof Function; // true
class Foo {} // SyntaxError が発生 (クラス宣言は再宣言ができない)
```
## 例
### 簡単なクラス式
以下は、名前のない簡単なクラス式です。変数 `Foo` を使って参照できます。
```js
const Foo = class {
constructor() {}
bar() {
return 'Hello World!';
}
};
const instance = new Foo();
instance.bar(); // "Hello World!"
Foo.name; // "Foo"
```
### 名前付きクラス式
クラス内部で現在のクラスを参照したい場合は、*名前付きクラス式*を作成してください。この名前は、そのクラス式自身のスコープ内だけで見ることができます。
```js
const Foo = class NamedFoo {
constructor() {}
whoIsThere() {
return NamedFoo.name;
}
}
const bar = new Foo();
bar.whoIsThere(); // "NamedFoo"
NamedFoo.name; // ReferenceError: NamedFoo is not defined
Foo.name; // "NamedFoo"
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{jsxref("Operators/function", "関数式", "", "true")}}
- {{jsxref("Statements/class", "クラス宣言", "", "true")}}
- {{jsxref("Classes", "クラス", "", "true")}}
|
