JavaScript クラス

20220329

JavaScript

t f B! P L

プログラミング

クラス

オブジェクトの設計書。オブジェクトのテンプレート。オブジェクトのテンプレートの中だけで、オブジェクトの処理を完結する(カプセル化)。
※実際には特別な関数。

クラス宣言(クラス文)

class Rectangle {
  ...
}

classキーワード + クラス名で宣言できる。

クラス宣言は、宣言の巻き上げは行われない。(関数は、巻き上げが行われる。関数式は宣言の巻き上げは行われない。)

クラス宣言(クラス式)

// 無名
const Rectangle = class {
  ...
}

// 名前付き
const Rectangle = class Rectangle2 {
    ...
}

名前付きでも、名前無し(無名)でも宣言できる。
クラス式によるクラス宣言も同様に、宣言の巻き上げは行われない。(関数は、巻き上げが行われる。関数式は宣言の巻き上げは行われない。)

コンストラクター

クラスの初期化するためのメソッド。
constructor(){}で定義する。1つのクラスに1つしか定義できない。
※メソッド:オブジェクト内の関数のこと。

クラスの使い方

// 1.クラス文
class Person {
  constructor() {          //2.コンストラクター
    this.name = 'Aichan';
  }
}
const person1 = new Person(); //オブジェクト作成

console.log(person1.name); //"Aichan"

1.クラスの宣言を行う。(テンプレを作成するイメージ)
2.コンストラクターでオブジェクト作成時に行う初期設定を定義する。
3.newキーワード+クラス名で、オブジェクト作成する(テンプレからモノを作成するイメージ)

ちょっとした挙動
// クラス式
const person2 = class Person{
    constructor(){
    	this.name = 'Aichan';
    }
}
console.log(person2.name);

この場合、結果は、 "Person"と出力される。
理由は、
・クラス宣言は特別な関数である
・関数(function)のnameプロパティを参照している
からである。

...
console.log(typeof person2); //"function"
console.log(typeof new person2); //"object"

そのため、newしないと、オブジェクトにならない。

// クラス式
const person2 = class Person{
    constructor(){
    	this.name = 'Aichan';
    }
}

console.log((new person2).name); 

結果は、"Aichan"と出力される。
newしてオブジェクト作成後のnameを出力すると、想定の動作になる。

Strictモード

クラス本体はStrictモードで実行される。
Strictモードとは、
・JavaScript で暗黙に失敗する一部のものを、エラーが発生するように変更することでする。
・JavaScript エンジンによる最適化処理を困難にする誤りを修正する。
・将来の ECMAScript で定義される予定の構文の使用を禁止する。

staticキーワード

// クラス文
class Person {
  constructor() {
    this.name = 'Aichan';
  }
  static hello = 'あいちゃんだよん';
}
const person1 = new Person();

console.log(person1.name); //"Aichan"
console.log(person1.hello); //undefined
console.log(Person.hello); //"あいちゃんだよん"

staticキーワードをつけると、newしたオブジェクトから呼び出すことはできない。
クラスをnewしないで呼び出すことはできる。

クラスフィールド

class Counter {
  count = 0 //クラスフィールド
  increment() {
    this.count ++
  }
  display() {
    console.log(this.count)
  }
}
const c = new Counter();
const c2 = new Counter();
c.display() //0
c.increment()
c.increment()
c.display() //2
c2.display() //0

クラスフィールドとは、クラス内の変数のこと。
宣言すると、クラス内では常に存在する。
それぞれのオブジェクトで独自に存在する。

継承

親クラス(スーパークラス)を引き継いだ、子クラス(サブクラス)を作ること。
継承には、extendsキーワードをつかう。
サブクラスにコンストラクターが存在する場合は、super()を呼ぶ必要がある。
メソッドを拡張できる。
super.スーパークラスのメソッド とすると、スーパークラスのメソッドも呼べる。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} は、鳴きます。`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name); // スーパークラスのコンストラクターを呼び出し、name パラメータを渡す
  }

  speak() {
    console.log(`${this.name} は、にゃーにゃーと鳴きます。`);
  }
  
 exciting(){
   console.log(`${this.name} は、興奮するとゴロゴロなります。`);
 }
  
  superSpeak(){
    super.speak();
  }
}

const c = new Cat('ごろすけ');
c.speak(); // ごろすけ は、にゃーにゃーと鳴きます。
c.exciting(); // ごろすけ は、興奮するとゴロゴロなります。
c.superSpeak(); // ごろすけ は、鳴きます。

といった感じで使える。
※バッククォート(`)の中に${変数名}とすると、文字列に変数を埋め込みできる。

getter, setter

getterは、クラス内の値を取得して返す。
setterは、クラス内の値に他の値を設定する。
getキーワード + メソッド名でgetterを定義できる。
setキーワード + メソッド名でsetterを定義できる。

class Cat {
  constructor(name) {
    this.name = name
  }

  get getName() {
    /* get構文 */
    return this.name
  }
  
  set setName(name) {
    /* set構文 */
    this.name = name
  }
}

const cat = new Cat("ごろちゃん");
console.log(cat.getName) //ごろちゃん
cat.setName = "ごろすけ"
console.log(cat.getName) //ごろすけ

このブログについて

技術的に悩んだこと、やってみたことを書き溜めています。自身の復習のため、また同じ悩みがある方は参考にできるような書き方にしていきます。 趣味の競馬AI開発と競馬AIでの予想も公開していきます。 金曜日に土曜日の中央競馬(JRA)全レース予想、土曜日に日曜日の中央競馬(JRA)全レース予想を公開する予定です。

Tags

Golang (1) JavaScript (9) python (2) 機械学習 (5) 競馬 (138) 副業 (2)

注目の投稿

2022/10/02(日) 無料 競馬AI 予想 中山競馬場

このブログを検索

アーカイブ

投稿者情報

はじめまして。あいちゃんです。雑魚エンジニアです。趣味で機械学習をやっています。日々の勉強としてアウトプットしていきます。

QooQ