読者です 読者をやめる 読者になる 読者になる

器用貧乏です。はげたかです。日記です。

どうも、はげたかです。今まで器用貧乏に生きてきました。ジェネラリスト・フルスタックエンジニアを目指しています。

今日の一言:カテゴリ分けをしっかりしたらPVあがるかな?

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 第6版

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

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

広告を非表示にする