0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

はじめてのJavaScript⑰ 「Functionコンストラクタ」

Last updated at Posted at 2021-11-02

##1. はじめに
本記事では、JavaScriptの
「Functionコンストラクタ」
について記載する。
##2. 概要
###コンストラクタとは?
:::note
new式を使用して新規オブジェクト(インスタンス)を作成する関数のこと。
:::
上で書いたような訳の分からない用語が出てきたので、細かく分けて解説していく。
####オブジェクトとは?
オブジェクトとは
関連のあるデータと機能の集合
のことを指す。
####インスタンスとは?
オブジェクト内の細かいパーツのようなもの。
Twitterを例として挙げると、以下のようにTwitterに表示されている画面がオブジェクトだとしたら、投稿者や投稿者の画像、投稿した日付などの細かいパーツはインスタンスと呼ばれるものである。
スクリーンショット 2021-11-02 15.31.28.png

Twitterの全体がオブジェクト、投稿者名や日付などの細かいパーツがインスタンスである。

##3. 構文
構文は以下のようになる。

index.js
let 変数名 = new Function(引数1引数2...関数本体の処理);

※Functionは先頭のみ大文字表記なので要注意!!
###new演算子の役割
new演算子の役割として、

オブジェクト指向なプログラミング言語で出てくる演算子のひとつで、
クラス(設計図)からインスタンス(実体)を作るときに使う演算子

という役割がある。
なお、Functionコンストラクタにnew演算子を付け忘れた場合はエラーが発生してしまうので
付け忘れないようにすること。
##4. 例題
例題の内容は、過去に記載した記事より参照→はじめてのJavaScript⑭ 「関数」 5.例題より

###例題の内容
例題は「四角形の面積を計算する関数」というテーマで進めていく。

四角形の縦の長さと横の長さを引数に渡すと、四角形の面積(縦×横)を計算して、値を返す関数を作る

作った関数を使って、高さ3m、横幅5mの四角形の面積を求め、コンソールへ出力する

※単位はとする。(単位の出力は不要)


###四角形の面積を計算する関数をFunctionコンストラクタで書く ```index.js let getRectangle = new Function('height', 'width', 'return height*width'); console.log(getRectangle(3, 5)); ``` この構文の解釈の仕方としては、前回記事にした[関数リテラル](https://qiita.com/Stack_up_Rising/items/a6f0211beea531c9c057#%E5%9B%9B%E8%A7%92%E5%BD%A2%E3%81%AE%E9%9D%A2%E7%A9%8D%E3%82%92%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E9%96%A2%E6%95%B0%E3%82%92%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%E3%81%A7%E6%9B%B8%E3%81%8F)と解釈が同じなので割愛する。 何度もいうが、 Functionコンストラクタで記述する際はFunctionの大文字表記を忘れずにやること。
###デベロッパーツールでの検証 [前回同様](https://qiita.com/Stack_up_Rising/items/a6f0211beea531c9c057#%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%AE%E6%A4%9C%E8%A8%BC)、縦3と横幅5の面積は15㎡となるはず。 ![スクリーンショット 2021-10-31 14.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/3856f514-e6bc-1a43-cadd-d5cb301520ab.png) 今回も正しく出力できた。 ##5. おわりに 次項:[はじめてのJavaScript⑱ 「関数の演習」](https://qiita.com/drafts/d25ded4432e037084341/edit)に続く。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?