JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptにおける継承の基本を具体例で解説

JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。

プロトタイプによる継承の仕組み

JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各インスタンスが個別にメソッドを持つことなく、共通の機能を受け継ぐことができるのです。

サンプルコード

以下は、コンストラクタ関数Personとprototypeを使って継承を実装する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptの継承</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        color: blueviolet;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Inheritance</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、person1 と person2 オブジェクトが継承した welcome メソッドが呼び出されます
</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    function Person(name, age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    Person.prototype.welcome = function () {
        resEle.innerHTML +=
        " Welcome "+this.name+" age: "+this.age +" city: "+this.city+"<br>";
    };
    BtnEle.addEventListener("click", () => {
        let person1 = new Person("Rohan", 22, "Delhi");
        person1.welcome();
        let person2 = new Person("Shawn", 19, "England");
        person2.welcome();
    });
</script>
</body>
</html>

コードのポイント

  • コンストラクタ関数 Person：this.name、this.age、this.city のように、インスタンスごとのデータを設定します。
  • Person.prototype.welcome：welcome メソッドをプロトタイプに定義することで、Person から生成された全インスタンスが同じメソッドを共有できます。メモリ効率の面でも有利です。
  • new 演算子：new Person(...) によって新しいインスタンスが生成され、プロトタイプへの参照が自動的に結び付けられます。

実行結果

JavaScriptにおける継承の基本を具体例で解説

「CLICK HERE」ボタンをクリックすると −

JavaScriptにおける継承の基本を具体例で解説

ボタンを押すたびに、person1（Rohan）と person2（Shawn）それぞれの名前・年齢・都市が表示され、両者ともプロトタイプ経由で welcome メソッドを呼び出せていることが確認できます。

補足：ES6のclass構文について

ES2015（ES6）以降では、class 構文や extends キーワードを使うことで、より直感的に継承を記述できるようになりました。ただし、これらは糖衣構文（シンタックスシュガー）であり、内部的には従来どおりプロトタイプチェーンに基づいて動作しています。プロトタイプの仕組みを理解しておくことは、JavaScriptの継承を深く把握するために欠かせません。

  1. 【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説

    非同期関数（async function）とはJavaScriptの非同期関数は、asyncキーワードを付けて定義する特別な関数です。ES2017（ES8）で標準仕様に組み込まれ、従来のコールバック関数よりも簡潔で読みやすい形でPromiseを扱えるようにするために導入されました。async関数の内部ではawaitキーワードを使用できます。awaitを付けた箇所では処理の流れが一時停止し、対象のPromiseが完了（resolveまたはreject）するまで待機します。この仕組みにより、非同期処理をあたかも同期処理のような直感的なコードとして書ける点が最大のメリットです。押さえておきたいポイン

  2. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj