【JavaScript】関数とオブジェクト⑮ プロトタイプ継承

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.プロトタイプ継承

プロトタイプ継承とは別のコンストラクター関数のプロトタイプを引き継いで機能を使えるようにすること

そもそも継承とは、別のコンストラクターを受け継ぐこと。

###例1

下記のコードを継承してJapaneseという関数を作成する

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.hello = function() {
  console.log('hello ' + this.name);
}

// 上記のコードをコピーし、Personの部分をJapaneseに変更
function Japanese(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.hello = function() {
  console.log('hello ' + this.name);
}
```
このままだと重複するコード量が増えて大変だし、メンテナンス等にもコストがかかる

```js
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.hello = function() {
  console.log('hello ' + this.name);
}

// Japanese関数を用意
// Personのプロトタイプを継承したい
function Japanese(name,age){
    // Person関数で使ってるthisをcallメソッドで呼び出す
    // 引数内のthisはJapaneseの関数コンテキスト内のthis
    Person.call(this, name, age);
}
// createでJapaneseのプロトタイプにPersonのプロトタイプを格納する
Japanese.prototype = Object.create(Person.prototype)
// インスタンス化して実行
const taro = new Japanese("太郎", 23);
// Japanese {name: '太郎', age: 23}
console.log(taro);
// Personのhelloメソッドをtaroから呼んでみると
// hello " 太郎"と出力
taro.hello();
```

####例2

継承してきたPersonは上書き可能

````js
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.hello = function() {
  console.log('hello ' + this.name);
}
function Japanese(name,age){
    Person.call(this, name, age);
}
Japanese.prototype = Object.create(Person.prototype)
// 上記のPersonをコピーして持ってきて
// Japaneseのプロトタイプのhelloメソッドとして変更
Japanese.prototype.hello = function() {
  console.log('こんにちは ' + this.name);
}

// PersonとJapaneseはそれぞれ独立して存在しているので、メソッド変更して使いまわしが可能
Japanese.prototype.bye = function() {
  console.log('じゃあな ' + this.name);
}

const taro = new Japanese("太郎", 23);
console.log(taro);
  // 上書きされたので出力結果は"こんにちは　太郎"になる
taro.hello();
// byeメソッドを使用して,”じゃあな　太郎”とすることができる
taro.bye();
````

####例3

継承先でさらにプロパティを追加することも可能

```js
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 引数にgender追加
function Japanese(name,age, gender){
    Person.call(this, name, age);
    // ここで更に性別を表すプロパティを追加
    this.gender = gender;
}
Japanese.prototype = Object.create(Person.prototype)


Japanese.prototype.hello = function() {
  console.log('こんにちは ' + this.name);
  // 出力結果を追加
  console.log('性別は ' + this.gender + "です!");
}

const taro = new Japanese("太郎", 23, "男");
// helloメソッドを使用したときに性別は〜〜〜の内容も出力される
taro.hello();
```

今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)