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

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

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

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

初心者だった私は、

・・・そもそもどれだ！！！（涙）

となっていました・・・

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

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

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

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

1. オブジェクト
2. プロパティ
3. メソッド

オブジェクト

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

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

オブジェクトとは関連のあるデータと機能の集合です。(機能はたいていは変数と関数で構成されており、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。)
MDN WebDocs https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics

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


//オブジェクト、メソッド、プロパティについて
    var dyna = {//オブジェクト
        name:'dyna',//プロパティ
        age:31,     //プロパティ   
        favorite:'MrsGreenapple',//プロパティ
        speak:function(){ //プロパティに関数設定➡メソッド
            console.log("こんにちは！");
        }
    };
    console.log(dyna);
    dyna.speak();//メソッドの呼び出し

//オブジェクト、メソッド、プロパティについて

var dyna = {//オブジェクト

name:'dyna',//プロパティ

age:31, //プロパティ

favorite:'MrsGreenapple',//プロパティ

speak:function(){ //プロパティに関数設定➡メソッド

console.log("こんにちは！");

}

};

console.log(dyna);

dyna.speak();//メソッドの呼び出し

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

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

オブジェクトの中身を、

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

｛name：dyna~・・・｝と設定した中身が表示されています。

プロパティ

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

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

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

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


//
オブジェクト.プロパティ
//例
dyna.favorite

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

//例

dyna.favorite

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

console.log(dyna.favorite);

を追加しました。


//オブジェクト、メソッド、プロパティについて
    var dyna = {//オブジェクト
        name:'dyna',//プロパティ
        age:31,     //プロパティ   
        favorite:'MrsGreenapple',//プロパティ
        speak:function(){ //プロパティに関数設定➡メソッド
            console.log("こんにちは！");
        }
    };
    console.log(dyna);
    dyna.speak();//メソッドの呼び出し
//追加！！！
　　console.log(dyna.favorite);

//オブジェクト、メソッド、プロパティについて

var dyna = {//オブジェクト

name:'dyna',//プロパティ

age:31, //プロパティ

favorite:'MrsGreenapple',//プロパティ

speak:function(){ //プロパティに関数設定➡メソッド

console.log("こんにちは！");

}

};

console.log(dyna);

dyna.speak();//メソッドの呼び出し

//追加！！！

　　console.log(dyna.favorite);

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

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

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

メソッド

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

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

メソッドはオブジェクトのプロパティである関数です。
MDN WebDocs　https://developer.mozilla.org/ja/docs/Glossary/Method

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


 var dyna = {//オブジェクト
        name:'dyna',//プロパティ
        age:31,     //プロパティ   
        favorite:'MrsGreenapple',//プロパティ
        speak:function(){ //プロパティに関数設定➡メソッド
            console.log("こんにちは！");
        }
    };
    console.log(dyna);
    dyna.speak();//メソッドの呼び出し