JavaScirpt：prototypeの存在意義

はじめに

先日、GCについて調べたところ、JavaScriptのprototypeに関する記事があり、存在意義を知ることができた。今回はそれをまとめてみる。

ちなみにGCとは、ガーベージコレクションのこと。

utage.headwaters.co.jp

1. 具体例

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
}

var john = new Human("John")
john.tell()
// => "My name is john"

var elizabeth = new Human("Elizabeth")
elizabeth.tell()
// => "My name is Elizabeth"

上記のコードは見れば分かるだろう。さてこれからだ！

2. john君は叫びたい

john君が叫びたいらしい、なら叫ばせよう。単純に上位のHumanにshout()を追加すればいいでしょう。

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
  this.shout = function(){
    console.log("YEEEEEEEEAAAAAAAAAAAAHHHHHH");
  };
}

var john = new Human("John");
john.tell();
// => "My name is john"
john.shout();
// => "YEEEEEEEEAAAAAAAAAAAAHHHHHH"

よし、これでよいでしょう。じゃないんです！

3. エリザベスちゃんも叫んじゃう

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
  this.shout = function(){
    console.log("YEEEEEEEEAAAAAAAAAAAAHHHHHH");
  };
}

var elizabeth = new Human("Elizabeth");
elizabeth.tell();
// => "My name is Elizabeth"
elizabeth.shout();
// => "YEEEEEEEEAAAAAAAAAAAAHHHHHH"

叫んじゃった。これだとjohnくんもびっくり。

Elizabethはおしとやかに、johnくんはキチガイに

叫びたいjohnくんはキチガイ。キチガイは1人でいい。そういうときに、prototypeが使えるんです。

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
}

var john = new Human("John");
john.tell();
// => "My name is john"

john.prototype = {
   shout: function(){
   console.log("YEEEEEEEEAAAAAAAAAAAAHHHHHH");
  }
}

john.prototype.shout();
// => "YEEEEEEEEAAAAAAAAAAAAHHHHHH"

エリザベスも叫んじゃうんじゃない？

var elizabeth = new Human("Elizabeth");
elizabeth.prototype.shout()
// => "Uncaught TypeError: Cannot read property 'shout' of undefined.

エラーはいたのでエリザベスは叫べなかった。

現段階ではjohnくんだけが叫ぶことが可能である。これがprototypeだ。

5. prototypeの使いドコロ

このようにだれでも叫べるようにしたら、メモリを浪費してしまう。特定の人（オブジェクト）だけ追加したいってときは、prototypeで追加するようにしよう！

JavaScript 第6版

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質