JavaScript オブジェクト

❮ 前章へ 次章へ ❯

実生活上のオブジェクト、プロパティとメソッド

実生活において、車はオブジェクトです。

車には、重量や色のようなプロパティと、始動や停止のようなメソッドがあります：

オブジェクト プロパティ メソッド

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

すべての車は、同じプロパティを持っていますが、プロパティの値は車により異なります。

すべての車は、同じメソッドを持っていますが、メソッドは異なった時間に実行されます。

JavaScript のオブジェクト

JavaScript 変数は、データ値のコンテナであることを既に学びました。

下のコードは、car と言う名前の変数に単一の値（フィアット）を割り当てています：

var car = "Fiat";
Try it Yourself ❯

オブジェクトも変数です。しかし、オブジェクトには多くの値を含めることができます。

下のコードは、car と言う名前の変数に多くの値（Fiat, 500, white）を割り当てています：

var car = {type:"Fiat", model:"500", color:"white"};
Try it Yourself ❯

値は、名前:値 のペアで記述します (名前と値はコロンで区切ります）。

JavaScript オブジェクトは、名前付きの値のコンテナです。

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

名前:値のペア（JavaScript オブジェクトにおける）は、プロパティと呼ばれます。

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

プロパティ プロパティ値
firstName John
lastName Doe
age 50
eyeColor blue

オブジェクトのメソッド

メソッドは、オブジェクト上で実行できるアクションです。

メソッドは、関数定義としてプロパティに格納されます。

プロパティ プロパティ値
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

JavaScript オブジェクトは、名前付きの値（プロパティとも言う）とメソッドのコンテナです。

オブジェクトの定義

オブジェクトリテラルによって、JavaScript オブジェクトを定義（作成）します：

例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Try it Yourself ❯

スペースや改行は重要でありません。オブジェクト定義は複数行に分けて記述することができます：

例

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
Try it Yourself ❯

オブジェクトプロパティへのアクセス

次の2つの方法で、オブジェクトのプロパティにアクセスすることができます：

objectName.propertyName

または

objectName["propertyName"]

例1

person.lastName;
Try it Yourself ❯

例2

person["lastName"];
Try it Yourself ❯

オブジェクトメソッドへのアクセス

次の構文によりオブジェクトのメソッドにアクセスします：

objectName.methodName()

例

name = person.fullName();
Try it Yourself ❯

() なしで、 fullName プロパティにアクセスした場合、関数定義が返されます：

例

name = person.fullName;
Try it Yourself ❯

オブジェクトとして、文字列、数値、およびブール値を宣言しないでください！

JavaScript 変数を、キーワード "new" で宣言した場合、変数はオブジェクトとして作成されます：

var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

文字列、数値、およびブールオブジェクトを回避してください。これは、コードを複雑にするので、実行速度が遅くなります。

このチュートリアルの後段で、オブジェクトの詳細を学習します。

練習問題で自分をテストしてください！

Exercise 1 ❯   Exercise 2 ❯   Exercise 3 ❯


❮ 前章へ 次章へ ❯