JavaScript 入門 | オブジェクト (object) | オブジェクトプロパティとメソッド

オブジェクトプロパティ (property)

すべての JavaScript オブジェクトは、Object オブジェクトと Object.prototype オブジェクトのすべてのプロパティを継承する。
prototype プロパティを利用すると、現在存在するプロトタイプに新しいプロパティやメソッドを簡単に追加できる。

オブジェクトメソッド (method)

すべての JavaScript オブジェクトは、Object オブジェクトと Object.prototype オブジェクトのすべてのプロパティとメソッドを継承する。
よく使用される代表的なオブジェクトメソッドは次のとおりである。

hasOwnProperty()
propertyIsEnumerable()
isPrototypeOf()
isExtensible()
toString()
valueOf()

hasOwnProperty() メソッド

hasOwnProperty() メソッドは、特定のプロパティがそのオブジェクトに存在するかを検査する。
そのオブジェクトで直接宣言されたプロパティだけを検査し、同じ名前のプロパティでも継承されたプロパティは false を返す。

function Dog(color, name, age, family) {
    this.color = color;
    this.name = name;
    this.age = age;
    this.family = family;
    this.breed = function() {
        return this.color + " " + this.family;
    }
}
var myDog = new Dog("黒色", "クマ", 3, "ブルドッグ");
myDog.hasOwnProperty("color"); // true
myDog.hasOwnProperty("breed"); // true
myDog.hasOwnProperty("class"); // 継承されたプロパティなので false を返す。

propertyIsEnumerable() メソッド

propertyIsEnumerable() メソッドは、特定のプロパティがそのオブジェクトに存在し、列挙可能なプロパティかどうかを検査する。
つまり、このメソッドは hasOwnProperty() メソッドの結果が true であり、同時に列挙可能なプロパティかどうかを検査する。

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("白色", "マル", 1);
// color プロパティの enumerable 属性を false に設定する。
Object.defineProperty(myDog, 'color', { enumerable : false} );

document.write(myDog.propertyIsEnumerable("color") + "<br>"); // false
document.write(myDog.propertyIsEnumerable("name") + "<br>");  // true
document.write(myDog.propertyIsEnumerable("age"));            // true

列挙可能なプロパティとは、内部的に enumerable フラグが true に設定されたプロパティを意味する。
このようなプロパティは for / in 文でアクセスできる。

Object.defineProperty() メソッドは ECMAScript 5 から追加された、オブジェクトにプロパティを追加するメソッドである。
このとき、追加するプロパティの属性も設定できる。

isPrototypeOf() メソッド

isPrototypeOf() メソッドは、特定オブジェクトのプロトタイプチェーンに現在のオブジェクトが存在するかを検査する。

var day = new Date(); // Date オブジェクトを作成する。
// オブジェクト day のプロトタイプが Date.prototype かどうかを検査する。
document.write(Date.prototype.isPrototypeOf(day));          // true
document.write(Date.prototype.isPrototypeOf(new String())); // false

isExtensible() メソッド

isExtensible() メソッドは、オブジェクトに新しいプロパティを追加できるかどうかを返す。

JavaScript では、すべてのオブジェクトに基本的に新しいプロパティを追加できる。しかし preventExtensions() メソッドを使用して、そのオブジェクトに新しいプロパティを追加できないように設定できる。

var day = new Date(); // Date オブジェクトを作成する。
// オブジェクト day に新しいプロパティを追加できるか検査する。
document.write(Object.isExtensible(day) + "<br>"); // true

// そのオブジェクトに新しいプロパティを追加できないように設定する。
var myDay = Object.preventExtensions(day);
document.write(Object.isExtensible(day));          // false

toString() メソッド

toString() メソッドは、このメソッドを呼び出したオブジェクトの値を文字列として返す。

var arr = [10, "文字列", true]; // 配列
var bool = false;               // boolean
function func() { return 0; }   // 関数
arr.toString();  // 10,文字列,true
bool.toString(); // false
func.toString(); // 関数のソースコードがすべて文字列として返される。

toString() メソッドは引数を受け取らない。

valueOf() メソッド

valueOf() メソッドは、特定オブジェクトのプリミティブ型 (primitive type) の値を返す。
JavaScript では、プリミティブ型の値が期待される場所でオブジェクトが使用されると、内部的にこのメソッドを呼び出して処理する。
もしオブジェクトがプリミティブ型の値を持っていなければ、このメソッドはオブジェクト自身を返す。

function func(n) {
    this.number = n;
}
myFunc = new func(4);
document.write(myFunc + 5); // ① : [object Object]5

func.prototype.valueOf = function() { // valueOf() メソッドを定義する。
    return this.number;
}
document.write(myFunc + 5); // ② : 9

上の例の ① 部分では、算術演算のために number 型の値が期待される場所で myFunc オブジェクトが使用される。したがって JavaScript は内部的にそのオブジェクトの valueOf() メソッドを呼び出す。しかし、このオブジェクトの valueOf() メソッドはまだ定義されていないため、そのオブジェクト自身を返す。そのため、算術演算ではなく文字列結合演算が行われる。

その後の例では、prototype プロパティを利用して valueOf() メソッドを定義している。したがって ② 部分では、内部的に呼び出された valueOf() メソッドがそのオブジェクトの number プロパティ値を返す。そのため、正常に算術演算が行われる。

getter と setter メソッドの定義

getter と setter メソッドで定義されたプロパティは、単純な値を持つデータプロパティとは異なり、アクセサープロパティと呼ばれる。

getter メソッドは、特定プロパティの値を取得するためのメソッドである。
JavaScript はオブジェクトのプロパティ値へアクセスするとき、getter メソッドに引数を渡さずに呼び出す。

setter メソッドは、特定プロパティの値を設定するためのメソッドである。
JavaScript はオブジェクトのプロパティ値を変更するとき、setter メソッドに代入したい値を引数として渡して呼び出す。

次の例は getter メソッドを定義する例である。

var gildong = { age: 18 };
document.write(gildong.age + "<br>"); // 18

Object.defineProperty(gildong, "americanAge", { get: function() { return this.age - 1; } });
document.write(gildong.americanAge); // 17

上の例では、gildong オブジェクトに americanAge というプロパティを追加するとき、get キーワードを使って getter メソッドを定義している。
したがって、そのプロパティを参照しようとすると、内部的に事前定義された getter メソッドが自動的に呼び出される。

次の例は setter メソッドを定義する例である。

var gildong = { age: 18 };
gildong.age = 20;
document.write(gildong.age + "<br>"); // 20

Object.defineProperty(gildong, "changeAge", { set: function(n) { this.age = this.age - n; } });
gildong.changeAge = 5;
document.write(gildong.age); // 15

上の例では、gildong オブジェクトに changeAge というプロパティを追加するとき、set キーワードを使って setter メソッドを定義している。
したがって、そのプロパティの値を変更しようとすると、内部的に事前定義された setter メソッドが自動的に呼び出される。

getter と setter メソッドをサポートする主要 Web ブラウザーのバージョンは次のとおりである。

メソッド	ie	chrome	firefox	safari	opera
getter、setter メソッド	9.0	1.0	2.0	3.0	9.5