javascriptのオブジェクト指向

オブジェクト指向とは、オブジェクトという概念に基づいたプログラミングパラダイムの一つである。

クラス：オブジェクトが属する集合としてクラスを定義し、クラス定義からそのインスタンスとしてオブジェクトを生成する。

クラス：設計図のようなイメージ

インスタンス：設計図から作成された実体

class Human{
  name = "takaken";
  hello(){
    console.log('Hello, I am ${this.name}.');
  }
}

//インスタンス生成
const human = new Human();
human.hello();
console.log(human.name)

コンストラクタの追加

nameの値をインスタンスを生成する際に動的に設定したい場合にコンストラクタが用いられる。

class Human{
  constructor(name){
    this.name = name;
  }
  hello(){
    console.log(this.name);
  }
}

//インスタンス生成
const h1 = new Human("Mori");

h1.hello()

デフォルト引数を設定する方法もある。

window.onload = function() {
  
};

class Human{
  constructor(name="Yanagita"){
    this.name = name;
  }
  hello(){
    console.log(this.name);
  }
}

//インスタンス生成
const h1 = new Human();

h1.hello()

クラスの継承

・extends

class Human{
  constructor(name="Yanagita"){
    this.name = name;
  }
  hello(){
    console.log(this.name);
  }
}

//継承

class Engineer extends Human{
  writeCode(){
    console.log("I am writing code");
  }
}

const engineer = new Engineer("Mori");
engineer.hello();
engineer.writeCode()

親クラスをsuperクラス、子クラスをサブクラスという

・super

・オーバーライド

class Human{
  constructor(name="Yanagita"){
    this.name = name;
  }
  hello(){
    console.log(this.name);
  }
}

//継承

class Engineer extends Human{
  hello(){
    super.hello()
    console.log("Hi")
  }
  writeCode(){
    console.log("I am writing code");
  }
}

const engineer = new Engineer("Mori");
engineer.hello();
engineer.writeCode()

superを使うことで親のメソッドの中身をそのまま持ってこれる。

上のプログラムでは親のhelloメソッドにHiを追加している。

コンストラクタのオーバーライドも可能

class Human{
  constructor(name="Yanagita"){
    this.name = name;
  }
  hello(){
    console.log(this.name);
  }
}

//継承

class Engineer extends Human{
  constructor(name,skill){
    super(name);
    this.skill = skill;
  }
  writeCode(){
    console.log("I am writing code");
  }
}

const engineer = new Engineer("Mori","java");
console.log(engineer.skill)

カプセル化

オブジェクトのアクセスを制限し、独立性を高める

むやみに変更されたくない値のアクセスを制限する

class Human{
  #name;
  constructor(name){
    this.#name = name;
  }
  hello(){
    console.log(this.#name);
  }
}

//継承


const human = new Human("Mori");
human.hello()
console.log(human.#name)

上記のコードを実行するとエラー吐かれる。

そこで、ゲッターとセッターを用いる

class Human{
  #name;
  constructor(name){
    this.#name = name;
  }
  hello(){
    console.log(this.#name);
  }
  //ゲッター
  getName(){
    return this.#name;
  }
  setName(name){
    this.#name = name;
  }
}


const human = new Human("Mori");
//直接値を参照はできないが、ゲッターとセッターを使えばアクセス可能
console.log(human.getName());
human.setName("tadokoro");
console.log(human.getName());


human.hello()

こうすることでアクセス可能

class Human{
  #name;
  constructor(name){
    this.#name = name;
  }
  hello(){
    console.log(this.#name);
  }
  //ゲッター
  get name(){
    return this.#name;
  }
  set name(name){
    this.#name = name;
  }
}


const human = new Human("Mori");
//直接値を参照はできないが、ゲッターとセッターを使えばアクセス可能
console.log(human.name);
human.name = "kikuchi";
console.log(human.name);


human.hello()

このような書き方もある

class Human{
  #name;
  constructor(name){
    this.#name = name;
  }
  hello(){
    console.log(this.#name);
    this.#bye()
  }
  //ゲッター
  getName(){
    return this.#name;
  }
  setName(name){
    this.#name = name;
  }
  #bye(){
    console.log('bye');
  }
}


const human = new Human("Mori");
//直接値を参照はできないが、ゲッターとセッターを使えばアクセス可能
console.log(human.getName());
human.setName("tadokoro");
console.log(human.getName());


human.hello()

メソッドをカプセル化も可能

参考

https://www.youtube.com/watch?v=lXZkEorkBH0&t=586s&ab_channel=REDIMPULZLab%5B%E3%83%AC%E3%83%83%E3%83%89%E3%82%A4%E3%83%B3%E3%83%91%E3%83%AB%E3%82%B9%E3%83%BB%E3%83%A9%E3%83%9C%5D