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

JavaScriptで関数をオブジェクトとして使用する方法【サンプルコードつき】

JavaScriptの関数をオブジェクトとして使うには？

JavaScriptでは、関数は単なる処理の集まりではなく、コンストラクタ（オブジェクトの設計図）として利用することができます。関数名の前に new 演算子を付けて呼び出すことで、その関数から新しいオブジェクト（インスタンス）を生成できます。

コンストラクタ関数の中では this が「新しく生成されたオブジェクト自身」を参照するため、this に対してプロパティを代入することで、インスタンスごとに異なるデータを持たせることが可能です。

実行例：book関数をコンストラクタとして使う

以下のコードでは、書籍のタイトルと著者を受け取る book 関数を定義し、new を使って myBook オブジェクトを生成しています。

<html>
   <head>
      <title>ユーザー定義オブジェクト</title>
      <script>
         function book(title, author){
            this.title = title;
            this.author = author;
         }
      </script>
   </head>
   <body>
      <script>
         var myBook = new book("Amit", "Python");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>
   </body>
</html>

実行結果

このHTMLファイルをブラウザで開くと、次のように表示されます。

Book title is : Amit
Book author is : Python

補足：モダンな書き方（class構文）

現在のJavaScriptでは、同じ仕組みをより直感的に記述できる class 構文が広く使われています。内部の動作はコンストラクタ関数と本質的に同じですが、可読性が高いため、新規コードでは class の利用が推奨されています。

class Book {
   constructor(title, author){
      this.title = title;
      this.author = author;
   }
}

const myBook = new Book("Amit", "Python");
console.log(myBook.title);  // "Amit"
console.log(myBook.author); // "Python"

このように、JavaScriptにおいて関数はそれ自体がオブジェクトであり、new 演算子と組み合わせることで、オブジェクトを量産するための「テンプレート」として活用できるのです。

  1. JavaScript関数の使い方を徹底解説！初心者向けステップバイステップガイド

    JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。 これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済

  2. JavaScript関数からオブジェクトを返す方法をわかりやすく解説

    JavaScriptの関数からオブジェクトを返すには、return文を使用します。オブジェクト内のプロパティやメソッドにアクセスする際は、thisキーワードを活用すると便利です。この記事では、実際のコード例を使いながら、JavaScript関数からオブジェクトを返す基本的な方法を解説します。基本的な考え方JavaScriptでは、オブジェクトの中にメソッド（関数）を定義できます。そのメソッド内でreturn文を使えば、処理結果や値を呼び出し元に返すことができます。また、thisキーワードを参照することで、同じオブジェクト内の他のプロパティにアクセス可能です。サンプルコード以下のコードでは、従業