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

こちらで勉強。

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.07.25

山田祥寛
技術評論社
売り上げランキング: 36,098

Amazon.co.jpで詳細を見る

プロトタイプベースのオブジェクト指向。
より縛りの弱いクラスのようなもの。
プロトタイプとは「あるオブジェクトの元となるオブジェクト」。

Contents

クラスの定義

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

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 のクラス定義を使うと、他の言語のように書ける。

Classes – JavaScript | MDN

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