[JavaScript General] JavaScript におけるオブジェクト指向の特徴と ES2015 のクラス定義への書き換え
こちらで勉強。
[markdown]
技術評論社
売り上げランキング: 36,098
– プロトタイプベースのオブジェクト指向。
– より縛りの弱いクラスのようなもの。
– プロトタイプとは「あるオブジェクトの元となるオブジェクト」。
## クラスの定義
変数に対して、関数リテラルを代入。
“`javascript
var Member = function() {};
var mem = new Member();
“`
関数（）にクラスとしての役割を与えている。
## コンストラクタで初期化する
– コンストラクタの名前は、普通の関数と区別するために大文字で始めるのが一般的。
– `this` に対して変数を指定することで、インスタンスの __プロパティ__ を設定できる。
– 値が関数オブジェクトであるプロパティが __メソッド__ と見なされる。
“`javascript
‘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()` はエラーとなる。
“`javascript
‘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 + ‘
‘;
}
document.writeln(mem.getName());
var mem2 = new Member(‘実穂’, ‘田畑’);
document.writeln(mem2.getName());
“`
– 生成されたインスタンスに対してメソッドが追加されている。
– Java のようなクラスベースのオブジェクト指向のように「同一クラスを元に生成されたインスタンスは同一のメンバを持つ」のではなく、JavaScript のようなプロトタイプベースのオブジェクト指向では「 __同一クラスを元に生成されたインスタンスであっても、それぞれがもつメンバは同一であるとは限らない__ 」。
## ES2015 のクラス定義に書き換える
ES2015 のクラス定義を使うと、他の言語のように書ける。
> * [Classes – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)
See the Pen JavaScript ES2015 Defining classes by DriftwoodJP (@DriftwoodJP) on CodePen.
[/markdown]