JS--クラスの継承

クラスの継承

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【class構文とは】
class構文はコンストラクタやメソッドを簡単に定義できるものです。15年のES2015(ES6)からjavaScriptに導入されるようになった。

【class構文の書き方】
1.クラス宣言する
書式
class　クラス名　{

     //コンストラクタや、メソッドを定義する

}
2、class式を用いる方法
→class式での特徴としてクラスを再宣言（再定義）することができる。

var myClass = class {

  //コンストラクタやメソッドを定義する

}

【コンストラクタを作る】
コンストラクタ、つまりクラスの初期化をconstructorメソッドで行う

class User {
　　//インスタンスのプロパティ設定と初期化
    constructor( name, age ) {
        this.name = name;
        this.age = age;
    }

}

//インスタンスを生成する
var taro = new User('太郎', 32);

この例では、「name」「age」というプロパティをコンストラクタで定義しています。

このように記述することで、インスタンスを生成する際に引数として文字列や数値を受け取れるわけです。class構文ではこのようにしてプロパティを定義します

【メソッドを定義する】
今度はメソッドをclass構文内に定義する

class User {
 
    constructor( name, age) {
        this.name = name;
        this.age = age;
    }
 　//メソッド関数
    getName() {
        return this.name;
    }
}

//インスタンスを生成する
var taro = new User('太郎', 32);

console.log(taro.getName());//太郎が表示される

【class構文の活用】
1.ゲッター・セッターの使い方

class User {

    constructor( name, age ) {
        this.name = name;
        this.age = age;
    }

    //セッターメソッド　　//→プロパティに任意の値を設定するためのメソッド
    set myName( value ) {
        this.name = value;
    }

    // ゲッターメソッド　　//→クラスの特定のプロパティを取得すためのメソッド　　  get myName() {
        return this.name;
    }
}

var taro = new User('太郎', 32);//初期化
console.log( taro.myName );//太郎

taro.myName = '花子';//値を代入

console.log( taro.myName );//花子

【静的メソッド（static）を作る】
静的メソッドの特徴は、インスタンスを生成しなくても利用できるという点。
サンプル

class User {
    ・
    ・
    ・
   //staticを付与することでspeak()という静的メソッドを定義
    static speak() {
        return 'みなさん、こんにちは';
  }

}//このメソッドはインスタンス不要で実行することができるのconsole.log( User.speak() );//みなさん、こんにちは

【privateなプロパティについて】
コンストラクタ内で定義したプロパティは「パブリック」なのでどこからでもアクセスできてしまうという点には注意が必要です。

・例文
class User1 {

constructor(value) {

this.name = value;

}

get myName() { return this.name; }

}

var taro = new User1('太郎');

//直接プロパティを指定
console.log(taro.name);

//ゲッターを利用
console.log(taro.myName);

上の2つの方法で、名前の値を取得できる。そこで、Symbolによる固有のIDを使ったプロパティを使うと、直接プロパティを呼び出せなく成る。

//即時関数
var User2 = (function() {
　const name = Symbol('name');

class User2 {
　constructor(value) {
　this[name] = value;

　}
　get myName() {
　　return this[name];

　　}
　} return User2;
})();

var sato = new User2('佐藤');

//直接プロパティを指定
console.log(sato[name]);//undefined

//ゲッターを利用 console.log(sato.myName);//佐藤

基本的なクラスの構造は同じですが、Symbolを使ってプロパティを作成し、また、即時関数でクラスごと囲むことで外部からのプロパティへのアクセスを遮断してます。

【クラスの継承】
「extends」を使った継承

サンプル
単純に「name」「age」というプロパティをコンストラクタで定義したシンプルなクラス

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

このUserクラスを継承して新しいクラスを作成する

class Man extends User {　　//無名関数
    speak() {
        console.log(this.name + 'さん、こんにちは');
    }
}

extendsを使って「User」クラスを継承しているのがわかりますね。また、「Man」クラスにコンストラクタを記述してない

var taro = new Man( '太郎', 34 );

taro.speak();//太郎さん、こんんちは、と表示される