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

JavaScriptのコンストラクターから値を返す方法

JavaScriptのコンストラクターから値を返すには？

JavaScriptでは、コンストラクター関数内で明示的にオブジェクトをreturnすると、new演算子によって生成されるインスタンス（this）の代わりに、そのオブジェクトが結果として返されます。この仕組みを利用すると、コンストラクターの戻り値を柔軟に制御できます。

以下は、JavaScriptのコンストラクターから値を返すコード例です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<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: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>Returning value from constructor</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to return a object from constructor</h3>
<script>
   let resEle = document.querySelector(".result");
   function Human(){
      this.firstName = 'Rohan';
      this.lastName = 'Sharma';
      this.age = 22;
      return {firstName:'Mohit',lastName:'Sharma'};
   }
   let obj = new Human();
   document.querySelector(".Btn").addEventListener("click", () => {
      for(i in obj){
         resEle.innerHTML += 'Key = ' + i + ' : Value = ' + obj[i] + '<br>'
      }
   });
</script>
</body>
</html>

出力結果

上記のコードを実行し、ボタンをクリックすると、次のような出力が得られます。

JavaScriptのコンストラクターから値を返す方法

画面には、コンストラクターから実際に返されたオブジェクトのプロパティが表示されます。

JavaScriptのコンストラクターから値を返す方法

コードの解説

この例では、Humanコンストラクター内でthis.firstName = 'Rohan'などのプロパティを設定していますが、最後にreturn {firstName:'Mohit', lastName:'Sharma'}と明示的に新しいオブジェクトを返しています。

そのため、new Human()の結果として得られるobjは、thisに設定された「Rohan」ではなく、return文で指定した「Mohit」のオブジェクトになります。ボタンをクリックすると、そのことが確認できます。

コンストラクターの戻り値に関する重要なルール

  • オブジェクトをreturnした場合： 配列や関数を含むオブジェクトを返すと、new演算子の結果はそのオブジェクトになり、thisは破棄されます。
  • プリミティブ値をreturnした場合： 文字列や数値などのプリミティブ値を返しても無視され、通常どおりthis（新しく生成されたインスタンス）が返されます。
  • return文がない場合： 自動的にthisが返されます。

この挙動を理解しておくと、ファクトリーパターンのように条件に応じて異なるオブジェクトを返したい場合などに役立ちます。

  1. JavaScriptのArray.from()メソッドとは？使い方と実例をわかりやすく解説

    Array.from()メソッドは、配列風オブジェクト（array-like）や反復可能オブジェクト（iterable）から、新しい配列オブジェクトを作成するための便利なメソッドです。文字列、Map、Set、NodeListなど、さまざまなデータを手軽に配列へ変換できます。 Array.from()の基本的な動作 例えば、文字列「HelloWorld」に対してArray.from()を使用すると、1文字ずつ分割された新しい配列が生成されます。以下に実際のコード例を示します。 サンプルコード <!DOCTYPE html> <html lang="ja"&g

  2. JavaScriptで別の関数を返す関数の作り方とクロージャの仕組み

    JavaScriptで関数を返す関数とは JavaScriptでは、関数の戻り値として別の関数を返すことができます。このテクニックは「クロージャ（closure）」と呼ばれる仕組みと密接に関係しており、返された関数は、外側の関数内で定義された変数にアクセスし続けることができるのが大きな特徴です。 以下は、JavaScriptで関数が別の関数を返すコード例です。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <