質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

JavaScript】コンストラクタの概念が分かりません

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 1,045

ayaChi

score 10

学習し始めて2週間たち、
JavaScriptに出てくる言葉の概念を
一度整理したいのですが、
JavaScriptの[コンストラクタ]の概念が
ちゃんと理解できません。

普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。調べると、newするときに初期化するものをコンストラクタというと書いてありましたが、ピンときませんでした。

平易な言葉で説明していただけませんか。
よろしくおねがいいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+6

以下はJavaScriptだけの話です。

ES6の世界では覚えなくていいものだと思いますが、コンストラクタ自体はただの関数です。

function c(){
  this.p = 1;
}
c();

//undefiend

new演算子をつけて呼び出すことによって、新たなオブジェクトを返します。

function c(){
  this.p = 1;
}
new c();

/*
{p:1}
*/

この時、new演算子によって起こっていることは、以下のとおりです。

  1. 新たなオブジェクトを作成しthisに入れる。
  2. c()を実行する。
  3. return文があれば戻り値を返し、なければthisを返す。

(簡単のため[[prototype]]などについては省略)

以上、ひとことでまとめると、「new演算子をつけて呼び出すことを意図して書かれた関数をコンストラクタと呼ぶ」という理解でいいかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/31 21:25

    まとめがすごく分かりやすかったです。概念を理解することができました。貴重なお時間とって教えていただき、ありがとうございます!

    キャンセル

+3

オブジェクト指向言語には大体ある概念ですので下記のような記事をまず読んでみましょう。

冒頭から引用

・メソッド(関数)だよ
・クラスをnewしたときに実行されるよ
・オブジェクト指向なプログラミング言語で出てくるよ

「クラスをnewしたときに自動で実行されるメソッド」というのが簡単な説明ですね。

下記の記事にあるサンプルコードが分かりやすいと思います。

記事から引用

function Person(n) { // Constructor
    this.name = n;
    return this; // opt.
}

var p1 = new Person('Hanako');
document.write(p1.name);

自動で「Hanako」というnameを持ったPersonオブジェクトができあがるわけです。
ということで、newのときに別の引数を渡してあげると、いろんな人の情報を持つそれぞれのPersonオブジェクトができあがります。

function Person(n) { // Constructor
    this.name = n;
    return this; // opt.
}

let PHanako = new Person('Hanako');
let PTaro = new Person('Taro');
let PAi = new Person('Ai');
let PKenji = new Person('Kenji');

console.log(PHanako.name);
console.log(PTaro.name);
console.log(PAi.name);
console.log(PKenji.name);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/31 21:23

    コンストラクタ関数の概念と書き方、参考になりました、貴重なお時間とって教えてくださり、ありがとうございます!

    キャンセル

  • 2019/05/31 21:30

    参考になったようで何よりです

    キャンセル

checkベストアンサー

+2

コンストラクター関数

コンストラクターとは、正確にはコンストラクター関数であり、現実で例えると、工場の製造機のようなものです。

例えば、ナイキの靴の製造機を想像して下さい。エアーマックスという種類の靴を製造してくれる機械があったとします。その製造機はいくつも同じエアーマックスを製造してくれます。

この製造機・製造物(靴:エアーマックス)のモデルを、コードで表したのがコンストラクター関数です。
製造機の例とコードを対比したものが以下です。

   現実       プログラミング       
  製造機      コンストラクター関数 
    ↓              ↓               
  [製造]      [具現化]             
    ↓              ↓               
   靴         物体(オブジェクト)   
"use strict";

/* console.logと毎回書くのは面倒&見づらいゆえ、`_`(アンダースコア)に割り当て */
let _ = console.log;

function AirMax(){
   this.brand = "Nike";
   this.shoesType = "Air Max";
};

let airMax1 = new AirMax(),
airMax2 = new AirMax();

_( airMax1.brand ); //-> "Nike"
_( airMax1.shoesType ); //-> "Air Max"

_( airMax2.brand ); //-> "Nike"
_( airMax2.shoesType ); //-> "Air Max"

コンストラクター関数は、その前にnewキーワードを書くと、物体を作成し返却します。上記コードでは、新たに作成された物体をairMax1airMax2に割り当て、後で参照出来るようにしています。

new + コンストラクター関数 によって物体を作成する事を、プログミングでは具現化すると言い、作成された物体airMax1/airMax2具現物と言います。

新しく具現化され返却された物体は、コンストラクター関数内で定義された性質・術が初期値化されています。

少しだけ違うものを具現化する

先の例では、具現物が全く同じものばかりになってしまいます。

そこで、少し違うものを作りたい場合、例えば先の靴の例で言えば「靴に買った人の名前を入れる」事にします。そういう場合は、具現化時に、コンストラクター関数に引数として名前を渡せるように、コンストラクター関数を少し変更します。

function AirMax(name){
   this.brand = "Nike";
   this.shoesType = "Air Max";

   /* 追加 */
   this.owner = name;
};

let airMax1 = new AirMax("Taro"),
airMax2 = new AirMax("Hana");

_( airMax1.owner ); //-> "Taro"
_( airMax2.owner ); //-> "Hana"

まとめ

上記の靴は、分かりやすい現実の例で例えました。既知かもですが、プログミングでは、物理的なものだけに限らず、あらゆるの物事を物体(オブジェクト)で表すことが出来ます。

用語

(カタカナ用語は分かりにくいので、日本語にして説明しました)

 私訳   既存訳 
 組み立て係   コンストラクター(constructor) 
 物体   オブジェクト(object) 
 具現化する   インスタンシエイト(instantiate) 
 具現物   インスタンス(instance) 
 初期値化する   初期化する(initialize) 
 性質  プロパティ(property) 
 術   メソッド(method) 

追記[19.06.04]

普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。

という部分に答えていなかった事に気付き😅、 以下まとめてみました。もし参考になれば幸いです🌟(新たな独自用語がて出てきて分からない場合は、上の用語を参照下さい。追記しておきましたゆえ(。•ㅅ•。))

上記の回答部分に一文追記しました。重要部分&追記明瞭化のため、一文が太字になっています。

通常の関数とコンストラクタ関数との違い

通常関数とコンストラクタの違いを、表にして比較してみました。

           通常関数   コンストラクタ 
 ❶目的   繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため   同じような性質・術を備えた、複数の物体を作成するため 
 ❷{}内の定義の仕方   様々な処理を定義する   this.性質名 = 値 or this.術名 = function(){} 
 ❸呼び出し   識別子名 + ()   new + 識別子名 
 ❹返却値   returnの有無による   新しく作成された物体。コンストラクタで定義された性質・術が初期値化されている 

どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。

僕も最初はそうでしたが、ややこしい・わかった様な分からない様な…と感じる理由は

  • どちらもfunctionを使って定義されいる(関数である)
  • 定義が抽象的

だからが大きい気がします。ですので、以下に分かりやすよう、コンストラクタ関数をfunctionキーワードを用ず書き直してみました。

通常関数

function greetingTo( val ){
   console.log("おはよう、"+  val);
};

greetingTo("悟空"); // "おはよう、悟空"

コンストラクタ関数

CONSTRUCTOR AirMax(){
   this.brand = "Nike";
   this.shoesType = "Air Max";
};

new AirMax();  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません

こうすると、通常関数とコンストラクタでは、{}内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/31 21:31

    分かりやすい現実のことで例えてくださって助かりました!とても理解しやすかったです。コンストラクタは製造機なんですね。 同じ靴を複製していって、違うデータ(所有者の名前)を入れたくなったら、引数で値を渡せばいいんですね。で、newするときに、新しく生成されるインスタンスに所有者の名前を渡してあげることで、微妙に違う靴の大量生産ができるということなんですかね!

    貴重なお時間をとって教えて下さってありがとうございます!

    キャンセル

  • 2019/05/31 22:40 編集

    そうですそうです\( ´ω`)/✨♪♪ 分かりやすいようで良かったです\( ´ω`)/✨♪♪ こちらも凄く勉強になりました*.(๓´͈ ˘ `͈๓).*🌟

    コンストラクター関数の様に、「設計図」的な手法で物体(オブジェクト)を作る方法は、他に
    ❷"クラス(部類)"
    を使うやり方もあります。

    また、JavaScripの場合は、物体を具現化によって、または、字母**`{}`によって作成した後に、他の物体の性質**や術**を"継承**"する事ができたりします(原型**) ).(๓´͈ ˘ `͈๓).*🌟

    **語彙**
    字母: リテラル(literal)
    性質 :プロパティ(property)
    術: メソッド(method)
    継承: __(inheritance)
    原型: プロトタイプ(prototype)

    キャンセル

0

学習し始めて2週間たち、
JavaScriptに出てくる言葉の概念を

この状況でしたら「コンストラクタ」の理解はスキップした方がよいかも。

オブジェクト指向にはクラスペースとプロトタイプベースがありまして、
JavaScript は後者に分類されます。
また、前者の特徴としてクラスを定義するってのがありまして、
その中でコンストラクタも定義するのでわかりやすいと思います。

世の中の(有名なオブジェクト指向)プログラミング言語では
前者が多いので Java なり Python なりを勉強しはじめてから
コンストラクタを理解するのがいいんじゃないかなあ、と。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る