2015-10-18

javascript： javascript とは

javascript

javascript は、プロトタイプベースのオブジェクト指向プログラミングである。
オブジェクト指向プログラミング：　協調して動作するオブジェクトの集まりと考えるプログラミング
プロトタイプベース：　オブジェクトのひな形のデータや処理を自由に追加・変更できる


オブジェクト指向プログラミング
ソフトウェアを関数の集まりや単なるコマンドのリスト（これまでの伝統的な見方）としてではなく、協調して動作するオブジェクトの集まりであると考える。〔1〕

オブジェクト指向の利点〔2〕
各オブジェクトが自立しているので、メインの処理の負担が減る。メインの処理が複雑にならない。

オブジェクト指向のポイント[2] 
・オブジェクトが、自身のすべき処理（責任）に集中している(凝集度が高い）
・オブジェクト同士の結びつきが低い（結合度が低い）
・継承を使うべきかどうかを判断するときは実装ではなく、（抽象度の高い）概念や仕様に着目します。同じ概念を持つクラスをまとめるために継承を使用する。

例：従来のプログラミング（コマンドのリスト）
  1. var suzukiName = "鈴木";
  2. var suzukiAge = 15;
  3. var yamadaName = "山田";
  4. var yamadaAge = 14;
  5.  
  6. greet( suzukiName, suzukiAge );
  7. greet( yamadaName, yamadaAge );
  8.  
  9. function greet( name, age ) {
  10.           alert('Hello, 私は ' + name + ' です。' + age + ' 才です。');
  11. }

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

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

  1. // オブジェクトを定義する
  2. var suzuki = {           // オブジェクト
  3.      name:  "鈴木",      // プロパティ
  4.      age:  15,           // プロパティ
  5.      greet: function() { // メソッド
  6.           alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
  7.   }
  8. }
  9. var yamada = {           // オブジェクト
  10.      name:  "山田",      // プロパティ
  11.      age:  14,           // プロパティ
  12.      greet: function() { // メソッド
  13.           alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
  14.   }
  15. }
  16.  
  17. // メインの処理
  18. suzuki.greet();
  19. yamada.greet();


 コンストラクタ
オブジェクトのひな形。
（最初は大文字）new演算子で呼び出してインスタンスを作成する[3]。

 インスタンス
具体的なデータを持つ個々のオブジェクト[3]。
new 演算子を用いてコンストラクタ（ひな形）に基づき作成される実体〔2〕。
メモリを確保した状態を指す〔2〕。

例：コンストラクタを使う
  1. // コンストラクタを定義する
  2. var Person = function(personName, personAge) {
  3.  this.name = personName;
  4.  this.age = personAge;
  5.  this.greet = function() {
  6.      alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
  7.  }
  8. }
  9.  
  10. // オブジェクトを定義する（インスタンスを生成する）
  11. var suzuki = new Person( "鈴木", 15 );
  12. var yamada = new Person( "山田", 14 );
  13.  
  14. // メインの処理
  15. suzuki.greet();
  16. yamada.greet();

 プロトタイプベースプログラミング[3]
既存のプロトタイプオブジェクトを拡張して、そのオブジェクトの持つ挙動を再利用する（継承）ことで実現されるオブジェクト指向プログラミング。
プロトタイプベース：自由にメソッドを変更・追加したり、プロパティも追加したりできる。
クラスベース：クラスがプロパティ・メソッドを全て決定してしまい、それ以外のプロパティやメソッドは持てない。
javascriptはプロトタイプベース。

プロトタイプ
コンストラクタのプロパティやメソッド（関数）を共通化する手段。無駄を省くことができる。
コンストラクタのプロパティの一つで、関数ができたとき自動的に生成される[4]。

例：プロトタイプを使う
  1. // コンストラクタを定義する。
  2. var Person = function(personName, personAge) {
  3.  this.name = personName;
  4.  this.age = personAge;
  5. }
  6.  
  7. // プロトタイプを定義する。
  8. Person.prototype.greet = function() {
  9.  alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
  10. }
  11.  
  12. // オブジェクトを定義する
  13. var suzuki = new Person( "鈴木", 15 );
  14. var yamada = new Person( "山田", 14 );
  15.  
  16. // メインの処理
  17. suzuki.greet();
  18. yamada.greet();


継承
あるオブジェクトの特徴をもったままで、さらに拡張したオブジェクト（の型）をつくるということ[5]
似たようなオブジェクトをまとめられる〔2〕。
プロパティの継承：　apply メソッドを呼び出す
メソッドの継承：　prototype オブジェクトを使用する。

例：
  1. // もとのコンストラクタを定義する
  2. var Person = function(personName, personAge) {
  3.  this.name = personName;
  4.  this.age = personAge;
  5. }
  6.  
  7. // プロトタイプを定義する。
  8. Person.prototype.greet = function() {
  9.  alert('Hello, 私は ' + this.name + ' です。' + this.age + ' 才です。');
  10. }
  11.  
  12. // 拡張したコンストラクタを定義する
  13. var Student = function(personName, personAge, personGrade) {
  14.  this.grade = personGrade;
  15. // プロパティの継承
  16.  Person.apply(this, [personName, personAge]);
  17. }
  18.  
  19. // メソッドの継承
  20. Student.prototype = Object.create(Person.prototype);
  21. Student.prototype.constructor = Student;
  22. //Student.prototype = new Person(); // 上２行の代わりにこの行が使われている場合もある。
  23. // https://gist.github.com/yoshimuraYuu/3301790
  24.  
  25.  
  26. // オブジェクトを定義する
  27. var suzuki_s = new Student( "鈴木", 15, 3 );
  28. var yamada_s = new Student( "山田", 14, 2 );
  29.  
  30. // メインの処理
  31. suzuki_s.greet();
  32. 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 「再」入門

以上
投稿者 時刻: