アプリ開発サークル勉強会④ 開催日時 2021年1月23日(土) 7:00-9:00

JavaScript問題集

今日もこちらの問題集をすすめていきました。
Q16-20 https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d
今までの復習問題が多かったので今回はQ20のクラスについてをまとめてみました。
内容はクラスについて。
JavaやC#と同じ感覚で使えそうなのでどんなことができるかをやってみました。

アクセス修飾子

こちらはpublicとprivateの2種類。 何も宣言しない場合はpublic
変数の前に#をつけるとprivateになるようです。

#name;

インスタンス生成した後.nameの形で呼び出せないため、getterを作成する。
Javaとこのへんは一緒ですね。

    getName() {
        return this.#name;
    }

staticにもできる。

static country;

this

thisによる変数宣言。
コンストラクタにて呼び出すことで、クラス内に変数populationを後から追加できる。
thisを使った後から追加ではアクセス修飾子をprivateにはできないようです。

    // population　追加するとこんな感じのイメージ

    constructor(country, name, population, citizen) {
        this.population = population;
    }

後からプロパティやメソッド追加

フィールドについては直感的に追加できる。 メソッドを追加するときはprototype.メソッド名で無名関数を代入するとクラス内に追加することができて、呼び出せるようになる。
クラス内に既に定義してあるフィールドやメソッドを使いたい場合は明示的にthisを使った指定をしないとエラーとなるため、注意。
どの場所のどの変数を使うかわかりませんもんね。

hyogo.prefecturalOfficeLocation = "kobeCity";

City.prototype.getNameAndPlace = function () {
    console.log(`県名:${this.getName()} + 市民名:${this.getCitizen().getName()} + 県庁所在地${this.prefecturalOfficeLocation}`);
};

継承

インスタンス生成時に現在時刻を表示させるクラスを作成。 継承元にコンストラクタを定義した場合、
thisの前にsuper()で呼び出さないエラーとなるため注意。 super.メソッド名の形でメソッドも呼び出せる。

作成したクラス

GenerateTime

class GenerateTime {
    constructor() {
        console.log(Date());
    }
}

Cityクラス

class City {
  class City {
    // private 
    // private thisへの追加によって後から追加できない。
    static country;
    #name;
    population;
    #citizen

    // コンストラクタ
    constructor(country, name, population, citizen) {
        this.country = country;
        this.#name = name;
        this.population = population;
        this.#citizen = citizen;
    }

    // getter
    getName() {
        return this.#name;
    }

    // getter
    getCitizen() {
        return this.#citizen;
    }
}

Cityzenクラス

匿名クラスにしてみました。

var Citizen = class {
    //private 
    #name;
    #age;

    // コンストラクタ
    constructor(name, age) {
        this.#name = name;
        this.#age = age;
    }

    // getter
    getName() {
        return this.#name;
    }
}

インスタンス生成　呼び出し

この辺もおんなじですね。オブジェクト 指向？？ TypeScriptをやってみて比較してみるとわかりやすそう。 昔はクラスとかアクセス修飾子がなかったようなので、その時代なら。。。
クロージャを使ってもprivateを再現できるそうな。今度やってみます。

let hyogo = new City("japan", "hyogo", 100, new Citizen("Tok", 50));
let oosaka = new City("japan", "oosaka", 110, new Citizen("kty", 40));

hyogo.getCitizen().getName();
oosaka.getCitizen().getName();

参考サイト

developer.mozilla.org