JavaScriptのprototypeで勘違いしたこと

prototype で勘違いしたこと

JavaScript で以下の二つが同じだと勘違いしてはまったこと。

– Hoge.painter.paint
– Hoge.prototype.paint

コードは以下。(コード自体に特に意味はありません)

//コンストラクタ関数
var Hoge = function(painter){
                if (painter !== undefined)   this.painter = painter;
}

//プロトタイプに paint 関数を追加
Hoge.prototype.paint = function(context){
    console.log('START prototype paint');
    this.painter.paint(this, context);
}

//インスタンス化
var myo = new Hoge({
    paint:function(arg1, arg2){
    }
});

myo.paint('my_context'); //"START prototype paint"が出力される

このコードをみて以下のように勘違いしました。

  • paint は Hoge のプロトタイプ
  • なので、Hoge のインスタンスが paint をもっていないとき、prototype の paint が実行される
  • でも、この例では new でインスタンス化されたオブジェクトは、paint をもつ <<< これが勘違い
  • なので、prototype の paint は実行されない

コードを実行して確かめる

実際にコードを実行すると、Hoge.prototype.paint が実行されていることが分かりました。
(“START prototype paint”が出力される)
ここで、想定した動きではないので、2時間ほどうなってました。思い込みって怖いです。

デバッグをいれることは重要!

console.log() をいれることで、Hoge.prototype.paint から Hoge.painter.paint に処理が移っていることがわかり、解決しました。
やっぱりデバッグをいれるのは大切です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です