2020/09/01

【これだけ】JavaScriptのオブジェクト【現役エンジニアが解説】

PROGRAM

今回は、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 クラス名()”でインスタンス化してからアクセスしています。

• facebook
• Tweet
• Read Later