#プロトタイプ継承とは
別のコンストラクター関数のプロトタイプを受け継いで、機能を流用
できるようにすること。
また、プロトタイプ継承を用いることでコンストラクター間で機能の受け渡し
ができるようになるため、効率的にプログラムを組むことができる。
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.hello = function() {
console.log('hello' + this.name);
}
function Character(name, age) {
this.name = name,
this.age = age
}
Person.prototype.hello = function() {
console.log('hello' + this.name);
}
これだとコードが冗長となり、変更があったときにコードのメンテナンスがしづらくなってしまう
#継承
別のコンストラクター関数を受け継ぐこと
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.hello = function() {
console.log('hello' + this.name);
}
function Character(name, age) {
}
Character.prototype = Object.create(Person.prototype);
// PersonのprototypeがCharacterのprototypeの中に含まれるプロトタイプになる
[Object.createは第一引数に渡したオブジェクトをプロトタイプに持つ空のオブジェクトを作成する]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
#コンストラクター継承
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.hello = function() {
console.log('hello' + this.name);
}
function Character(name, age) {
Person.call(this, name, age)
}
Character.prototype = Object.create(Person.prototype);
Personのコンストラクター関数の継承をするには、Characterの中でcallメソッド
を呼び出す
Characterの関数コンテキストのthisを渡す、第2引数以下は関数の引数が入る
関数コンテキストのthisがPersonに渡り、thisのnameとageが設定される
###継承したメソッドの上書き
Person.prototype.hello = function() {
console.log('hello' + this.name);
}
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.hello = function() {
console.log('hello' + this.name);
}
function Character(name, age) {
Person.call(this, name, age)
}
Character.prototype = Object.create(Person.prototype);
//PersonからCharacterに変更する
Character.prototype.hello = function() {
console.log('Hi' + this.name);
}
const mickey = new Character('ミッキー', 20);
mickey.hello();
Personプロトタイプより、Characterプロトタイプの優先度が高くなり、'Hiミッキー'と表示されます
CharacterプロトタイプはPersonプロトタイプと独立しているので、Characterプロトタイプだけにメソッドを追加することもできます。