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

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

JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。

押さえておきたいポイント

  • オブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。
  • obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座に実行され、その戻り値が格納されます。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Access an object through another object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to display obj2</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj = {
        firstName: "Rohan",
        lastName: "Sharma",
        welcome() {
            return "Welcome " + this.firstName + " " + this.lastName;
        },
    };
    let obj2 = {
        firstName: "Mohit",
        lastName: obj.lastName,
        welcomeString: obj.welcome(),
    };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "obj2.firstName = " + obj2.firstName + "<br>";
        resEle.innerHTML += "obj2.lastName = " + obj2.lastName + "<br>";
        resEle.innerHTML += "obj2.welcomeString = " + obj2.welcomeString + "<br>";
    });
</script>
</body>
</html>

コードの解説

このコードでは、まず obj というオブジェクトを定義しています。obj は firstName と lastName という2つのプロパティと、挨拶文を返す welcome() メソッドを持っています。

次に定義される obj2 では、以下のように別のオブジェクトを参照しています。

  • lastName: obj.lastName … obj の lastName プロパティの値（"Sharma"）がそのまま代入されます。
  • welcomeString: obj.welcome()obj の welcome() メソッドがこの時点で呼び出され、戻り値である "Welcome Rohan Sharma" という文字列が格納されます。なお、メソッド内の this は obj を指すため、表示される名前は obj 側のものになります。

出力結果

上記のコードを実行すると、ブラウザには次のような画面が表示されます。

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

「CLICK HERE」ボタンをクリックすると、obj2 の各プロパティの値が画面に出力されます。

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

このように、JavaScriptではオブジェクトリテラルの定義時に他のオブジェクトを参照することで、簡単にプロパティの値やメソッドの実行結果を別のオブジェクトへ引き継ぐことができます。

  1. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /

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

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