JavaScriptのprototypeとは？

TOP
コラム
JavaScriptのprototy

JavaScriptのprototypeとは？

JavaScriptにはprototypeと呼ばれるものがあります。
この記事ではJavaScriptのprototypeについて説明します。

prototype

JavaScriptの全てのオブジェクトには隠しプロパティであるprototypeと（プロトタイプ）と呼ばれるものがあります。

また、JavaScriptの全てのオブジェクトがprototypeをベースに作られています。これはprototypeと呼ばれるものをコピーして新しいオブジェクトを作成するイメージです。

prototypeはオブジェクト同士の繋がりを保持する機能があるため、継承も簡単に行うことができます。

prototypeを使用したメソッドの使用方法

prototypeを使用したメソッドの使用方法について説明します。

prototypeの基本構文は以下のようなコードとなります。

オブジェクト.prototype.メソッド名= function() { }

実際のサンプルコード

let Sample = function(name, id) {
    this.name = name;
    this.id = id;
}
 
Sample.prototype.getName = function() {
    return this.name;
}
Sample.prototype.setName = function(name) {
    this.name = name;
}
Sample.prototype.getage = function() {
    return this.id;
}
Sample.prototype.setage = function(id) {
    this.id = id;
}
let yamada = new Sample();
yamada.setName("山田");
console.log(yamada.getName());

実行結果

山田

prototypeを使用したメソッドと使用していないメソッドの違い

プロトタイプを使用すると、インスタンス化したときにメソッドは参照して利用されます。そのためコピーは作られません。

メソッドは基本的にどのインスタンス先でも内容は同じなため、一緒にコピーするのは無駄になります。これはたくさんのメソッド持つオブジェクトで大量のインスタンスを生成するとメモリが圧迫され、また、大量のメソッドがある時、コピーしてしまうため、インスタンス化する度にメモリが圧迫されてしまいます。

つまりprototypeを使用すると、メソッドは参照して使用されるため、メモリが圧迫されることがなくなります。

プロトタイプに定義するメソッドをオブジェクト形式で記述し使用する方法

メソッドの定義が増えて管理が難しくなったり、オブジェクト名を変更することになった場合メソッド定義に影響したりと管理が大変になる場合があります。

プロトタイプに定義するメソッドをオブジェクト形式で記述することで、メソッド定義を１つにまとめることができ、オブジェクト名の変更も簡単にすることができます。

実際のサンプルコード

let Sample = function(name, id) {
    this.name = name;
    this.id = id;
}
 
Sample.prototype= {
    getName : function(){
    return this.name;
 },
    setName : function(name) {
    this.name = name;
 },
    getage : function() {
    return this.id;
 },
    setage : function(age) {
    this.age = age;
 }
}
let yamada = new Sample();
yamada.setName("山田");
console.log(yamada.getName());

実行結果

山田

prototypeを使用したメソッドの使用方法のサンプルコードのメソッドをオブジェクト形式で記述しました。メソッドも動作しており問題なく同じ実行結果がJavaScriptのコンソール上で表示されます。

プロトタイプチェーン

JavaScriptにはプロトタイプチェーンと呼ばれるものがあります。
プロトタイプチェーンとはプロトタイプをチェーンのように連結してお互いを参照出来る仕組みのことをいいます。

実際のサンプルコード

let Sample = function(){};
let Sample1 = function(){};
let Sample2 = function(){};

Sample1.prototype = new Sample();
Sample2.protptype = new Sample1();

このコードは最初に中身のないのオブジェクトを3つ生成しています。
次にSample1のプロトタイプにSampleオブジェクトを追加し、Sample1とSampleのプロトタイプをそれぞれ参照出来る状態にしています。
その後。Sample2とSample1のプロトタイプを連結しています。これにより、Sample2とSampleも同じように参照関係になっています。

これによりSampleの機能をSample2で使用することが可能となります。

JavaScriptのprototypeを使用した継承

JavaScriptの継承はプロトタイプチェーンの仕組みそのものです。

実際のサンプルコード

let Sample1 = function(){};
let Sample2 = function(){};

Sample1.prototype.func = function() {
    return 'サンプル';
}
Sample2.prototype = new Sample1();

let result1 = new Sample1();
let result2 = new Sample2();

console.log(result1.func());
console.log(result2.func());

実行結果

サンプル
サンプル

このコードではSample2.prototype = new Sample1();でSample1とSample2を連結しています。

連結しているためSample1のfuncメソッドをSample2でも使用できるようになります。そのためJavaScriptのコンソール上で実行結果が表示されます。

まとめ

JavaScriptのprototype(プロトタイプ)について説明しました。
プロトタイプを使用することでメモリの最適化ができます。