JavaScript オブジェクトを作成するサンプル

JavaScriptのオブジェクトを作成するサンプルです。

目次

リテラルでオブジェクトを作成するサンプル

リテラルでオブジェクトを作成するサンプルです。

<script>

const a = {
	color1:"red",
	color2:"blue",
	getColor1:function(){
		return "yellow";
	}
}

console.log(a.color1); //red
console.log(a.color2); //blue
console.log(a.getColor1()); //yellow

</script>

3-9行目は、リテラルでオブジェクトを作成しています。
4,5行目は、変数です。コロン(:)の左側が変数名で右側が値です。
6行目は、メソッドです。7行目がメソッドの内容です。
11-13行目は、それぞれ変数とメソッドを呼び出しています。

構文は、プロパティ名(キー)と値を波括弧( { } )でくくる連想配列と同じです。
JavaScript 連想配列のサンプル

 

Object.create()のサンプル

Object.create()のサンプルです。

<script>

const a = {
	color1:"red",
	color2:"blue",
	getColor1:function(){
		return "yellow";
	}
}

const b = Object.create(a);

console.log(b.color1); //red
console.log(b.color2); //blue
console.log(b.getColor1()); //yellow

b.color1 = "オレンジ";

console.log(a.color1); //red
console.log(b.color1); //オレンジ

</script>

3-9行目は、Object.create()のサンプルで使用するためリテラルでオブジェクトを作成しています。
11行目は、上記で作成したオブジェクトをObject.create()で作成しています。
17行目は、作成されたオブジェクトの変数を更新しています。
19,20行目は、元のオブジェクトと作成されたオブジェクトは別であることを示しています。

以下は、MDNのObject.create()のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create

 

Objectオブジェクトとnew演算子でオブジェクトを作成するサンプル

Objectオブジェクトとnew演算子でオブジェクトを作成するサンプルです。

<script>

const a = new Object();

a.color1 = "red";
a.color2 = "blue";
a.getColor1 = function(){
	return "yellow";
}

console.log(a.color1); //red
console.log(a.color2); //blue
console.log(a.getColor1()); //yellow

</script>

3行目は、Objectオブジェクトとnew演算子でオブジェクトを作成しています。
5-9行目は、オブジェクトに変数とメソッドを追加しています。

 

コンストラクタを作成しnew演算子でオブジェクトを作成するサンプル

コンストラクタを作成しnew演算子でオブジェクトを作成するサンプルです。

<script>

function a(){
	this.color1 = "red";
	this.color2 = "blue";
	this.getColor1 = function(){
		return "yellow";
	}
}

const b = new a();

console.log(b.color1); //red
console.log(b.color2); //blue
console.log(b.getColor1()); //yellow

</script>

3-9行目は、コンストラクタを作成しています。
11行目のnew演算子に上記で作成したコンストラクタを指定してオブジェクトを作成しています。

関連の記事

JavaScript prototypeでメソッドを追加するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)
JavaScript 連想配列のサンプル

△上に戻る