クラス -> つかみ

Posted by muchag | JavaScript |
初回投稿:2011-10-27 (木) 16:57:36 | 最終更新:2015-02-27 (金) 23:56:40

JavaScript でのクラスは、Java やらなんやらのクラスとはちょいと違うらしい。

キーワードは prototype
prototype っていわれたら、ライブラリしか思いつかなかった私は
最初意味不明だった。

で、グーグル先生に教えてもらったことをまとめてみる。

相変わらずちゃんと理解してないので間違いは多いと思われ・・・。
でも、こうやってまとめることで理解を深めるしかないのよね。

クラスベースとプロトタイプベース

まぁ、何でも最初は用語を覚えないといけないんだけど
今回もこういう定義があるらしいので、そっからスタート。

Java なんかのオブジェクト指向は「クラスベース
JavaScript は「プロトタイプベース」なんだそうな。

  • クラスベース クラスのインスタンスがオブジェクト
  • プロトタイプベース オブジェクトを元(プロトタイプ)にしたオブジェクト

 

記法
生成
  1. var Animal = function() {};

クラス名の先頭は大文字。

他人のソースを見て、この記述を初めて見たときビックリした。
変数に無名関数を代入?

でも、こういう意味だったのねぇ。
 

インスタンス化
  1. var anim = new Animal();

変数名の先頭は小文字。
 

コンストラクタ

生成時にコンストラクタによってメンバ変数とメソッドを定義できる。

  1. var Animal = function(name, sex) {
  2.  
  3.     this.name = name;
  4.     this.sex = sex;
  5.  
  6.     this.toString = function() {
  7.         window.alert(this.name + " " + this.sex);
  8.     };
  9. }
  10. var anim = new Animal("トクジロウ", "オス");
  11. anim.toString(); // 「トクジロウ オス」

 

動的に追加
  1. var Animal = function(name, sex) {
  2.     this.name = name;
  3.     this.sex = sex;
  4. }
  5. var anim = new Animal("トクジロウ", "オス");
  6. anim.toString = function() {
  7.     window.alert(this.name + " " + this.sex);
  8. };
  9. anim.toString(); // 「トクジロウ オス」

以上のように動的に追加することも可能だが
この場合は、インスタンス anim 固有のメソッドとなる。

つまり、新たにインスタンス化したオブジェクトには反映されない。
 

プロトタイプ・オブジェクト

今までのは基本だけど、上述のような記述だと
インスタンス化する度に全てメモリに領域確保をするので
以下のような記法が推奨らしい。

  1. var Animal = function(name, sex) {
  2.     this.name = name;
  3.     this.sex = sex;
  4. }
  5.  
  6. Animal.prototype.toString = function() {
  7.     window.alert(this.name + " " + this.sex);
  8. };
  9.  
  10. var anim = new Animal("トクジロウ", "オス");
  11. anim.toString(); // 「トクジロウ オス」

もちろんメンバ変数も定義可能。

プロトタイプ・オブジェクト を利用することで
そのメソッドを利用するときだけ読み込みに行くのでメモリを節約できるみたい。
 

リアルタイム認識

その他のメリットとして、インスタンス生成後にメソッドを追加しても有効らしい。

  1. var Animal = function() {};
  2. Animal.prototype.name = "サチ";
  3. var anim = new Animal();
  4.  
  5. Animal.prototype.sex = "メス"; // インスタンスの生成後にメンバを追加
  6.  
  7. window.alert(anim.sex); // 「メス」

 

保持内容は個別
  1. var Animal = function() {};
  2.  
  3. Animal.prototype.name = "サチ";
  4. var a1 = new Animal();
  5. var a2 = new Animal();
  6.  
  7. window.alert(a1.name + "|" + a2.name); // 「サチ|サチ」
  8.  
  9. a1.name = "トクジロウ";
  10. window.alert(a1.name + "|" + a2.name); // 「トクジロウ|サチ」

 
a1 は書き換えられた値。
a2 はデフォルトの値。
 

hasOwnProperty

こうなると、格納先が2箇所で区別しないといけなくなるので
hasOwnProperty というメソッドが存在する。

  1. function Constructor() {}
  2. Constructor.prototype.prop1 = 30;
  3.  
  4. var objA = new Constructor();
  5.  
  6. // objA 自体は持っていないので false。
  7. alert(objA.hasOwnProperty("prop1"));
  8.  
  9. objA.prop1 = 100;
  10.  
  11. // objA 自体が持っているので true。
  12. alert(objA.hasOwnProperty("prop1"));

 

オブジェクト・リテラル定義

プロパティ・オブジェクトを利用するに当たって

  1. Animal.prototype.name = "サチ";

という記述を繰り返すと

  • 可読性の下落
  • 変更が煩雑

という問題が起こるので

  1. var Animal = function(name, sex){
  2.     this.name = name;
  3.     this.sex = sex;
  4. }
  5.  
  6. Animal.prototype = {
  7.     getVoice : function() {
  8.     window.alert(this.name + "「チュウ!」");
  9.     },
  10.     toString : function() {
  11.         window.alert(this.name + " " + this.sex);
  12.     }
  13. };
  14.  
  15. var anim = new Animal("トクジロウ", "オス");
  16. anim.toString(); // 「トクジロウ  オス」

このように記述することができるようだ。

VB でいうところの With 文だと思えばいいや。
 

引用&参考元サイト

CodeZine:プロトタイプ(prototype)によるJavaScriptのオブジェクト指向
@IT:Ajax時代のJavaScriptプログラミング再入門 第4回 JavaScriptでオブジェクト指向プログラミング

Posted by muchag | JavaScript |
初回投稿:2011-10-27 (木) 16:57:36 | 最終更新:2015-02-27 (金) 23:56:40

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment