このページは、実験的な機能について説明しています。
パブリックフィールド宣言とプライベートフィールド宣言の両方は、JavaScript の標準化委員会である TC39 で提案された実験的な機能(ステージ 3)です。
ブラウザーのサポートは限られていますが、Babel のようなシステムではビルドステップを経て機能を利用することができます。下記の互換性情報を参照してください。
パブリックスタティックフィールドとパブリックインスタンスフィールドは、書き込み可能、列挙可能、設定可能なプロパティです。そのため、プライベートとは異なり、プロトタイプの継承に参加します。
class ClassWithInstanceField {
instanceField = 'instance field'
}
class ClassWithStaticField {
static staticField = 'static field'
}
class ClassWithPublicInstanceMethod {
publicMethod() {
return 'hello world'
}
}
パブリックスタティックフィールドは、すべてのクラスインスタンスを作成するのではなく、クラスごとに一度だけフィールドが存在するようにしたい場合に役立ちます。これは、キャッシュや固定設定、その他インスタンス間で複製する必要のないデータなどに便利です。
パブリックスタティックフィールドは、static キーワードを使用して宣言されます。これらは、クラスの評価時に{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してコンストラクタに追加され、その後はコンストラクタからアクセスします。
class ClassWithStaticField {
static staticField = 'static field'
}
console.log(ClassWithStaticField.staticField)
// expected output: "static field"
初期化子のないフィールドは undefined に初期化されます。
class ClassWithStaticField {
static staticField
}
console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
console.log(ClassWithStaticField.staticField)
// expected output: "undefined"
パブリックスタティックフィールドはサブクラスを再初期化しませんが、プロトタイプチェーンを介してアクセスすることができます。
class ClassWithStaticField {
static baseStaticField = 'base field'
}
class SubClassWithStaticField extends ClassWithStaticField {
static subStaticField = 'sub class field'
}
console.log(SubClassWithStaticField.subStaticField)
// expected output: "sub class field"
console.log(SubClassWithStaticField.baseStaticField)
// expected output: "base field"
フィールドを初期化する場合、this はクラスのコンストラクタを参照します。また、名前で参照し、スーパークラスのコンストラクタが存在する場合は super を使用してスーパークラスのコンストラクタを取得することもできます (存在する場合)。
class ClassWithStaticField {
static baseStaticField = 'base static field'
static anotherBaseStaticField = this.baseStaticField
static baseStaticMethod() { return 'base static method output' }
}
class SubClassWithStaticField extends ClassWithStaticField {
static subStaticField = super.baseStaticMethod()
}
console.log(ClassWithStaticField.anotherBaseStaticField)
// expected output: "base static field"
console.log(SubClassWithStaticField.subStaticField)
// expected output: "base static method output"
パブリックインスタンスフィールドは、作成されたクラスのすべてのインスタンスに存在します。パブリックフィールドを宣言することで、フィールドが常に存在していることを確認でき、クラスの定義がより自己文書化されます。
パブリック インスタンスフィールドは、ベースクラスの構築時（コンストラクタ本体が実行される前）、またはサブクラスの super() が返された直後のいずれかに {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} で追加されます。
class ClassWithInstanceField {
instanceField = 'instance field'
}
const instance = new ClassWithInstanceField()
console.log(instance.instanceField)
// expected output: "instance field"
初期化子のないフィールドは undefined に初期化されます。
class ClassWithInstanceField {
instanceField
}
const instance = new ClassWithInstanceField()
console.assert(instance.hasOwnProperty('instanceField'))
console.log(instance.instanceField)
// expected output: "undefined"
プロパティと同様に、フィールド名を計算することができます。
const PREFIX = 'prefix'
class ClassWithComputedFieldName {
[`${PREFIX}Field`] = 'prefixed field'
}
const instance = new ClassWithComputedFieldName()
console.log(instance.prefixField)
// expected output: "prefixed field"
フィールドを初期化する場合、this は構築中のクラスインスタンスを参照します。パブリックインスタンスメソッドと同じように、サブクラスにいる場合は super を使って superclass プロトタイプにアクセスできます。
class ClassWithInstanceField {
baseInstanceField = 'base field'
anotherBaseInstanceField = this.baseInstanceField
baseInstanceMethod() { return 'base method output' }
}
class SubClassWithInstanceField extends ClassWithInstanceField {
subInstanceField = super.baseInstanceMethod()
}
const base = new ClassWithInstanceField()
const sub = new SubClassWithInstanceField()
console.log(base.anotherBaseInstanceField)
// expected output: "base field"
console.log(sub.subInstanceField)
// expected output: "base method output"
static キーワードは、クラスのスタティックメソッドを定義します。スタティックメソッドは、クラスのインスタンスでは呼び出されません。代わりに、クラス自体から呼び出されます。これらは、オブジェクトを作成したり、クローンを作成したりするユーティリティ関数であることが多いです。
class ClassWithStaticMethod {
static staticMethod() {
return 'static method has been called.';
}
}
console.log(ClassWithStaticMethod.staticMethod());
// expected output: "static method has been called."
スタティックメソッドは、クラスの評価時に {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してクラスのコンストラクタに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。
パブリックインスタンスメソッドはその名の通り、クラスインスタンスで利用できるメソッドです。
class ClassWithPublicInstanceMethod {
publicMethod() {
return 'hello world'
}
}
const instance = new ClassWithPublicInstanceMethod()
console.log(instance.publicMethod())
// expected output: "hello world"
パブリックインスタンスメソッドは、{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用して、クラスの評価時にクラスプロトタイプに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。
ジェネレーター関数、async、非同期ジェネレーター関数を利用することができます。
class ClassWithFancyMethods {
*generatorMethod() { }
async asyncMethod() { }
async *asyncGeneratorMethod() { }
}
インスタンスメソッドの中では、this はインスタンス自体を指します。サブクラスでは、super を使用してスーパークラスのプロトタイプにアクセスし、スーパークラスからメソッドを呼び出すことができます。
class BaseClass {
msg = 'hello world'
basePublicMethod() {
return this.msg
}
}
class SubClass extends BaseClass {
subPublicMethod() {
return super.basePublicMethod()
}
}
const instance = new SubClass()
console.log(instance.subPublicMethod())
// expected output: "hello world"
ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。get および set 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。
class ClassWithGetSet {
#msg = 'hello world'
get msg() {
return this.#msg
}
set msg(x) {
this.#msg = `hello ${x}`
}
}
const instance = new ClassWithGetSet()
console.log(instance.msg)
// expected output: "hello world"
instance.msg = 'cake'
console.log(instance.msg)
// expected output: "hello cake"
| 仕様書 |
|---|
| {{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}} |
{{Compat("javascript.classes.public_class_fields")}}