オブジェクトの作り方

JavaScriptは、独自のオブジェクトを作ることができます。

本ページでは、オブジェクトの作り方について説明します。

リテラル表記法での作り方

以下は、リテラル表記法を使ったオブジェクトの作り方です。

【リテラル表記法を使ってオブジェクトを作る例】
const yamada = {
  address: "Tokyo",
  birthday: 2001
};

上記は、yamadaという名前のオブジェクトを作成しています。また、addressプロパティの値を"Tokyo"、birthdayプロパティの値を2001に設定しています。

constで宣言していますが、yamadaに代入されているのはオブジェクトの参照先です。このため、constで宣言してもプロパティの値などは書き換え可能です。

以下のように、プロパティをオブジェクトにして入れ子にすることもできます。

【オブジェクトを入れ子にする方法】
const peaple = {
  yamada:{
    address: "Tokyo",
    birthday: 2001
  },
  suzuki:{
    address: "Kyoto",
    birthday: 1999
  }
};

値は、peaple.yamada.addressなどで参照したり、書き換えたりできます。

また、以降の作り方でも入れ子にできます。

new Object()を使った作り方

以下は、new Object()を使った作り方です。

【new Object()を使ってオブジェクトを作る例】
const yamada = new Object();
yamada.address = "Tokyo";
yamada.birthday = 2001;

これは、先ほどのリテラル表記法で作ったのと同じオブジェクトが作成されます。

コンストラクタ関数を使った作り方

以下は、コンストラクタ関数を使った作り方です。

【コンストラクタ関数を使ったオブジェクトの作り方】
function Peaple(address,birthday) {
  this.address = address;
  this.birthday = birthday;
}

const yamada = new Peaple("Tokyo",2001);

関数Peapleは、オブジェクトの型を定義しています。名前は、慣例的に最初を大文字にします。上記は、addressとbirthdayプロパティがあることがわかります。

const yamada部分で、プロパティに値を入れています。つまり、yamada.addressは"Tokyo"で、yamada.birthdayは2001になります。このように、オブジェクトを実体化することをインスタンス化と言い、yamadaはインスタンス(オブジェクト)と呼ばれます。

const suzuki = new Peaple("Kyoto",1999)などとすれば、プロパティの値が異なるインスタンスが作成できます。コンストラクタ関数で型を作っておけば、同じ型を持った複数のインスタンスが簡単に作成できます。

Object.create()を使った作り方

以下は、Object.create()を使った作り方です。

【Object.create()を使ってオブジェクトを作る例】
const japan = {
  country: "Japan",
};
const yamada = Object.create(japan);
yamada.address = "Tokyo";
yamada.birthday = 2001;

上記は、リテラル表記法で作ったjapanを原型(プロトタイプ)として、yamadaを作っています。japanのcountryプロパティは継承されるため、yamada.countryも"Japan"です。

もし、const suzuki = Object.create(japan);で別のオブジェクトを作ったとします。このsuzukiも、countryプロパティを継承します。このため、japan.country = "日本"とすると、yamada.countryもsuzuki.counrtyも"日本"になります。

メソッド

メソッドを定義することもできます。次からは、各作り方でのメソッドの定義例を示します。

リテラル表記法

以下は、リテラル表記法を使ってメソッドを定義する例です。

【リテラル表記法でメソッドを定義する例】
const yamada = {
  address: "Tokyo",
  birthday: 2001,
  display: function() {
    alert("住所は" + this.address + "で生年月日は" + this.birthday + "年");
  }
};

上記は、yamada.display();を実行すると、「住所はTokyoで生年月日は2001年」と表示されます。使い方は、以降も同じです。

new Object()

以下は、new Object()を使ってメソッドを定義する例です。

【new Object()を使った時にメソッドを定義する例】
const yamada = new Object();
yamada.address = "Tokyo";
yamada.birthday = 2001;
yamada.display = function() {
  alert("住所は" + this.address + "で生年月日は" + this.birthday + "年");
};

コンストラクタ関数

以下は、コンストラクタ関数を使ってメソッドを定義する例です。

【コンストラクタ関数でメソッドを定義する例】
function Peaple(address,birthday) {
  this.address = address;
  this.birthday = birthday;
  this.display = function() {
    alert("住所は" + address + "で生年月日は" + birthday + "年");
  }
}

const yamada = new Peaple("Tokyo",2001);

const suzuki = new Peaple("Kyoto",1999);と別のオブジェクトを作った時でも、suzuki.display();でメソッドが使えます。

なお、Peaple.prototype.country = "Japan";などとすると、yamada.countryも継承で"Japan"になります。これは、コンストラクタ関数のprototypeプロパティが、yamadaのプロトタイプになるためです。このため、suzukiを作った場合も、suzuki.countryは"Japan"になります。

Object.create()

以下は、Object.create()を使ってメソッドを定義する例です。

【Object.create()でメソッドを定義する例】
const japan = {
  country: "Japan",
  display: function() {
    alert("住所は" + this.address + "で生年月日は" + this.birthday + "年");
  }
};
const yamada = Object.create(japan);
yamada.address = "Tokyo";
yamada.birthday = 2001;

const suzuki = Object.create(japan);と別のオブジェクトを作った時でも、suzuki.display();でメソッドが使えます。

まとめ

それぞれの作り方には、以下の特徴があります。

【オブジェクト作り方の特徴】
作り方 特徴
リテラル表記法 1つのオブジェクトを簡単に作れます。
new Object() 空のオブジェクトを先に作り、後でプロパティなどを追加します。
コンストラクタ関数 同じプロパティやメソッドが使える複数のインスタンスを作るのに便利です。
Object.create() コンストラクタ関数を使わずに、プロトタイプから継承できます。

すべてのオブジェクトは、プロトタイプを元に作成されます。リテラル表記法やnew Object()であれば、デフォルトで存在するObject.prototypeです(Objectがコンストラクタ関数)。

コンストラクタ関数やObject.create()を使った場合でも、そのプロトタイプのプロトタイプはObject.prototypeです。このようなつながりを、プロトタイプチェーンと呼びます。

プロトタイプチェーンをさかのぼって、継承が行われます。継承によって、各オプジェクトごとにプロパティやメソッドを定義しなくても、プロトタイプで定義するだけでよくなります。詳細は、プロトタイプと継承をご参照ください。