【8/31まで 今季最大のセール開催中!】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】クラス構文

【JavaScript入門】クラス構文

クラスの宣言とインスタンス化

js

//Personクラス
class Person{

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

    //ゲッター
    getName(){
        return this.name;
    }

    //ゲッター
    getAge(){
        return this.age;
    }
}

//インスタンス化
let p1 = new Person('Taro',10);  
console.log(p1.getName());//Taro
console.log(p1.getAge());//10

let p2 = new Person('jiro',100);  
console.log(p2.getName());//jiro
console.log(p2.getAge());//100

クラス構文はすべてpublicなアクセス修飾子である

クラス構文はすべてpublicなアクセス修飾子であるため、以下のように書き換えることが可能です。

js

//インスタンス化
let p1 = new Person('Taro',10);  

//結果を出力
console.log(p1.getName());//Taro
console.log(p1.getAge());//10

//インスタンスの値を書き換え
p1.name = 'momotarou';
p1.age = 300;

//結果を出力
console.log(p1.getName());//momotarou
console.log(p1.getAge());//300

staticなメソッド(静的メソッド)の宣言方法

static演算子を使うことで、静的メソッドを宣言できます。

js

class Calc{
    static getKakezan(x,y){
        return x * y;
    }
}

console.log(Calc.getKakezan(2,3));//6

クラスを継承する方法

extendsキーワードを使うことで既存のクラスを継承することができます。
子クラスで親クラスと同名のメソッドを宣言すると、オーバーライドになります。

js

//動物クラス
class Animal{

    Cry(){
        console.log('鳴く');
    }
}

//Dogクラス
class Dog extends Animal{
    Cry(){
        console.log('わんわん');
    }
}

//Catクラス
class Cat extends Animal{
    Cry(){
        console.log('にゃーにゃ');
    }
}

let animal = new Animal();
let dog = new Dog();
let cat = new Cat();

animal.Cry();//鳴く
dog.Cry();//わんわん
cat.Cry();//にゃーにゃ

親クラスのメソッドやコンストラクタを呼び出す方法

superキーワードを使うことによって、親クラスのメソッドやコンストラクタを呼び出すことができます。

js

//動物クラス
class Animal{

    Cry(){
        console.log('鳴く');
    }
}

//Dogクラス
class Dog extends Animal{
    Cry(){
        console.log('わんわん');
    }
    CryOya(){
        super.Cry();
    }
}

//インスタンス化
let dog = new Dog();

dog.CryOya();//鳴く

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です