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

JavaScriptのObject.create()メソッドで独自プロトタイプを使ってオブジェクトにアクセスする方法

JavaScriptでは、Object.create()というメソッドを使用することで、既存のオブジェクトを基にした新しいオブジェクト（独自のプロトタイプ）を作成し、その既存オブジェクトへアクセスすることができます。このメソッドを使うと、既存のオブジェクトが持つプロパティを新しく作成したオブジェクトへ継承させることが可能です。ここでは、その仕組みと使い方をわかりやすく解説します。

Object.create()の構文

Object.create(既存のオブジェクト);

このメソッドは引数として渡された既存のオブジェクトをプロトタイプとする新しいオブジェクトを生成します。そのため、既存オブジェクトのプロパティやメソッドは、新しく作成されたオブジェクトに自動的に引き継がれます。

実例

次の例では、まず「person」という名前のオブジェクトを作成しています。続いて「Object.create()」を使ってこのオブジェクトをプロトタイプとした新しいオブジェクトを生成し、変数「newper」に代入します。その後、新しいオブジェクトに対してプロパティを上書きすると、元のpersonオブジェクトから継承された値が変更され、変更後の値が出力されます。

<html>
<body>
<script>
    var person = {
        name: "Karthee",
        profession: "Actor",
        industry: "Tamil"
    };
    document.write(person.name);
    document.write("</br>");
    document.write(person.profession);
    document.write("</br>");
    document.write(person.industry);
    document.write("</br>");
    document.write("プロトタイプを使って、既存オブジェクトのプロパティが以下のように変更されました");
    document.write("</br>");

    var newper = Object.create(person); // プロトタイプの作成
    newper.name = "sachin";
    newper.profession = "crickter";
    newper.industry = "sports";

    document.write(newper.name);
    document.write("</br>");
    document.write(newper.profession);
    document.write("</br>");
    document.write(newper.industry);
</script>
</body>
</html>

出力結果

Karthee
Actor
Tamil
プロトタイプを使って、既存オブジェクトのプロパティが以下のように変更されました
sachin
crickter
sports

ポイントまとめ

  • Object.create()は、指定したオブジェクトをプロトタイプとする新しいオブジェクトを生成するメソッドです。
  • 新しいオブジェクトは、元のオブジェクトのプロパティやメソッドをプロトタイプチェーン経由で継承します。
  • 新しいオブジェクト側で同名のプロパティを設定すると、そちらの値が優先されます（元のオブジェクトは変更されません）。
  • この仕組みにより、コードの再利用性が高まり、オブジェクト指向プログラミングをJavaScriptで自然に実現できます。
  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座