FM牛鍵屋本舗

プログラマ(弱)の日々精進系ブログ

JavaScriptのprototype

ふとjavascriptのこと考えていて、 「prototypeのこと私ちゃんと説明出来ない…」と冷や汗が出たので ちゃんと調べてみる。

ちょっと記事のレベルが低いので後日書き直します…

調べる前の知識(間違っているかもしれない)

  • javascriptの各オブジェクトが参照できるプロパティ
  • 雛形となるオブジェクトからいくつオブジェクトを作ろうとも
    実態は一つ。なのでメモリの節約になる。
  • メソッド呼び出し時に自身->自身のプロトタイプ->親->親のプロトタイプ…と探しに行く

言語仕様

object that provides shared properties for other objects

共有のプロパティを他のオブジェクトに提供するオブジェクト…

言語仕様もちゃんと読まなきゃですが、 一旦他の資料を参考に…。

JavaScript:Good Parts

EffectiveJavaScript

ECMA5まではclassの概念がない そのため、オブジェクト指向の機構として、 他のオブジェクトを雛形(prototype)として 新しいオブジェクトを生成する。 {}Object.prototypeとリンクしている。

prototypeに関するメソッド

  • prototype
    • newによって作成されるオブジェクトのプロトタイプ
  • getPrototypeOf(obj)
    • objのprototypeを取り出すためのメソッド
  • __proto__
    • objのprototypeを取り出すためのメソッド(非標準)

書いてみた

    var MyObject = function() {};
    MyObject.prototype.echo = function() {
      console.log('hello');
    }

    var childObj1 = new MyObject();
    var childObj2 = new MyObject();
    var childObj3 = new MyObject();
    childObj1.echo(); // hello
    childObj2.echo(); // hello
    childObj3.echo(); // hello

    MyObject.prototype.echo = function() {
      console.log('good evening');
    }

    childObj1.echo(); // good evening
    childObj2.echo(); // good evening
    childObj3.echo(); // good evening

    childObj1.say = function() {
      console.log('Apple!!');
    }

    childObj2.cry = function() {
      console.log('tear');
    }

    var Moge = function(){};
    // prototypeに設定
    Moge.prototype = childObj1;
    var moge = new Moge();

    moge.echo(); // good evening
    moge.say(); // Apple!!
    try {
      moge.cry(); // エラーになる
    } catch (e) {
      console.warn(e);
    }

    var Hoge = function(){};
    Hoge.prototype = {
      age : 32
      , type : 'animal'
      , call : function() { console.log('How are you'); }
    }
    var hoge = new Hoge();
    console.log(hoge.age); //32
    console.log(hoge.type); // animal
    hoge.call(); // How are you