JavaScriptのメモ_その2

JavaScriptに関するメモです。

クラス

定義

class Car {

  // コンストラクタ
  constructor(color){
    this.color = color; // フィールドはここに書かないといけない
  }

  // メソッド
  run(){
    console.log("車が走り出したよ!");
  }
}

インスタンス生成、メソッド実行

const car = new Car("yellow");
car.run();

継承

class Porsche extends Car {

  // コンストラクタのオーバーライド
  constructor(color, model){
    super(color);
    this.model = model;
  }

  // メソッドのオーバーライド
  run(){
    console.log("ポルシェが走り出したよ!");    
  }
}

ファイル分割

script.js(プログラム実行)
car.js(Carクラスの定義)
porsche.js(Porscheクラスの定義)

に分割する場合

car.js

class Car {

  constructor(color){
    this.color = color;
  }

  // メソッド
  run(){
    console.log("車が走り出したよ!");
  }
}

export default Car; // Carクラスが他のファイルでも使用できるようにする

exportはクラスだけでなく文字列や関数もできる。
defaultのエクスポートは一つだけ。
複数のエクスポートしたい時は名前付きエクスポートを使う。

porsche.js

import Car from "./car"; // Carクラスを使用するためにimport

class Porsche extends Car {

  constructor(color, model){
    super(color);
    this.model = model;
  }

  run(){
    console.log("ポルシェが走り出したよ!");    
  }
}

export default Car;

デフォルトエクスポートの場合、importはexportの時と名前が違っていても問題なし。
ただし、名前付きエクスポートの場合はimportで同じ名前を使う必要あり。

script.js

import Porsche from "./porsche";

const porsche = new Porsche("yellow", "911");

コメントを残す

メールアドレスが公開されることはありません。