1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

プロトタイプ継承についてアウトプット

Last updated at Posted at 2021-08-24

#プロトタイプ継承とは
別のコンストラクター関数のプロトタイプを受け継いで、機能を流用できるようにすること。
また、プロトタイプ継承を用いることでコンストラクター間で機能の受け渡しができるようになるため、効率的にプログラムを組むことができる。

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プロトタイプだけにメソッドを追加することもできます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?