JavaScript - オブジェクト

公開日:2018-11-29 更新日:2019-05-13

1. 概要

オブジェクトの使い方です。
JavaScript では Object 以外に、配列、連想配列、関数も同様に扱えます。

2.1 メソッドとプロパティの追加

JavaScript のオブジェクトは、動的にメソッドとプロパティを追加することができます。
オブジェクトに add メソッドを追加して、add メソッドの実行結果を result プロパティから取得します。

//以下4つは全て同じように動作します
var obj = new Object;     //オブジェクト
//var obj = [1, 2, 3];      //配列
//var obj = {value : 20};   //連想配列
//var obj = function() { }; //関数

//オブジェクトに add() メソッドの追加
obj.add = function (value1, value2) {
	this.result = value1 + value2; //結果を result プロパティに設定
}

//メソッドの実行
obj.add(1, 2);

//結果出力
console.log( obj.result ); //3

2.2 メンバー

オブジェクト、配列、連想配列、関数は、全て同様に扱えますが、
最初から保持しているメンバーは異なります。

function getType(obj) {
	console.log( obj );
	console.log( typeof(obj) ); //オブジェクト
	console.log("-----");
}

getType( new Object ); //オブジェクト
getType( [1, 2, 3] );          //配列
getType( {value : 20} );       //連想配列
getType( function() { } );     //関数

実行結果
画像1

2.3 関数をクラスのようにして使う

関数をクラスのように new すると、オブジェクトを生成できます。

var Calc = function () {
	//new された際に実行されます
	//プロパティとメソッドを動的に追加します
	this.value = 0;
	this.add = function (value2) {
		this.value = this.value + value2;
		return this;
	}
}

var obj = new Calc(); //Calc の型は関数ですが、new でオブジェクト化できます
obj.add(1);
obj.add(2);
console.log( obj.value ); //3

obj = new Calc(); 
console.log( obj.add(2).add(3).value ); //5

2.4 prototype によるプロパティとメソッドの定義

prototype オブジェクトにプロパティとメソッドを追加すると、
new した際に生成されるオブジェクトにも、同じプロパティとメソッドが追加されます。
また、関数本体は、new の際に実行されるため、コンストラクタとして使用することができます。

var Calc = function () {
	console.log("コンストラクタ");
	this.result = 0;
}

Calc.prototype.value = 0;
Calc.prototype.add = function (value1, value2) {
	this.result = value1 + value2;
}

var obj1 = new Calc();
obj1.add(1, 2);
console.log( obj1.result ); //3

var obj2 = new Calc();
obj2.add(3, 4);
console.log( obj2.result ); //7
コンストラクタ
3
コンストラクタ
7

配列を生成すると、最初から indexOf() や shift() など、様々なメソッドが最初から使えますが、
これは、配列の prototype にメソッド追加されているためです。