JavaScript において、オブジェクトは王様です。オブジェクトを理解することは、JavaScript を理解することです。
JavaScript では、ほとんど「すべて」がオブジェクトです。
JavaScript 値は、プリミティブ値を除き、全てがオブジェクトです。
プリミティブ値は、プロパティとメソッドのない値です。
プリミティブ・データ型は、プリミティブ値を持つデータです。
JavaScript には、5 つのタイプのプリミティブ・データ型があります:
プリミティブ値は不変です(ハードコーディングされているため変更できません)。
x = 3.14 の場合、x の値を変更することができますが、3.14 の値を変更することはできません。
値 | 型 | コメント |
---|---|---|
"Hello" | string | "Hello" は、常に "Hello" |
3.14 | number | 3.14 は、常に 3.14 |
true | boolean | true は、常に true |
false | boolean | false は、常に false |
null | null (object) | null は、常に null |
undefined | undefined | undefined は、常に undefined |
JavaScript 変数には、1つの値を格納することができます:
オブジェクトも変数です。しかし、オブジェクトには多くの値を格納することができます。
値は、名前 : 値 のペアで記述します (名前と値はコロンで区切ります)。
JavaScript オブジェクトは、名前付き値のコレクションです。
JavaScript オブジェクトにおける名前付き値は、プロパティと呼ばれます。
プロパティ | 値 |
---|---|
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 を使用すると、独自のオブジェクトの定義と作成ができます。
新しいオブジェクトを作成するには、さまざまな方法があります:
ECMAScript 5 において、オブジェクトは関数 Object.create() を使用して作成することもできます。
この方法が、JavaScript オブジェクトを作成するための最も簡単な方法です。
オブジェクトリテラルを使用すると、1つの文でオブジェクトの定義と作成の両方を行うことができます。
オブジェクトリテラは、波括弧 {} の中に name:value のペア(例えば、age:50)をリストしたものです。
次の例は、4つのプロパティを持つ、新しい JavaScript オブジェクトを作成します:
スペースや改行は重要ではありません。オブジェクトの定義は、複数行にまたがって記述することができます:
次の例も、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");
JavaScript において、this と呼ばれる物は、JavaScript コードを「所有する」オブジェクトです。
関数で使用するときの this の値は、関数を「所有する」オブジェクトです。
オブジェクト使用するときの this の値は、オブジェクト自身です。
オブジェクトコンストラクタの this キーワードには値がありません。 新しいオブジェクトの単なる代用品です。
this の値は、コンストラクタを使用してオブジェクトを作成したときに新しいオブジェクトになります。コ
this は、変数ではないことに注意してください。 これはキーワードであって、this の値は変更できません。
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 »
通常、文字列はプリミティブとして作成します:var firstName = "John"
しかし、new キーワードを使用して文字列をオブジェクトとして作成することもできます:var firstName = new String("John")
なぜ文字列をオブジェクトして作成しなのかは、JS 文字列をご覧ください。
通常、数値はプリミティブとして作成します:var x = 123
しかし、new キーワードを使用して数値をオブジェクトとして作成することもできます:var x = new Number(123)
なぜ数値をオブジェクトして作成しなのかは、JS 数値をご覧ください。
通常、ブール値はプリミティブとして作成します:var x = false
しかし、new キーワードを使用してブール値をオブジェクトとして作成することもできます:var x = new Boolean(false)
なぜブール値をオブジェクトして作成しなのかは、JS ブール値をご覧ください。
オブジェクトは変更可能:値ではなくアドレス参照です。
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 オブジェクトのみです。