Javascript prototype

prototypeとは？

クラスの概念なかったバージョンでその代わりとして使われたもの

prototypeプロパティと言われる

コンストラクタ関数につけることで、インスタンスした際に自動的に関数が入る

// コンストラクタ関数

const Fruit = function(name,price){

　　　　this.name = name ;

　　　　this.price = price ;

}

// プロトタイプ

Fruit.prototype.sayPrice = function( ){

　　　　console.log ( this.name + "の値段は" + this.price + "円です" ) ;

}

const apple = new Fruit ( "りんご" , 100 ) ;

apple.sayPrice( ); 　//　りんごの値段は100円です

プロトタイプのメリット

メモリの削減ができる

コンストラクタ関数にメソッドとして追加することもできるが

インスタンス１つ１つにメソッドが入る

しかしプロトタイプは共有で使われるため、かかれない

// コンストラクタ関数

var Apple = function(name,price){

　　　　this.name = name;

　　　　this.price = price;

}

// プロトタイプ

Apple.prototype.sayPrice = function(){

　　　　console.log(this.name + "の値段は" + this.price + "円です");

}

const apple = new Apple("りんご",100);

var Banana = function(name,price){

　　　　this.name = name;

　　　　this.price = price;

　　　　this.sayPrice = function(){

　　　　　　console.log(this.name + "の値段は" + this.price + "円です");

　　　　}

}

const banana = new Banana('バナナ',120);

console.log(apple);

console.log(banana);

後から書き換えることができる

インスタンスした後にメソッドを変更したい場合

コンストラクタ関数に書くと

インスタンス１つ１つ変更しないといけなくなる

しかし、プロトタイプの場合

変更内容を同じように書き足すことで

全てのインスタンスのメソッドを書き換えることができる

const Fruit = function(name,price){

this.name = name;

this.price = price;

}

Fruit.prototype.sayPrice = function(){

　　　　console.log(this.name + "の値段は" + this.price + "円です");

}

const orage = new Fruit('オレンジ',100);

const grape = new Fruit('ぶどう',120);

console.log(orage.sayPrice()); // オレンジの値段は100円です

console.log(grape.sayPrice()); // ぶどうの値段は120円です

Fruit.prototype.sayPrice = function(){

　　　　console.log("今日のオススメは" + this.name + "で" + this.price + "円です");

}

console.log(orage.sayPrice()); // 今日のオススメはオレンジで100円です

console.log(grape.sayPrice()); // 今日のオススメはぶどうで120円です