Javascriptのオブジェクト、プロパティ、メソッドを学習してみたよ

Javascriptのオブジェクト、プロパティ、メソッドを学習してみたよ

こんにちは!Javascript学習中のdynaです!

この記事はJavascriptのオブジェクト、プロパティ、メソッドを学習した記録です。

本とかサイトを読んでいると知っていることが当たり前のように進んでいくこの3つ・・・・・

初心者だった私は、

・・・そもそもどれだ!!!(涙)

となっていました・・・

と、いうことで、実際のコードを使いながら、学習していきたいと思います!!


全体像はこんな感じです。

javascriptのオブジェクト図

参考にした本はこちらです↓

JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで/山田祥寛【3000円以上送料無料】

 

 

オブジェクト

javascriptにおけるオブジェクトは、名前をキーにアクセスできる配列、連想配列でもあるそうです。

 

MDN WebDocs さんではオブジェクトについて下記のように記載されています。

オブジェクトとは関連のあるデータと機能の集合です。(機能はたいていは変数と関数で構成されており、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。)

MDN WebDocs https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics

 

具体的なコードを見てみます。

 

このコードでいうと、var = dyna{~}がオブジェクトになります。

console.logで画面表示した結果はこちら↓

オブジェクトの中身を、

console.log(dyna)として表示してみます。

{name:dyna~・・・}と設定した中身が表示されています。

プロパティ

オブジェクトが持つ情報になります。

先ほどのサンプルコードだと、name、age、favoriteが当たります。

ほしい情報だけを取り出すこともできます。下記のように書きます↓

オブジェクト.プロパティ

 

具体的に動かしてみます。先ほどのサンプルコードに

console.log(dyna.favorite);

を追加しました。

追加したコードは、dynaのfavorite(=MrsGreenapple)を表示させる内容です。

ブラウザ上で見てみます。(表示画面↓)

favorite‘MrsGreenapple’が表示されました!!!

 

メソッド

メソッドはオブジェクトを操作できるものです。

Javascriptではオブジェクトのプロパティに関数を設定した場合、それをメソッドと呼びます。

メソッドはオブジェクトのプロパティである関数です。

MDN WebDocs https://developer.mozilla.org/ja/docs/Glossary/Method

なんとなく意味は分かりますが、じゃあ実際にコードのどこなんでしょう?下のコードを見てみます↓

 

プロパティに設定されている関数があります。この、「speak:function(){~}」をメソッドと呼びます。

speak:function(){~}を、単に「こんにちは!」と表示させるだけの関数(メソッド)として作ります。

最後の行で、dyna.speak();としてメソッドを呼び出します。

表示結果↓

こんにちは!と表示されました!


なんとなく分かった気がする・・・・!!


引き続き、コンストラクタらへんを勉強した記録を書き残したいと思います。

コンストラクタを学習した記事はこちら↓