【JavaScript】クラス② 〜プロトタイプメソッド・アクセッサプロパティ〜

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• クラスのプロトタイプメソッド、アクセッサプロパティについて
• クラスのプロトタイプメソッド、アクセッサプロパティの定義方法、使用方法

クラスのプロトタイプメソッドの定義

• クラスの動作はメソッドで定義する。
• クラスに対して定義したメソッドは、プロトタイプメソッドと呼ばれ、各インスタンスで使用できるメソッドとなる。
• メソッドの中からクラスのインスタンスを参照するには、thisを使用する。

// 人間の構造を定義する例として、クラスHumanを定義
class Human {
  // 初期化処理で使用するため仮引数(name,age)を定義しておく
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // あいさつをするgreetingメソッドを定義(これがプロトタイプメソッド)
  greeting() {
    // this.nameにおける"this"は各インスタンスを指す(後述の変数Taro、Hanakoに代入されるインスタンス)
    // this.nameをTaro.name、Hanako.nameと置き換えて見てみるとイメージが付きやすい
    console.log(`おはようございます!私の名前は${this.name}です!`);
  }
}

// Humanクラスのコンストラクタで使用する値を引数として渡し、インスタンス化したオブジェクトを各変数に代入
const Taro = new Human("タロウ", 21);
const Hanako = new Human("ハナコ", 24);

// 各インスタンスでプロトタイプメソッド(greeting)が使用できることが分かる
Taro.greeting();    // => おはようございます!私の名前はタロウです!
Hanako.greeting();  // => おはようございます!私の名前はハナコです!

クラスのアクセッサプロパティの定義

• クラスではプロパティの参照(getter)、代入(setter)時に呼び出される特殊なメソッドを定義できる。
• そのようなメソッドはアクセッサプロパティと呼ぶ。

getter(プロパティの参照用)

• 参照用はget メソッド名()とメソッド名の前にgetを付け定義する。
• getter(get)には仮引数はないが、返り値が必須。
• インスタンス名.(getter)プロパティ名で参照することができる。

class Human {
  constructor(userName) {
    this.userName = userName;
  }
  
  get name() {
    return this.userName;
  }
}

const Taro = new Human("TARO");
console.log(Taro.name); // => TARO

setter(プロパティの代入用)

• 代入用はset メソッド名()とメソッド名の前に付け定義する。
• setter(set)には仮引数(プロパティへ代入する値)が必要だが、返り値は必須ではない。
• インスタンス名.(setter)プロパティ名 = 値で代入ができる。

class Human {
  constructor(userName) {
    this.userName = userName;
  }
  
  get name() {
    return this.userName;
  }
  
  set name(userName) {
    this.userName = userName;
  }
}

const Taro = new Human("TARO");

// getter
console.log(Taro.name); // => TARO

// setterで別の値を代入してみる
Taro.userName = "taro";

// 改めてgetter
console.log(Taro.name); // => taro