JavaScript Objects

❮ 前章へ 次章へ ❯

JavaScript において、オブジェクトは王様です。オブジェクトを理解することは、JavaScript を理解することです。


JavaScript では、ほとんど「すべて」がオブジェクトです。

JavaScript 値は、プリミティブ値を除き、全てがオブジェクトです。


JavaScript プリミティブ

プリミティブ値は、プロパティとメソッドのない値です。

プリミティブ・データ型は、プリミティブ値を持つデータです。

JavaScript には、5 つのタイプのプリミティブ・データ型があります:

プリミティブ値は不変です(ハードコーディングされているため変更できません)。

x = 3.14 の場合、x の値を変更することができますが、3.14 の値を変更することはできません。

コメント
"Hello"string"Hello" は、常に "Hello"
3.14number3.14 は、常に 3.14
truebooleantrue は、常に true
falsebooleanfalse は、常に false
nullnull (object)null は、常に null
undefinedundefinedundefined は、常に undefined

オブジェクトは変数を含む変数です

JavaScript 変数には、1つの値を格納することができます:

var person = "John Doe";
Try it Yourself »

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

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

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

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


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

JavaScript オブジェクトにおける名前付き値は、プロパティと呼ばれます。

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

名前と値のペアとして書かれたオブジェクトは、次のものと類似しています:


Object メソッド

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

オブジェクト・プロパティは、プリミティブ値にも、その他のオブジェクトと関数にもすることができます。

オブジェクト・メソッドは、関数定義を含むオブジェクトのプロパティです。

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

JavaScript オブジェクトは、プロパティとメソッドと呼ばれる名前付き値のコンテナです。

メソッドの詳細については、次の章で学習します。


JavaScript オブジェクトの作成

JavaScript を使用すると、独自のオブジェクトの定義と作成ができます。

新しいオブジェクトを作成するには、さまざまな方法があります:

ECMAScript 5 において、オブジェクトは関数 Object.create() を使用して作成することもできます。


オブジェクト・リテラルを使用する

この方法が、JavaScript オブジェクトを作成するための最も簡単な方法です。

オブジェクトリテラルを使用すると、1つの文でオブジェクトの定義と作成の両方を行うことができます。

オブジェクトリテラは、波括弧 {} の中に name:value のペア(例えば、age:50)をリストしたものです。

次の例は、4つのプロパティを持つ、新しい 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 »

JavaScript のキーワード new を使用する

次の例も、4つのプロパティを持つ新しい JavaScript オブジェクトを作成します:

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Try it Yourself »

上の2つの例は、全く同じになります。new Object() を使用する必要はありません。
シンプルさや、読みやすさと実行速度のためには、最初のもの(オブジェクトリテラルメソッド)を使用してください。


オブジェクト・コンストラクタを使用する

上の例は、多くの状況において制限され、単一のオブジェクトを作成するだけです。

時に、1つの型のオブジェクトを多数作成するために使用可能な、「オブジェクト型」が必要な場合もあります。

「オブジェクト型」を作成するための標準的な方法は、オブジェクトのコンストラクタ関数を使用することです:

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
Try it yourself »

上の関数(person)は、オブジェクトのコンストラクタです。

オブジェクトのコンストラクタを作成したら、同じ型の新しいオブジェクトを作成することができます:

var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

this キーワード

JavaScript において、this と呼ばれる物は、JavaScript コードを「所有する」オブジェクトです。

関数で使用するときの this の値は、関数を「所有する」オブジェクトです。

オブジェクト使用するときの this の値は、オブジェクト自身です。

オブジェクトコンストラクタの this キーワードには値がありません。 新しいオブジェクトの単なる代用品です。

this の値は、コンストラクタを使用してオブジェクトを作成したときに新しいオブジェクトになります。コ

this は、変数ではないことに注意してください。 これはキーワードであって、this の値は変更できません。


組込み JavaScript コンストラクタ

JavaScript には、ネイティブオブジェクト用の組込みコンストラクタがあります:

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object
Try it Yourself »

Math() オブジェクトがリストにありません。Math はグローバルオブジェクトです。 new キーワードは、Math では使用することができません。


ご存知ですか?

これまで見てきたように、JavaScript にはプリミティブデータ型 String、Number、Boolean のオブジェクト版があります。

複雑なオブジェクトを作成する理由はありません。プリミティブ値の方が、はるかに高速に実行されます。

new Array() を使用する理由はありません。代わりに配列リテラルを使用してください:[]

new RegExp() を使用する理由はありません。代わりにパターンリテラルを使用してください:/()/

new Function() を使用する理由はありません。代わりに関数式を使用してください:function () {}.

new Object() を使用する理由はありません。代わりにオブジェクトを使用してください:{}

var x1 = {};            // new object
var x2 = "";            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = /()/           // new regexp object
var x7 = function(){};  // new function object
Try it Yourself »

String オブジェクト

通常、文字列はプリミティブとして作成します:var firstName = "John"

しかし、new キーワードを使用して文字列をオブジェクトとして作成することもできます:var firstName = new String("John")

なぜ文字列をオブジェクトして作成しなのかは、JS 文字列をご覧ください。


Number オブジェクト

通常、数値はプリミティブとして作成します:var x = 123

しかし、new キーワードを使用して数値をオブジェクトとして作成することもできます:var x = new Number(123)

なぜ数値をオブジェクトして作成しなのかは、JS 数値をご覧ください。


Boolean オブジェクト

通常、ブール値はプリミティブとして作成します:var x = false

しかし、new キーワードを使用してブール値をオブジェクトとして作成することもできます:var x = new Boolean(false)

なぜブール値をオブジェクトして作成しなのかは、JS ブール値をご覧ください。


JavaScript オブジェクトは変更可能です

オブジェクトは変更可能:値ではなくアドレス参照です。

person がオブジェクトの場合、次の文はpersonのコピーを作成しません:

var x = person;  // This will not create a copy of person.

オブジェクト x は、person のコピーではありません 。それは、person です。 x と person の両方は同じオブジェクトです。

x と person は同じオブジェクトなので、x を変更すると person も変ります。

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

var x = person;
x.age = 10;           // This will change both x.age and person.age
Try it Yourself »

注:JavaScript 変数は変更できません。JavaScript オブジェクトのみです。


❮ 前章へ 次章へ ❯