【罪と罰 その7】prototypeのお作法

目覚ましをベッドから手の届かない場所に移動させたKameです。
罪と罰シリーズラストです。
ラストもSassの話題で行きたかったですが、さすがにネタが枯渇しましたのでJavaScriptで困ったことがあったのでそれを。

あまり理解せずにprototypeを利用していたので、何が悪いのかわからずにあたふたしてしまいました。

あれ？prototypeを継承しない…

最近JavaScriptで何か作るときに一応prototypeを使って色々書いているのですが、
下記のようなパターンだとうまく継承してくれなくてだいぶ悩みました。

var hogehoge = function(){
	console.log(this.hugahuga);  // undefined
};

hogehoge.prototype.hugahuga = 'Hello World';

hogehoge();

hogehogeの関数はprototypeでhugahugaというメソッドを継承しているので、
自身のconsoleで「Hello World」が返ってくるの期待していたのですが、なぜか「undefined」…。

いつもこんな感じで書いてたのにどうして！
正直prototypeの文字とかが間違ってるのかなと思いめちゃめちゃコピペしたりしました。

その後どういうオブジェクトになってるのかなと思って、下のように書きました。

var hogehoge = function(){
	console.log(this.hugahuga);  // undefined
	console.log(this);  // Window
};

hogehoge.prototype.hugahuga = 'Hello World';

hogehoge();

え！？Window？どうしたthis！？hogehogeオブジェクトじゃないの？
という具合にだいぶ混乱しました。

もう全然わからなかったので、過去に継承がうまくいっていたスクリプトを引っ張り出してきて、
中身を確認してみました。

new演算子

うまくいってたスクリプトを見てみますと意外なところに違いがありました。
まさか最後の行に間違いがあるとは気づきませんでした。
ちゃんと理解されている人からすると当然なんでしょうが、僕としては意外でした…。

var hogehoge = function(){
	console.log(this.hugahuga);  // Hello World
	console.log(this);  // Object[]
};

hogehoge.prototype.hugahuga = 'Hello World';

new hogehoge();

このnew！もうなんで付けるんやろうぐらいに思っていたnewが非常に重要なものでした！！
new演算子のことを何も知らなかったので調べるとprototype使うときには何よりも重要くらいのものでした。

newは既存のオブジェクト (プロトタイプ) をベースに、新しいオブジェクトを生成するための演算子。
newの本質はprototypeを受け継いだ新しいオブジェクトを作ること。

これ以上ないくらいスカッとする答えですね。つまり

• newをつけないとprototype継承してくれない。
• newをつけないとそもそもObjectでもない。
• newの無いhobehoge()なんかただのグローバルなメソッド。

ということですね。

ちゃんと理解して使おう

今までおまじない程度に書いていたnewにこんな重要な役割があったとは。
やはり意味のない記述など無いわけですから、おまじないとか勝手に決めつけずに分からなかったら調べて理解してから使いましょうということで…。

それにしても今回は初歩的な所でつまづききすぎました。

そんなわけでシリーズ終了！！！！！！！