JavaScript入門 クラス

//ユーザー情報を管理するオブジェクトを仮定した場合
//ユーザー：山田太郎
const taro = {
    username: "山田太郎",
    password: "taro-pad",
    login(){
        console.log( `ログイン [ ${this.username} / ${this.password} ]` );
    }
}
//ユーザー：山田花子
const hanako = {
    username: "山田花子",
    password: "hanako-pad",
    login(){
        console.log( `ログイン [ ${this.username} / ${this.password} ]` );
    }
}

//ユーザーを作成するクラスの定義
class User {
    constructor( username, password ){
        this.username = username;
        this.password = password;
    }
    login() {
        console.log( `ログイン [ ${this.username} / ${this.password} ]` );
    }
}
const taro = new User("山田太郎","taro-pad");  //オブジェクトの作成：山田太郎
const hanako = new User("山田花子","hanako-pad");  //オブジェクトの作成：山田花子

引数あり
const オブジェクト = new クラス名( [ 引数1,引数2,・・・ ] );
引数なし
const オブジェクト = new クラス名

class TestCls{

    constructor( arg ){
        this.prop = arg;
    }

}

const obj = new TestCls( "引数" );   //インスタンス化
console.log( obj.prop );
>引数                                //クラス内でthis.propに設定した値が取得される

obj.prop = "値の変更";               //オブジェクトのプロパティの値を変更
console.log( obj.prop );
>値の変更

class TestCls{
    constructor() {
        this.prop = "値";    //return文があるためthisは無視される
        return { test: "returnで返されたオブジェクト" };
    }
}
console.log( new TestCls );
>{ test: "returnで返されたオブジェクト" };

class TestCls{
    method( arg ){
        console.log( `引数:[ ${ arg } ]でメソッドを実行` );
    }
}
const obj = new TestCls;
obj.method( "テスト" );
>引数:[ テスト ]でメソッドを実行 

class User {
    constructor( username, password ){
        this.username = username;   //インスタンスプロパティに値を取得
        this.password = password;   //インスタンスプロパティに値を取得
    }
    login() {
        console.log( `ログイン [ ${this.username} / ${this.password} ]` );//プロパティに設定された値を取得
    }
    changePassword( pwd ){
        this.password = pwd;   //プロパティの値変更
        console.log( `パスワードが[ ${this.password} ]に変更されました。` );
    }
}
const taro = new User("山田太郎","taro-pad");

taro.login();
>ログイン [ 山田太郎 / taro-pwd ]

taro.changePassword( "new-pwd" );
>パスワードが[ new-pwd ]に変更されました。

taro.login();
>ログイン[ 山田太郎 / new-pwd ]

class User {
    constructor( username, password ){
        this.username = username;   //インスタンスプロパティに値を取得
        this.password = password;   //インスタンスプロパティに値を取得
    }
    login() {
        this.check();  //thisを通して他のメソッドを実行
        console.log( `ログイン [ ${this.username} / ${this.password} ]` );
    }
    check(){
        console.log( `ログイン情報をチェックします。` );
    }
   
}
const taro = new User("山田太郎","taro-pad");
taro.login();
>ログイン情報をチェックします。
>ログイン [ 山田太郎 / taro-pwd ]

class クラス名 {
    static プロパティ名 = 値;
    static メソッド名(){・・・}
}

クラス名.プロパティ名;
クラス名.メソッド名();

class Human {
    static TYPE = "普通の人";     //静的プロパティを定義
    static staticMove(){         //静的メソッドを定義
        console.log( Human.TYPE + "は歩いて移動します。" );
    }
    constructor( name ){
       this.name = name;
    }
    move(){                      //インスタンスメソッド
       console.log( this.name + "は歩いて移動します。" );
    }
}

const taro = new Human( "太郎" );
Human.staticMove();
>普通の人は歩いて移動します。
console.log( Human.TYPE );
>普通の人
taro.move();
>太郎は歩いて移動します。

class TestCls {
    static STATIC_PROP = "静的プロパティ";
    static staticMethod(){ return "静的メソッド"; }
    method(){
        console.log( this.constructor.STATIC_PROP  );
        console.log( this.constructor.staticMethod() );
    }  
}
const test = new TestCls;
test .method();
>静的プロパティ
>静的メソッド

class クラス名{
    get ゲットプロパティ(){
        return ゲットプロパティを参照した際に取得される値;
    }
    set セットプロパティ( 設定された値 ){
        プロパティに値を設定するときに実行したい処理
    }
}

const obj = new クラス名;
console.log( obj.ゲットプロパティ );  //ゲッターの実行
obj.セットプロパティ = 値;            //セッターの実行

class User {
    constructor( firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    get fullname(){
        return this.lastname + this.firstname;  //fullnameが取得された場合には氏名を結合して返す
    }
    set age( value ){
        this._age = Number( value );            //ageに値が設定された場合には_ageに数値を設定
    }
    get age(){
       return this._age;                        //ageが取得された場合には_ageプロパティの値を返す
    }
}
const taro = new Person( "太郎" , "山田" );

//ゲッターを通して値を取得
console.log( taro.fullname );      //※1
>山田太郎
//セッターを通して文字列で値を設定
taro.age = "18";　　　　　　　　　　　//※2
//ゲッターを通して値を取得
console.log( typeof taro.age );//taro._ageの値が返される
>number   　　　　　　　　　　　　　　//数値型が取得される　※3
//オブジェクトの状態を確認
console.log( taro );
>{ firstname: "太郎", last name: "山田", _age: 18 } //_ageプロパティにageの値は保持

//継承元クラス（親クラス）
class Parent{
    constructor( value ){
         this.parentProp = value;
    }
    parentMethod(){
        console.log( "親クラスのメソッド" ); 
    }
}
//継承先クラス（子クラス）
class Child extends Parent {         // extendsでParentクラスを継承  ※1
    constructor( parentProp, childProp ){
        super( parentProp );         //親クラスのコンストラクタを実行 ※2
        this.childProp = childProp;  //子クラス独自のプロパティ追加
    }
    childMethod(){
        //親クラスのプロパティを取得
        console.log( `子から親サクセス[ ${ this.parentProp } ]` );   ※3
    }
}
//子クラスからインスタンス化
const childObject = new Child("親","子");

//オブジェクトの確認
console.log( childObject ); 
>{ parentProp: "親", childProp: "子" }  //親クラスのプロパティも設定されている  ※4
childObject.parentMethod();             //親クラスのメソッドも実行可能！       ※4
>親クラスのメソッド
childObject.childMethod();              //子クラスのメソッドも実行可能！
>子から親にアクセス[ 親 ]

class Parent{
    method() { console.log( "親クラスのメソッド" ) }
}
class Child extends Parent {
   method() { console.log( "子クラスのメソッド" ) }
   myMethod(){ this.method() }                      //子クラスのmethodを実行
   parentMethod() { super.method() }                //親クラスのmethodを実行
}
const obj = new Child;
obj.myMethod();
>子クラスのメソッド
obj.parentMethod();
>親クラスのメソッド

let result = インスタンス instanceof クラス名;

class Parent {  }
class Child extends Parent {  }
const obj = new Child;
console.log( obj instanceof Child );
>true
console.log( obj instanceof Parent );
>true

console.log( obj instanceof Object);
>true

class Person {
    constructor(){
        this.name = "山田太郎";
    }
}
const taro = new Person;
console.log( taro );
>{ name: "山田太郎" }
console.log( taro.hasOwnProperty( "name" ) ); //実装していないhasOwnPropertyメソッドが利用可能
>true

let 真偽値 = オブジェクト.hasOwnProperty( "プロパティ" );

let 真偽値 = "プロパティ名" in オブジェクト;

class Person{
    constructor(){
        this.name = "山田太郎";
    }
    hello(){
        console.log("こんにちは");
    }
}
const taro = new Person;
console.log( taro.hasOwnProperty( "name" ) );    //hasOwnPropertyメソッドを使ったプロパティの存在確認
>true
console.log( "name" in taro );                   //in演算子を使ったプロパティの存在確認
>true
console.log( taro.hasOwnProperty( "hello" ) );   //hasOwnPropertyメソッドを使ったプロパティの存在確認
>false
console.log( "hello" in taro );                  //in演算子を使ったメソッドの存在確認
>true

console.log( "hasOwnProperty" in taro );
>true

//ES2015のクラスで書いた場合
class ES2015 {
    constructor(){       //コンストラクタ内でプロパティを設定
        this.prop = 0;
    }
}
//ES2022のクラスで書いた場合
class ES2022 {  
    prop = 0;           //クラスのトップレベルでプロパティを設定可能
}

class ES2022 {
    prop1 = 0;   //コンストラクタの引数を代入しない場合
    constructor( arg ){       //コンストラクタ内でプロパティを設定
        this.prop2 = arg;      //コンストラクタの引数を代入する場合、constructor内で行う
    }
}

class Counter{
    #count = 0;                     //プライベートプロパティ
    #print(){                       //プライベートメソッド
        console.log( this.#count );
    }
    increment(){                    //パブリックメソッド
        this.#count++;
        this.#print();              //プライベートメソッドを実行
    }
}
const counter = new Counter;
counter.increment();                //プライベートメソッドを実行
>1
counter.#count = 10;                //プライベートプロパティはクラス外からアクセス不可
counter.#print();                   //プライベートメソッドはクラス外からの実行不可