2019-05-09

JavaScriptのprototypeプロパティとは？処理の再利用と拡張でメモリ効率を高める

javascriptに関する記事

javascriptにはprototype(プロトタイプ)というプロパティが用意されています。このprototypeプロパティを使うことで、同様の処理を再利用したり、メソッドを追加して拡張することが可能です。

//①コンストラクタの定義
function Cat(name) {
  this.name = name;
}
 
//②メソッドの追加
Cat.prototype.greet = function() {
  console.log("Hello " + this.name);
}
 
//③インスタンスの作成
var tama = new Cat("Tama");
 
//④メソッドを使用
tama.greet(); // Hello Tama

コンストラクタを定義し(①)、prototypeプロパティを使い、Catにgreetメソッドを追加します(②)。greetメソッドを使用するには、new演算子でインスタンス(オブジェクト)を作成します(③)。使用する場合はインスタンスとメソッドをドットで繋ぎます。

プロトタイプを使いメモリを節約

プロトタイプを使うことでメモリの浪費を防ぐことができます。プロトタイプを使用した場合と使用しない場合を比較してみましょう。まずは使用しない場合。

function Cat(name) {
  this.name = name;
  this.greet = function () {
  console.log("My name is " + this.name);
  };
};
 
var tama = new Cat("Tama");
tama.greet(); // My name is Tama
var mike = new Cat("Mike");
mike.greet(); // My name is Mike

先ほどのコードと異なり、コンストラクタ内でgreetメソッドを定義していますね。このようなコードは、インスタンスを作成する度に、オブジェクトのためにメモリを確保する必要があるので好ましくありません。
greetメソッドはどのインスタンスにおいても同じ振る舞いをするにも関わらず、Catから作成されたインスタンスの数だけメモリを確保する必要があります。

function Cat(name) {
  this.name = name;
};
 
Cat.prototype.greet = function () {
  console.log("My name is " + this.name);
};
 
var tama = new Cat("Tama");
tama.greet(); // My name is Tama
var mike = new Cat("Mike");
mike.greet(); // My name is Mike

このインスタンスでコピーされるのはコンストラクタ部分のみです。greetメソッドはコピーされず、Cat.prototype.greetを「参照」します。

スポンサーリンク

まとめ

生成するインスタンスが少なければ問題内ですが、多くのインスタンスを生成するプログラムなどでは差が出てくるでしょう。