JavaScript オブジェクトのプロパティ
JavaScript オブジェクトのプロパティとは？
JavaScript のオブジェクトが、あるキーを元に公開するデータや値のことをプロパティ (property) といいます。例えば、personオブジェクトを次のように作ったとします。
let person = {
name: 'Mike',
age: 20,
};
このとき、personオブジェクトが持つ名前nameや年齢ageの情報、つまりプロパティには、 それぞれperson.name、person.ageとしてアクセスできます。
console.log(person.name); // Mike
console.log(person.age); // 20
このとき nameやageの部分を、プロパティのキーといいます。
オブジェクトにドット .に続けてキーを指定することで、プロパティにアクセスできる他、次の例のようにブラケット[]にキーを指定することで、プロパティにアクセスできます。
console.log(person['name']);
console.log(person['age']);またプロパティには、関数を設定することもできます。
let person = {
name: 'Mike',
age: 20,
greet: function() {
console.log(`Hi there! I\'m ${this.name}.`);
}
};
console.log(person['name']); // 'Mike'
console.log(person['age']); // 20
person.greet(); // Hi there! I'm Mike.
オブジェクトに関連付けされた関数のことを特に、メソッド (method) と呼ぶ場合が多いです。関数と呼んでも、メソッドと呼んでも、実体はどちらも関数オブジェクトです。使われる状況が異なるだけです。
この例ではgreetメソッドの中では、thisキーワードを使って、オブジェクト自身を参照しています。 このためthis.nameとすることで、同じオブジェクトのnameプロパティの値が取得できています。
このように、言い換えれば JavaScript のオブジェクトはプロパティのコレクションのことである、とも言えます。
プロパティの種類
プロパティは大きく分けると、「データプロパティ」(data property) と「アクセサ・プロパティ」(accessor property) の２つに分類することができます。
データ・プロパティ
データプロパティは、いわゆる「普通のプロパティ」です。
単純な数字や、文字列などのプリミティブ値 (primitive value) や関数オブジェクトを含む、オブジェクト全般を値として持ちます。
アクセサ・プロパティ
アクセサ・プロパティはアクセサメソッドを使って実装されるプロパティです。
これがどんなものであるか喩えて言えば、データベース・システムの「計算列」に似ています。 データベースでは、ある列の値を使って計算を行い、その結果を表示する列を「計算列」 (computed column) などと呼びます。計算列それ自体はデータを格納しているわけではありません。他の一つ以上のカラムの情報からデータを表示します。
アクセサプロパティもそれ自身がデータを持つのではなく、他のプロパティの情報を使って返すデータを作ります。
アクセサメソッドは、プロパティの属性 (attribute) として設定できます。
例として、円 (circle) を表すオブジェクトを考えてみましょう。 円オブジェクトのプロパティとして、半径 (radius) をひとつ設定します。
let circle = {
radius: 2,
};
そこで、面積を計算して返すようなプロパティを作りたいとします。円の面積は半径を使って、 πr2 で計算できます。
そこで、areaという名前のプロパティのプロパティの属性として、get()アクセサメソッドを設定することができます。
Object.defineProperty(circle, 'area', {
enumerable: true,
get: function() {
return Math.PI * Math.pow(this.radius, 2);
}
});
console.log(circle.area); // 12.5663370614359172
()を付けないで、circle.area という形式で、面積の計算結果を取得できていますね。パッとみただけでは、 データプロパティかアクセサプロパティかどうかは区別がつきません。
さらに、オブジェクトリテラルを使うと、同じ内容が次のように、よりシンプルに書けます。
let circle = {
radius: 2,
get area() {
return Math.PI * Math.pow(this.radius, 2);
}
};
console.log(circle.area); // 12.5663370614359172
こうして作成される形式のプロパティのことを、アクセサプロパティといいます。