JS学習記録第13回　プロトタイプ継承について

こんにちは！
今回はプロトタイプの継承について書いてみようかと思います！
前回オブジェクトをclassでまとめることについて記述しましたが、
うまくまとまっている気がしなかったので、細かく詳しく記述していきます！今回はプロトタイプについてまとめます！
classとプロトタイプは同じような感じですが、プロトタイプの原理がわかっていないと理解ができないと思うので、学習してみました。

何回も同じ記述をまとめたいとき・・・

JSでは何回も同じような記述を行う場合はnew演算子を用いてひとまとめにすることができます。
例えば、、、

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}

こう言う感じで、オブジェクトに引数のnameとageを入れて作成します。
まとめて使用するのでthisを入れてください。

そして、

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}

const b = new Person('yuta',28);
const c = new Person('yuta2',32);

このように変数に
new（関数名）（引数の値）の順に記述すると、同じ記述なしで値を引き継ぐことができます。
console.logで確認すると、それぞれの変数b,cに値が保持されていることがわかります。何回も同じ記述を書かなくても、このように書くといいんですね。

ちなみにオブジェクト内の関数も上手く機能しているか確認してみます。

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}

const b = new Person('yuta',28);
const c = new Person('yuta2',32);

b.a();    変数bの中のaの関数を実行。
c.a();　　 変数cの中のaの関数を実行。

うまくできました！！！！

new演算子を用いることで、無駄な記述を減らせそうですね！

プロトタイプ継承について

ここからが本題に入っていきます。
まず、プロトタイプとはなんなのか説明します！
プロトタイプとは、オブジェクトに存在する特別なプロパティのことを言います。JSの中には、初めからconsole.logやsetTimeoutなど使えるものが入ってます。そのようなものと同じようなものだと思います。（正しいのかな_:(´ཀ`」 ∠):）
そのプロトタイプを自分で新しく作成できると言うことですね。
例えば、

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}

Person.prototype.hungry = function(){
   console.log(this.name + 'はお腹がすいた！');

}

const b = new Person('yuta',28);
const c = new Person('yuta2',32);

上記のように、
Person.prototype.hungry = function(){
console.log(this.name + 'はお腹がすいた！');
}
のような記述を追加します。
関数Personのプロトタイプの中にhungryという関数を追加する。
みたいな感じです。
そして、関数を実行してみましょう。

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}

Person.prototype.hungry = function(){
   console.log(this.name + 'はお腹がすいた！');

}

const b = new Person('yuta',28);
const c = new Person('yuta2',32);


b.hungry();

出ました！！！
因みに以下でも同じです。

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
   this.hungry = function(){
       console.log(this.name + 'はお腹がすいた！');
   
   }
}


const b = new Person('yuta',28);
const c = new Person('yuta2',32);


b.hungry();

しかし、プロトタイプで記述することで、JSのメモリを節約できるそうです！長い記述になってくると、読み込みスピードにも影響してくるそうなので、プロトタイプで記述する方が書き方はいいそうですね！

そして、このプロトタイプを継承することも可能です。
例えば他の関数に、この関数のデータを使用したい時にプロトタイプ継承が使用できます。

function Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}



function Person2(name,age){
   Person.call(this,name,age);

}
Person2.prototype = Object.create(Person.prototype);

上記は、関数PersonのデータをPerson2という新たな関数にも継承した記述になります。
書き方としましては、
Person2.prototype = Object.create(Person.prototype);
Person2内のプロトタイプにPersonのプロトタイプを継承するという意味になります。このObject.createが肝です！
そしてPerson2の関数内に
Person.call(this,name,age);
Personからcall（呼び出す！）この引数を！
みたいな感じで継承させます！
これで完了です。

unction Person(name,age){
   this.name = name;
   this.age = age;
   this.a = function(){
       console.log('私の名前は' + this.name + 'です。年齢は' + this.age + 'です。' )
   }
}



function Person2(name,age){
   Person.call(this,name,age);

}
Person2.prototype = Object.create(Person.prototype);

const d = new Person2('taro',18);
console.log(d);
d.a();

こちらで呼び出してみます！
新たにdという変数にPerson2の引数を記述してconsole.logとd.a();で正しく実行されているか確認してみます。

正しくデータも継承され、実行結果も正しく表示されていますね！

以上が、プロトタイプと継承でした！
JSのプロトタイプを使いこなすことで、できることが増えそうですね！

次回はclassについてまとめてようと思います！
classはプロトタイプをより簡潔に記述できる方法ですが、どういう仕組みかを理解するにはプロトタイプは知っておくべきだと感じました。