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

  

 

ちょっとだけプロトタイプの話

プロトタイプって・・・何?
(なんかガンダムみたい)


プロトタイプとは、「プロトタイプ」という特別なオブジェクトのこと

先ほどのインスタンスは、オブジェクトのコピー(複製)でしたが、こちらは、「参照・継承」です。

継承は他のオブジェクトの性質(プロパティやメソッドなど)を引き継ぐ仕組みです。参照は見に行く、という感じです。

コピーを作る(複製する)んじゃなくて、元のオブジェクトを見に行って(参照)、性質を引き継ぐのね

図にするとこんな感じです。

具体的にどんな感じかというと、

 

プロトタイプ
log

この、

 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

 

いつもありがとうございます。

BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール