javascriptのprototypeの使い方について

スポンサーリンク
Pocket
LINEで送る

javascriptのプロトタイプチェーンについてです。

 

ES6で”class”が導入されましたがそれまでjavascriptにはクラスがありませんでした。

その代わりに、prototypeがありこれでメソッドを作ることができます。

 

プロトタイプチェーンの使い方

function Person(name, stand){
  this.name = name;
  this.stand = stand;
}
Person.prototype.getStand = function(){
  return this.name + "のスタンドは" + this.stand;
}

var dio = new Person("DIO", "ザ・ワールド");
var buccellati = new Person("ブチャラティ", "スティッキーフィンガーズ");

console.log(dio.getStand()); //DIOのスタンドはザ・ワールド
console.log(buccellati.getStand());  //ブチャラティのスタンドはスティッキーフィンガーズ

 

こんな感じで使います。

 

function Person(name, stand){
  this.name = name;
  this.stand = stand;
  this.getStand = function(){
    return this.name + "のスタンドは" + this.stand;
  }
}

これでも同じ挙動をしますが、この場合、newした時に、新しくgetStandが作られ無駄があります。

newした数だけ同じ関数が生成されてしまうわけです。

 

prototypeには共通のメソッドを作り、親の関数はコンストラクタとして使いましょう。

 

ES6で書く場合

ES6でclassが導入されたのでprototypeは使わず、javaのように書くことができます。

スポンサーリンク
class Person{
  constructor(name, stand){
    this.name = name;
    this.stand = stand;
  }
  getStand(){
    return this.name + "のスタンドは" + this.stand;
  }
}

var dio = new Person("DIO", "ザ・ワールド");
var buccellati = new Person("ブチャラティ", "スティッキーフィンガーズ");

console.log(dio.getStand());
console.log(buccellati.getStand());

 

こんな感じです。こっちの方が書きやすいですね!