2022年1月22日 JavaScript (JS Primer) プロトタイプ継承

子クラスのインスタンスから親クラスのプロトタイプメソッドを呼び出す例を学習しました。

プロトタイプ継承

Parentクラスではmethodを定義しているため、これを継承しているChildクラスのインスタンスからも呼び出せます。

class Parent {
    method() {
        console.log("Parent#method");
    }
}
// `Parent`を継承した`Child`を定義
class Child extends Parent {
    // methodの定義はない
}
const instance = new Child();
instance.method(); // "Parent#method"

このように、子クラスのインスタンスから親クラスのプロトタイプメソッドもプロトタイプチェーンの仕組みによって呼び出せます。

extendsによって継承した場合、子クラスのプロトタイプオブジェクトのPrototype内部プロパティには親クラスのプロトタイプオブジェクトが設定されます。このコードでは、Child.prototypeオブジェクトのPrototype内部プロパティにはParent.prototypeが設定されます。

プロパティを参照する場合のオブジェクトを探索する順番

１、instanceオブジェクト自身

２、Child.prototype（instanceオブジェクトのPrototypeの参照先）

３、Parent.prototype（Child.prototypeオブジェクトのPrototypeの参照先）

このプロトタイプチェーンの仕組みにより、methodプロパティはParent.prototypeオブジェクトに定義されたものを参照します。

このようにJavaScriptではclass構文とextendsキーワードを使うことでクラスの機能を継承できます。 class構文ではプロトタイプオブジェクトを参照する仕組みによって継承が行われています。そのため、この継承の仕組みをプロトタイプ継承と呼びます。

親クラスを継承した子クラスのインスタンスを出力してみました。

以下のコードを出力してみます。

class Parent {
    methood() {
        console.log("Parent#method");
    }
}
class Child extends Parent {
}
const instance = new Child();
instance.methood(); // "Parent#method"
console.log(instance);

説明を読んだ上でインスタンスの中身を見てみると改めて勉強になりました。

参考

JS primer プロトタイプ継承

６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。