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

JavaScriptでポリモーフィズムを実装する方法｜プロトタイプ継承とオーバーライドの基本

ポリモーフィズム（多態性）とは

ポリモーフィズムは、オブジェクト指向プログラミング（OOP）の基本原則のひとつです。共通のインターフェースを持ちながら、オブジェクトごとに異なる振る舞いを実現できる設計手法であり、継承の仕組みを活用することで実現します。これにより、同じメソッドを呼び出しても、オブジェクトの種類に応じて異なる処理を実行させることができます。

次の例では、子オブジェクトである「cricket」と「tennis」が、親オブジェクト「game」のselectメソッドをオーバーライドし、それぞれ固有の文字列を返しています。一方、子オブジェクト「football」はselectメソッドをオーバーライドせず、親から継承（共有）したメソッドをそのまま利用するため、親と同じ文字列が出力されます。

コード例

<html>
<body>
<script>
  // 親オブジェクト
  var game = function () {}
  game.prototype.select = function () {
    return "i love games and sports";
  }

  // cricket：selectメソッドをオーバーライドして新しい文字列を返す
  var cricket = function () {}
  cricket.prototype = Object.create(game.prototype);
  cricket.prototype.select = function () {
    return "i love cricket";
  }

  // tennis：selectメソッドをオーバーライドして新しい文字列を返す
  var tennis = function () {}
  tennis.prototype = Object.create(game.prototype);
  tennis.prototype.select = function () {
    return "i love tennis";
  }

  // football：親のselectメソッドをそのまま継承（共有）
  var football = function () {}
  football.prototype = Object.create(game.prototype);

  // 各オブジェクトのselectメソッドを呼び出す
  var games = [new game(), new cricket(), new tennis(), new football()];
  games.forEach(function (g) {
    document.write(g.select());
    document.write("</br>");
  });
</script>
</body>
</html>

実行結果

i love games and sports
i love cricket
i love tennis
i love games and sports

コードのポイント

  • Object.create(game.prototype)：親のプロトタイプを引き継ぎ、プロトタイプチェーンを構築します。これにより、子オブジェクトは親のメソッドを利用できるようになります。
  • メソッドのオーバーライド：子オブジェクト側で同名のメソッドを再定義すると、親のメソッドよりも優先して実行されます。cricketとtennisがこの仕組みを利用しています。
  • 統一的な扱い：すべてのオブジェクトがselectメソッドを持っているため、配列に入れてforEachで一括処理できます。呼び出し側はオブジェクトの種類を意識せず済むのが、ポリモーフィズムの大きな利点です。
  1. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し

  2. JavaScriptで非同期ループを実装する方法をわかりやすく解説

    JavaScriptでは、async/awaitとPromiseを組み合わせることで、各処理の完了を待ちながら繰り返しを実行する「非同期ループ」を実装できます。通常のループ内で時間のかかる処理(API通信やタイマー処理など)を順番に実行したい場合に非常に便利です。以下は、JavaScriptで非同期ループを実装するコード例です。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="vi