JavaScript - オブジェクト
公開日:2018-11-29 更新日:2019-05-13
1. 概要
オブジェクトの使い方です。
JavaScript では Object 以外に、配列、連想配列、関数も同様に扱えます。
JavaScript では Object 以外に、配列、連想配列、関数も同様に扱えます。
2.1 メソッドとプロパティの追加
JavaScript のオブジェクトは、動的にメソッドとプロパティを追加することができます。
オブジェクトに add メソッドを追加して、add メソッドの実行結果を result プロパティから取得します。
オブジェクトに 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() { } ); //関数
実行結果
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 の際に実行されるため、コンストラクタとして使用することができます。
配列を生成すると、最初から indexOf() や shift() など、様々なメソッドが最初から使えますが、
これは、配列の 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 にメソッド追加されているためです。