2015-10-18

javascript: javascript とは

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 + ' 才です。');
}

オブジェクト
明確な役割や責任を持つ、独立した小さな機械であると見なせます。〔1〕
ひとつのテーマを持ったプロパティ(データ、状態)とメソッド(処理、振る舞い)の集まり〔2〕

例:オブジェクト指向プログラミング

// オブジェクトを定義する
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〕
メモリを確保した状態を指す〔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 「再」入門

以上