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

JavaScriptのgetPrototypeOf()メソッドとは？具体例でわかる使い方とプロトタイプの確認方法

JavaScriptのgetPrototypeOf()メソッドとは？

getPrototypeOf()メソッドは、ユーザーが作成したオブジェクトのプロトタイプ（内部スロット [[Prototype]]）を取得するために使用されるメソッドです。また、「2つのオブジェクトが同じプロトタイプを持っているかどうか」を比較したい場合にもよく活用されます。

以下に、getPrototypeOf()関数を使った具体的なコード例を示します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript getPrototypeOf()</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript getPrototypeOf()</h1>
<div class="sample"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、オブジェクトtestのプロトタイプが表示されます
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   function fun(name, age) {
      this.name = name;
      this.age = age;
   }
   document.querySelector(".Btn").addEventListener("click", () => {
      let test = new fun("Rohan", 22);
      sampleEle.innerHTML = "testオブジェクトのプロトタイプ = " + Object.getPrototypeOf(test);
   });
</script>
</body>
</html>

出力結果

JavaScriptのgetPrototypeOf()メソッドとは？具体例でわかる使い方とプロトタイプの確認方法

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

JavaScriptのgetPrototypeOf()メソッドとは？具体例でわかる使い方とプロトタイプの確認方法

ボタンをクリックすると、コンストラクター関数funから生成されたtestオブジェクトのプロトタイプが画面に表示されます。Object.getPrototypeOf(test)が返すのは、コンストラクター関数のfun.prototypeに相当するプロトタイプオブジェクトです。

補足：2つのオブジェクトのプロトタイプを比較する

getPrototypeOf()は、次のように厳密等価演算子と組み合わせることで、2つのオブジェクトが同じプロトタイプを共有しているかを簡単に判定できます。

const isSameProto =
   Object.getPrototypeOf(obj1) === Object.getPrototypeOf(obj2);

このように、オブジェクトの継承構造をデバッグしたり、オブジェクト同士の関係性を検証したりする際に、Object.getPrototypeOf()は非常に便利なメソッドです。

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

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ

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

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