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 「再」入門
以上