javascriptのコンストラクター,インスタンスって何？
- 2021.03.01
- 01_技術ブログ JavaScript
- #Javascript
こんにちは！
dynaです。
3歳の娘が足を骨折して、やっとギブスが取れました。毎日リハビリ中です( ；∀；)
歩けるようになってヨカッタネー( ；∀；)
この記事はJavascriptのコンストラクタ、インスタンス（ちょっとだけプロトタイプも）についての学習記録です。(初心者向け）
こちらの記事、「オブジェクト、プロパティ、メソッドを学習してみた」の続きです！↓
では行ってみましょう！！
広告
コンストラクタって何？
「関数オブジェクトであり、インスタンスを作成する関数」のこと。
おっと…
関数オブジェクトとインスタンスが新しく出てきた！！
先に調べよう。。。
関数オブジェクト
読んだ通り、関数のオブジェクトです。関数は、オブジェクトの一種となります。
オブジェクトには配列など色々な種類があって、関数もメソッドも「オブジェクト」となります。
オブジェクトって何だっけ?という方はこちらの記事をご参考までに。
インスタンス
後程詳しく書きますが、簡単に言うと、オブジェクトのコピー（複製）みたいなもの。
オブジェクトのコピー（＝インスタンス）を作ることをインスタンス化とも言います。
関数オブジェクト ＝ 関数のオブジェクト
インスタンス ＝ オブジェクトのコピー（複製）
ってことね。
ということで、コンストラクタへ戻ります。
コンストラクタは「関数オブジェクトであり、インスタンスを作成する関数」でしたね。
では実際のコードを見てみます。
この
function Man(name,age){~}
がコンストラクタということになります。（関数オブジェクトですね！）
Man には、nameとageが設定されています。
ちなみに表示結果はこんな感じです。↓
インスタンスって何？
先ほど出てきましたが、インスタンスは、オブジェクトのコピー（複製）のことです。
オブジェクトに定義されたデータや機能を持った、別のオブジェクトです。
ここでいう、名前（name)、年齢（age)の機能を持った、別のオブジェクト（potter)ということになります。
インスタンスの作成には、 new を付けます。
Manのコンストラクタから、potterのインスタンスを作成しました。
new をつけてインスタンスを作成すると、this.nameの「this」にインスタンスが設定されます。
ではnameをHarry、ageを12とします。（※ハリーポッター好き）
console.logで表示してみます。
ちゃんと、Manの内容をコピーして、作成されています。
せっかくなのでロンも作成してみます。
var ron = new Man(“ron”,12);
としてインスタンスを作成。
ちゃんとロンの名前も表示されました！
オブジェクト（の機能も）をコピーできるので、同じような枠組みで作りたいときは便利ですね！
※インスタンス等はこの記事を参考にしています。
→https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS
ちょっとだけプロトタイプの話
プロトタイプって・・・何？
（なんかガンダムみたい）
プロトタイプとは、「プロトタイプ」という特別なオブジェクトのこと。
先ほどのインスタンスは、オブジェクトのコピー（複製）でしたが、こちらは、「参照・継承」です。
継承は他のオブジェクトの性質（プロパティやメソッドなど）を引き継ぐ仕組みです。参照は見に行く、という感じです。
コピーを作る（複製する）んじゃなくて、元のオブジェクトを見に行って（参照）、性質を引き継ぐのね
図にするとこんな感じです。
具体的にどんな感じかというと、
この、
Man.prototype.magic2 = function() { console.log(“「エクスペクト・パトローナム！」”); }
がプロトタイプを使用していて、new時にManを参照して作成されます。
potter.magic2();とすると、「エクスペクト・パトローナム！」と表示されます。
potterでmagic2の関数が使えちゃうのです！
プロトタイプの書き方は、
オブジェクト.prototype.メソッド= function() { }
で使用できます。
試しに、ロンも作成して魔法を唱えさせたいので、コンストラクタの引数にchant を追加します。
※this.chant=chant; の部分
プロトタイプのfunction部分もあわせて書き換えます。
var ron = new Man(“ron”,12,”ウィンガーディアム・レヴィオーサ”);
としてインスタンスを作成しました。
表示させてみると・・・
ちゃんと別の呪文を唱えてます！！
これって使いこなせたらめっちゃ便利なんじゃない・・・？
ちなみに、コンストラクタにthisを使ったメソッドでも表示できますが、毎回コピーして作成されてしまいます。
コード例↓
プロトタイプのメリットは、
・メモリの使用量を節減できる（参照しに行くだけ）
・汎用的な関数を設定すると便利
ということでした・・・
初心者の学習記録ですが、個人的にはこれが理解できると、コードがだいぶ読みやすくなりました。
引き続きコツコツ頑張っていこうと思います～
読んで下さりありがとうございました。
修正等ありましたら、下記のお問い合わせからお願いします。
今回参考にさせていただいたサイト、本
https://qiita.com/takeharu/items/809114f943208aaf55b3
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS
いつもありがとうございます。
