[JavaScript General] JavaScript におけるオブジェクト指向の特徴と ES2015 のクラス定義への書き換え

こちらで勉強。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
山田 祥寛
技術評論社
売り上げランキング: 36,098
  • プロトタイプベースのオブジェクト指向。
  • より縛りの弱いクラスのようなもの。
  • プロトタイプとは「あるオブジェクトの元となるオブジェクト」。

クラスの定義

変数に対して、関数リテラルを代入。

var Member = function() {};
var mem = new Member();

関数()にクラスとしての役割を与えている。

コンストラクタで初期化する

  • コンストラクタの名前は、普通の関数と区別するために大文字で始めるのが一般的。
  • this に対して変数を指定することで、インスタンスの プロパティ を設定できる。
  • 値が関数オブジェクトであるプロパティが メソッド と見なされる。
'use strict'
var Member = function Member(firstName, lastName) {
  // Property
  this.firstName = firstName;
  this.lastName = lastName;
  // Method
  this.getName = function() {
    return this.lastName + ' ' + this.firstName;
  }
};
var mem = new Member('小穂', '田畑');
document.writeln(mem.getName());

なお、コンストラクタによるメソッドの追加には、 メソッドの数に比例して無駄なメモリを消費する という大きな問題点がある。

動的にメソッドを追加する

getName メソッドを後付けで定義するように書き換えた例。
下記の mem2.getName() はエラーとなる。

'use strict'
var Member = function Member(firstName, lastName) {
  // Property
  this.firstName = firstName;
  this.lastName = lastName;
};
var mem = new Member('小穂', '田畑');
// Method
mem.getName = function() {
  return this.lastName + ' ' + this.firstName + '<br />';
}
document.writeln(mem.getName());
var mem2 = new Member('実穂', '田畑');
document.writeln(mem2.getName());
  • 生成されたインスタンスに対してメソッドが追加されている。
  • Java のようなクラスベースのオブジェクト指向のように「同一クラスを元に生成されたインスタンスは同一のメンバを持つ」のではなく、JavaScript のようなプロトタイプベースのオブジェクト指向では「 同一クラスを元に生成されたインスタンスであっても、それぞれがもつメンバは同一であるとは限らない 」。

ES2015 のクラス定義に書き換える

ES2015 のクラス定義を使うと、他の言語のように書ける。

See the Pen JavaScript ES2015 Defining classes by DriftwoodJP (@DriftwoodJP) on CodePen.