JavaScript/PHP

【JavaScript】「オブジェクト」「プロパティ」「メソッド」って何?

アイキャッチ画像

JSでよく耳にする「オブジェクト」「プロパティ」「メソッド」って一体何なのでしょう。 プログラムをしていると良く出てくると思うので、忘備録として簡単に説明します。

こういった用語集的なものは後回しにしがちですが、初回できちんと理解していれば、その後の学習が楽になると思います。

オブジェクトとは?

プログラミング言語で操作することができるデータ「物」のことです。
簡単に言うと、複数の値をひとまとめにした値の事です。

const name = { first_name : 'いちご', last_name: 'ぱんつ' }

//オブジェクトは{ first_name : 'いちご', last_name: 'ぱんつ' }部分

 

  • コンソールで実行した結果部分がオブジェクトです。
コンソールでみたオブジェクト画像コンソールでみたオブジェクト画像

プロパティとは?

オブジェクトが中に持っている値のことをプロパティと言います。
以下は、予め設定しておいた値(’いちご’、’’ぱんつ)に、名前(プロパティ名’first_name’,’last_name’)をつけたものです。

const name = { first_name : 'いちご', last_name: 'ぱんつ' }

//プロパティはオブジェクトの値「first_name : 'いちご', last_name: 'ぱんつ'」部分
//プロパティ名は「first name」、「last name」部分

 

  • ▼矢印を開くと出てきたものがプロパティです。(__proto__の解説は省きます)
コンソールでみたプロパティ画像コンソールでみたプロパティ画像

メソッドとは?

オブジェクトに関連付けされた関数のことです。
DOMの操作などの処理部分.click()もそれに該当します。

$("#button").click();//.click()もメソッド
const obj = {
    prop1 : 'いちご',
    prop2 : 'ぱんつ',
    prop3 : function(){ //ここがメソッド
        return obj.prop1 += obj.prop2 //prop1とprop2の値を連結してreturnで値を返す
    }
   }
   console.log(obj.prop3()); //いちごぱんつ

 

オブジェクトとメソッドのプロパティ名を「. (ドット)」で連結する事によって、メソッド(オブジェクトの中に定義された関数)を呼び出すことが可能です。

obj.prop3() 

 

まとめ
  • オブジェクト:プロパティやメソッドなど、複数の値をひとまとめにした物(操作対象)
  • プロパティ:オブジェクトの中にある値
  • メソッド:オブジェクトに関連付けされた関数