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