文書の過去の版を表示しています。
<markdown> # class
## クラス構文
```javascript class Test {
// 静的フィールド
static version = '1.0.0';
// 静的メソッド
static info() {
// 注意 staticコンテキストでのthis.nameはクラス名を指す(`#name`ではない)
return `${this,name} class, version ${this.version}`
}
// privateフィールド
#name = '';
// コンストラクタ
constructor(v) {
this.#name = v;
}
// メソッド
getMessage() {
return 'Hello from ${this.#name}'
}
// getter
get name() {
return this.#name;
}
// setter
set name(v) {
this.#name = v;
}
} ```
## 継承
```javascript class Test2 extends Test {
// 拡張メソッド
print() {
console.log(this.getMessage());
}
} ```
## 関数とnew
ここからはマニア向けのディープな話になる。JSの関数はコンストラクタとして機能し、new演算子によって新しいオブジェクトを生成できる
```javascript function Fuga(x) {
this.x = x;
}
const fuga = new Fuga(1);
console.log(typeof Fuga); // ⇒ function
// 普通の関数としても呼べる Fuga(); ```
以下のコードは実は上記のコードとほぼ同等。class構文で定義したクラスは実は関数なのである。このような関数はコンストラクタ関数と呼ばれる
```javascript class Fuga {
constructor(x) {
this.x = x;
}
} const fuga = new Fuga(1);
console.log(typeof Fuga); // ⇒ function
// ただしclassで定義した関数は直接呼べないように制限がかかっている Fuga(); // TypeError: Class constructor Fuga cannot be invoked without 'new' ```
※ ただしfunctionによるコンストラクタ定義は過去のコードとの互換性のために残されているので現在は非推奨でありclassキーワードを使うべき
これは何を意味しているかというとclassと銘打っているが、その実体はクラスではないということだ。クラスのような振る舞いはprototype chainという仕組みで行われている。
## constructorプロパティ
生成されたオブジェクトはconstructorというプロパティを持っている。これは自身を生成したコンストラクタ関数への参照である。
```javascript class Hoge {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
const h = new Hoge(1)
console.log(h,constructor === Hoge); // ⇒ true
const h2 = new h.constructor(2); // newすることもできる ```
## prototypeプロパティ
コンストラクタ関数はprototypeというプロパティを持っている
```javascript console.log(Hoge.prototype); ```
classで定義したメソッドは、このprototypeプロパティが持っている。
```javascript console.log(Hoge.prototype,getName); // ⇒ [function getName]
console.log(Hoge.prototype,getName.call({ name: “にゃん” })); // ⇒ にゃん ```
コンストラクタ関数を通して生成されたオブジェクトは`proto`というプロパティを持っており、コンストラクタ関数のprototypeにアクセスできる
```javascript console.log(h.proto.getName); // ⇒ [function getName] ```
`h.proto`も`proto`を持っている。このようなprototypeの連鎖をprototype chainと呼ぶ
```javascript console.log(h.proto); // ⇒ {} console.log(h.proto.proto); // ⇒ [Object: null prototype] {} ```
何も継承していないクラスの場合prototype chainは2つで終わりだが、継承すると継承した回数だけprototype chainは長くなる。
prototype chainはメソッドの呼び出しに関係している。例えば`x.
)`というコードを実行すると次のようにメソッドが検索される
1. `x`自身プロパティ一覧からmという名前のプロパティを探し、見つかったらメソッドとして実行する。なければ2へ 2. `x,proto`のプロパティ一覧からmという名前の・・・、なければ3へ 3. `x.proto.proto`のプロパティ一覧からmという名前の・・・、なければ4へ 4. prototype chainの末端まで到達しても見つからない場合はTypeErrorとなる
### prototypeを指定してオブジェクトを生成
`Object.create`を使うと任意のオブジェクトをprototypeに設定して新しいオブジェクトを生成できる
```javascript const p = {
name: 'proto',
greet() {
console.log("I am a " + this.name)
}
}
// pをプロトタイプに設定してオブジェクトを生成 const h = Object.create(p);
console.log(h.proto === p); // ⇒ true
// prototypeのnameが使われる h.greet(); // ⇒ I am a proto
// hのnameを設定 h.name = “cat”;
// h自身がnameを持っていれば、プロトタイプではなく自身のnameが使われる h.greet(); // ⇒ I am a cat ```
- [Object.create() - JavaScript | MDN(developer.mozilla.org)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
</markdow n>