javascript
javascript は、プロトタイプベースのオブジェクト指向プログラミングである。
オブジェクト指向プログラミング: 協調して動作するオブジェクトの集まりと考えるプログラミング
プロトタイプベース: オブジェクトのひな形のデータや処理を自由に追加・変更できる
オブジェクト指向プログラミング
ソフトウェアを関数の集まりや単なるコマンドのリスト(これまでの伝統的な見方)としてではなく、協調して動作するオブジェクトの集まりであると考える。〔1〕
オブジェクト指向の利点〔2〕
各オブジェクトが自立しているので、メインの処理の負担が減る。メインの処理が複雑にならない。
オブジェクト指向のポイント[2]
・オブジェクトが、自身のすべき処理(責任)に集中している(凝集度が高い)
・オブジェクト同士の結びつきが低い(結合度が低い)
・継承を使うべきかどうかを判断するときは実装ではなく、(抽象度の高い)概念や仕様に着目します。同じ概念を持つクラスをまとめるために継承を使用する。
例:従来のプログラミング(コマンドのリスト)
var suzukiName = "鈴木";
var suzukiAge = 15;
var yamadaName = "山田";
var yamadaAge = 14;
greet( suzukiName, suzukiAge );
greet( yamadaName, yamadaAge );
function greet( name, age ) {
alert('Hello, 私は ' + name + ' です。' + age + ' 才です。');
}
オブジェクト
例:オブジェクト指向プログラミング
// オブジェクトを定義する
var suzuki = { // オブジェクト
name: "鈴木", // プロパティ
age: 15, // プロパティ
greet: function() { // メソッド
alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
}
}
var yamada = { // オブジェクト
name: "山田", // プロパティ
age: 14, // プロパティ
greet: function() { // メソッド
alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
}
}
// メインの処理
suzuki.greet();
yamada.greet();
コンストラクタ
オブジェクトのひな形。
(最初は大文字)new演算子で呼び出してインスタンスを作成する[3]。
インスタンス
具体的なデータを持つ個々のオブジェクト[3]。
new 演算子を用いてコンストラクタ(ひな形)に基づき作成される実体〔2〕。
例:コンストラクタを使う
// コンストラクタを定義する
var Person = function(personName, personAge) {
this.name = personName;
this.age = personAge;
this.greet = function() {
alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
}
}
// オブジェクトを定義する(インスタンスを生成する)
var suzuki = new Person( "鈴木", 15 );
var yamada = new Person( "山田", 14 );
// メインの処理
suzuki.greet();
yamada.greet();プロトタイプベースプログラミング[3]
既存のプロトタイプオブジェクトを拡張して、そのオブジェクトの持つ挙動を再利用する(継承)ことで実現されるオブジェクト指向プログラミング。
プロトタイプベース:自由にメソッドを変更・追加したり、プロパティも追加したりできる。
クラスベース:クラスがプロパティ・メソッドを全て決定してしまい、それ以外のプロパティやメソッドは持てない。
javascriptはプロトタイプベース。
プロトタイプ
コンストラクタのプロパティやメソッド(関数)を共通化する手段。無駄を省くことができる。
コンストラクタのプロパティの一つで、関数ができたとき自動的に生成される[4]。
例:プロトタイプを使う
// コンストラクタを定義する。
var Person = function(personName, personAge) {
this.name = personName;
this.age = personAge;
}
// プロトタイプを定義する。
Person.prototype.greet = function() {
alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
}
// オブジェクトを定義する
var suzuki = new Person( "鈴木", 15 );
var yamada = new Person( "山田", 14 );
// メインの処理
suzuki.greet();
yamada.greet();継承
あるオブジェクトの特徴をもったままで、さらに拡張したオブジェクト(の型)をつくるということ[5]
似たようなオブジェクトをまとめられる〔2〕。
プロパティの継承: apply メソッドを呼び出す
メソッドの継承: prototype オブジェクトを使用する。
例:
// もとのコンストラクタを定義する
var Person = function(personName, personAge) {
this.name = personName;
this.age = personAge;
}
// プロトタイプを定義する。
Person.prototype.greet = function() {
alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
}
// 拡張したコンストラクタを定義する
var Student = function(personName, personAge, personGrade) {
this.grade = personGrade;
// プロパティの継承
Person.apply(this, [personName, personAge]);
}
// メソッドの継承
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
//Student.prototype = new Person(); // 上2行の代わりにこの行が使われている場合もある。
// https://gist.github.com/yoshimuraYuu/3301790
// オブジェクトを定義する
var suzuki_s = new Student( "鈴木", 15, 3 );
var yamada_s = new Student( "山田", 14, 2 );
// メインの処理
suzuki_s.greet();
yamada_s.greet();参考サイト:
[1] https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript[2] http://tdak.hateblo.jp/entry/20140406/1396773476
[3] http://uhyohyo.net/javascript/9_4.html
[4] http://uhyohyo.net/javascript/9_2.html
[5] JavaScript 「再」入門
以上