プロトタイプ継承
別のコンストラクター関数のプロトタイプを受け継いで、機能を流用できるようにすること。
別のコンストラクター関数を受け継ぐこと→継承
function Person(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 Japanese(name, age){
Person.call(this, name, age);
//Person.callで呼び出し、ここの関数コンテキストのthisがPersonに渡り、this.name,this.ageが設定される
}
Japanese.prototype = Object.create(Person.prototype)
const taro = new Japanese('Taro', 23);
console.log(taro);
taro.hello();
console
Japanese {name: "Taro", age: 23}age: 23name: "Taro"__proto__: Person__proto__: hello: ƒ ()constructor: ƒ Person(name, age)__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
hello Taro
ある関数のプロトタイプを別の関数のプロトタイプチェーンに追加することをプロトタイプ継承と表現する。
このようにちょっとした機能の追加もできる。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.hello = function() {
console.log('hello ' + this.name);
}
function Japanese(name, age, gender){
Person.call(this,name,age)
this.gender = gender;
}
Japanese.prototype = Object.create(Person.prototype);
Japanese.prototype.bro = function(){
console.log('bro'+' your age is ' + this.age);
console.log('yo ' + 'are you ' + this.gender + ' ?');
}
const hayato = new Japanese('Hayato',27, 'male');
hayato.bro();
console
bro your age is 27
yo are you male ?
クラス
javascriptではオブジェクトを効率よく作成する為の方法として、はじめに「設計図」を用意する必要がある。
その設計図がクラスである。
このコンストラクタをクラスに書き換える
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.hello = function() {
console.log('hello ' + this.name);
}
↓
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
hello(){
console.log('hello' + this.name);
}
}
これでクラスが完成したこととなる。
上のコンストラクタ関数、プロトタイプを定義するのと、下のクラスで定義するのは実質同じ意味になる。
このクラスはコンストラクタ関数のシンタックスシュガーということになる。
※シンタックスシュガーとはsyntax(構文、書き方ルール的な)を簡単にしたもの
このPersonクラスをインスタンス化してオブジェクトを生成する。
オブジェクトを生成するには「newクラス名()」と書く。
クラスから生成したオブジェクトはインスタンスと呼ぶ。
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
hello(){
console.log('hello' + this.name);
}
}
const hayato = new Person('hayato', 27);
console.log(hayato);
console
Person {name: “hayato”, age: 27}
基本的にES6からはこのクラス表記で書く。
とはいえ、コンストラクタ関数、プロトタイプの仕組みの理解もjavascriptの裏側を理解する上で必要である。
クラス継承
クラス継承とは、他のクラスのプロパティとメソッドを継承すること。
プロトタイプ継承のクラス版。
もとはこう
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.hello = function() {
console.log('hello ' + this.name);
}
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('Konnichiwa ' + this.name);
}
Japanese.prototype.bye = function() {
console.log('Sayonara ' + this.name);
}
const hayato = new Japanese('hayato', 27, 'Male');
↑が↓こう
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
hello(){
console.log('yoo ' + this.name);
}
}
//クラスの継承にはextends
class Japanese extends Person{
constructor(name, age, gender){
super(name, age);
this.gender = gender;
}
hello() {
console.log('Konnichiwa ' + this.name);
}
bye() {
console.log('Sayonara ' + this.name);
}
}
const hayato = new Japanese('hayato', 27, 'Male');
hayato.hello();
hayato.bye();
console
Konnichiwa hayato
Sayonara hayato
となる。
super
継承元の関数を呼び出すためのキーワード。
下記のように親のメソッドを呼び出せる
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
hello() {
console.log('hello ' + this.name);
}
}
class Japanese extends Person {
constructor(name, age, gender) {
super(name, age);
this.gender = gender;
}
hello() {
super.hello();//Personのhelloメソッドを呼ぶ
console.log('Konnichiwa ' + this.name);
}
bye() {
console.log('Sayonara ' + this.name);
}
}
const hayato = new Japanese('hayato', 27, 'Male');
hayato.hello();
console
hello hayato
Konnichiwa hayato
注意点
superキーワードの前にJapaneseのthisを使ったプロパティを宣言すると、(this.gender = genderがsuperの上に来るなど)エラーになる。
メソッドのときは順番は関係ない。
superはクラスの中で使用されるもの。