ふみぽん's diary

技術的な備忘録が主のブログ

JavaScript入門⑥

JavaScriptの勉強をしたので備忘録として記事を書きます。(その5)


JavaScriptの関数

ビルドインオブジェクト

JSの仕様で最初から用意されているオブジェクトのこと (Mothオブジェクト・Dateオブジェクト等)

//参考)Mathオブジェクト使って80〜120の整数を出力する
let rundomNum = Math.random() * 40 + 80;
console.log(Math.round(rundomNum));

//参考)Dateオブジェクト
const now = new Date();
console.log(now);
console.log(now.getFullYear());

const birthDay = new Date('2000-11-23');
console.log(birthDay)
console.log(birthDay.getDate());

クラス

JavaScriptでは、雛形となるクラスを用意して、それを利用することで
同じようなオブジェクトを楽に作成するという考え方がある。

以下に「name」と「type」をいう属性をもった同じようなオブジェクトがある。

const poch = {
    name: poch,
    type: chihuahua
}

const hach = {
    name: hach,
    type: shiba
}

仮に同じようなオブジェクトを1万個作ろうとするととても大変。。。
そんな時に使えるのがクラスという概念

まず、雛形クラス(Dog)を作ってみる。

class Dog {
    //コンストラクタ
    constructor(name, type) {
        this.name = name;
        this.type = type;
    }
    //メソッド
    bark() {
        console.log(`${this.name}:wan! wan!!!`)
    }
}

Dogクラスを利用してオブジェクトを生成してみる。

const poch = new Dog("poch", "chihuahua")
poch.bark(); // 実行結果=> poch:wan! wan!!!

雛形クラスを利用すると

  • オブジェクトの生成が楽にできる
  • 同じようなコードを複数回書かなくて良い(共通化できる)

というメリットがありそうです。

継承

継承という考え方もあります。
クラスを作成する際に他のクラス(親クラス)を継承して、
親クラスで定義されている内容を引き継ぐことができる。

以下ではDogクラスを継承したMyDogクラスを作ってみます。

class MyDog extends Dog {  //「extends」を使ってDogクラスを継承しています
    constructor(name, type, age) {
    super(name, type); // ここでは親クラスのDogクラスで定義されているコンストラクタと同じ処理
    this.age = age;
  }
    bark() {
    console.log(`${this.name}:bou! bou!`);
  }
}

インスタンス化して、メソッドを実行してみます。

const solt = new MyDog("solt", "mix", 7);
console.log(solt.age): // 実行結果 => 7
solt.bark(); // 実行結果 => solt:bou! bou!

上記のMyDogクラスでは、barkメソッドを定義しましたが、
仮に定義しなければ、親クラスであるDogクラスで定義されているメソッドが呼び出されます。