【これだけ】JavaScriptのオブジェクト【現役エンジニアが解説】
今回は、JavaScriptのオブジェクトについて、オブジェクトの定義とオブジェクトの使い方に分け、簡単に解説していきます。
オブジェクトの定義
オブジェクトとは、簡単に言うと変数や関数の集まりのことです。
JavaScriptでは連想配列を定義するようにオブジェクトを定義できます。
var User = { name : "", age : 0, getInfo : function() { return this.name+"さんの年齢は"+this.age+"歳です。"; } }
上記のコードでは、Userというオブジェクトを宣言し、その中でnameやageという変数(プロパティ)、getInfoという関数(メソッド)を定義しています。
オブジェクトの使い方
JavaScriptで定義したオブジェクトは、クラスの概念で例えるなら、インスタンス化なしで使えます。
そのため、定義した後の呼び出し方は、”オブジェクト名.プロパティ名もしくはメソッド名()”のような静的な呼び出し方となります。
User.name = "田中"; User.age = 22; console.log(User.getInfo()); // "田中さんの年齢は22歳です。"と出力
上記のコードでは、先程定義したUserというオブジェクト下のnameやageのプロパティへの値の代入、getIngoのメソッドの呼び出しを行っています。
クラスでオブジェクトを実装する方法
ブラウザがInternet Explorer等でなければ、JavaScriptでもオブジェクトはクラスで実装できます。
クラスは”class クラス名{}”で宣言でき、その中で、プロパティは”変数名 = 値”、メソッドは”関数名() {}”で定義できます。
class User { name = ""; age = 0; constructor(name){ this.name = name; } getInfo() { return this.name+"さんの年齢は"+this.age+"歳です。"; } } var Tanaka = new User("田中"); Tanaka.age = 22; console.log(Tanaka.getInfo());
上記のコードでは、先程のUserオブジェクトで実装したものをクラスで実装しなおしていますが、このクラスでは、プロパティやメソッドが静的ではないため、”new クラス名()”でインスタンス化してからアクセスしています。