プロパティには3つの種類があります。

JavaScriptのオブジェクトリテラルを使用すると、プレーンオブジェクト（Objectの直接インスタンス）を直接作成できます。次のコードでは、オブジェクトリテラルを使用して、オブジェクトを変数janeに割り当てています。オブジェクトには、nameとdescribeの2つのプロパティがあります。describeはメソッドです。

var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;  // (1)
    },  // (2)
};

オブジェクトは、文字列から値への単なるマップであるという印象を受けるかもしれません。しかし、オブジェクトはそれ以上のものです。オブジェクトは真の汎用オブジェクトです。たとえば、オブジェクト間で継承を使用したり（「第2層：オブジェクト間のプロトタイプ関係」を参照）、オブジェクトが変更されないように保護することができます。オブジェクトを直接作成する機能は、JavaScriptの傑出した機能の1つです。具体的なオブジェクト（クラスは不要！）から始めて、後で抽象概念を導入することができます。たとえば、オブジェクトのファクトリーであるコンストラクター（「第3層：コンストラクター—インスタンスのファクトリー」で説明）は、他の言語のクラスとほぼ同様です。

ドット演算子は、プロパティにアクセスするためのコンパクトな構文を提供します。プロパティのキーは識別子である必要があります（「有効な識別子」を参照）。任意の名前を持つプロパティを読み書きする場合は、角括弧演算子を使用する必要があります（「角括弧演算子（[]）：計算されたキーによるプロパティへのアクセス」を参照）。

このセクションの例では、次のオブジェクトを使用します。

var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;
    }
};

> jane.name  // get property `name`
'Jane'
> jane.describe  // get property `describe`
[Function]

> jane.unknownProperty
undefined

> jane.describe()  // call method `describe`
'Person named Jane'

> jane.name = 'John';  // set property `name`
> jane.describe()
'Person named John'

> var obj = { hello: 'world' };
> delete obj.hello
true
> obj.hello
undefined

> var obj = { foo: 'a', bar: 'b' };

> obj.foo = undefined;
> Object.keys(obj)
[ 'foo', 'bar' ]

> delete obj.foo
true
> Object.keys(obj)
[ 'bar' ]

var obj = {};
Object.defineProperty(obj, 'canBeDeleted', {
    value: 123,
    configurable: true
});
Object.defineProperty(obj, 'cannotBeDeleted', {
    value: 456,
    configurable: false
});

> delete obj.cannotBeDeleted
false

> delete obj.doesNotExist
true
> delete obj.canBeDeleted
true

> delete obj.toString
true
> obj.toString // still there
[Function: toString]

予約語（varやfunctionなど）を変数名として使用することはできませんが、プロパティキーとして使用することはできます。

> var obj = { var: 'a', function: 'b' };
> obj.var
'a'
> obj.function
'b'

数値はオブジェクトリテラルでプロパティキーとして使用できますが、文字列として解釈されます。ドット演算子は、キーが識別子であるプロパティにのみアクセスできます。したがって、キーが数値であるプロパティにアクセスするには、角括弧演算子（次の例に示します）が必要です。

> var obj = { 0.7: 'abc' };
> Object.keys(obj)
[ '0.7' ]
> obj['0.7']
'abc'

オブジェクトリテラルでは、任意の文字列（識別子でも数値でもない）をプロパティキーとして使用することもできますが、引用符で囲む必要があります。この場合も、プロパティ値にアクセスするには角括弧演算子が必要です。

> var obj = { 'not an identifier': 123 };
> Object.keys(obj)
[ 'not an identifier' ]
> obj['not an identifier']
123

ドット演算子は固定プロパティキーを使用しますが、角括弧演算子を使用すると、式を介してプロパティを参照できます。

> var obj = { someProperty: 'abc' };

> obj['some' + 'Property']
'abc'

> var propKey = 'someProperty';
> obj[propKey]
'abc'

> var obj = { 'not an identifier': 123 };
> obj['not an identifier']
123

> var obj = { '6': 'bar' };
> obj[3+3]  // key: the string '6'
'bar'

> var obj = { myMethod: function () { return true } };
> obj['myMethod']()
true

> var obj = {};
> obj['anotherProperty'] = 'def';
> obj.anotherProperty
'def'

> var obj = { 'not an identifier': 1, prop: 2 };
> Object.keys(obj)
[ 'not an identifier', 'prop' ]
> delete obj['not an identifier']
true
> Object.keys(obj)
[ 'prop' ]

関数もオブジェクトであることを忘れないでください。したがって、各関数は独自のメソッドを持っています。このセクションでは、関数呼び出しを支援する3つのメソッドを紹介します。これらの3つのメソッドは、関数呼び出しのいくつかの落とし穴を回避するために、以下のセクションで使用されます。以下の例はすべて、次のオブジェクト jane を参照しています。

var jane = {
    name: 'Jane',
    sayHelloTo: function (otherName) {
        'use strict';
        console.log(this.name+' says hello to '+otherName);
    }
};

jane.sayHelloTo('Tarzan');

jane.sayHelloTo.call(jane, 'Tarzan');

var func = jane.sayHelloTo;
func.call(jane, 'Tarzan');

jane.sayHelloTo('Tarzan');

jane.sayHelloTo.apply(jane, ['Tarzan']);

var func = jane.sayHelloTo;
func.apply(jane, ['Tarzan']);

function func() {
    console.log('this: '+this);
    console.log('arguments: '+Array.prototype.slice.call(arguments));
}
var bound = func.bind('abc', 1, 2);

> bound(3)
this: abc
arguments: 1,2,3

jane.sayHelloTo('Tarzan');

var func1 = jane.sayHelloTo.bind(jane);
func1('Tarzan');

var func2 = jane.sayHelloTo.bind(jane, 'Tarzan');
func2();

JavaScript に配列を実際のパラメーターに変換する三点リーダー演算子 (...) があると仮定しましょう。そのような演算子を使用すると、配列で Math.max() (その他の関数を参照)を使用できるようになります。 その場合、次の2つの式は同等になります。

Math.max(...[13, 7, 30])
Math.max(13, 7, 30)

関数については、apply() を介して三点リーダー演算子の効果を実現できます。

> Math.max.apply(null, [13, 7, 30])
30

三点リーダー演算子は、コンストラクターにも理にかなっています。

new Date(...[2011, 11, 24]) // Christmas Eve 2011

残念ながら、ここでは apply() は機能しません。関数またはメソッドの呼び出しには役立ちますが、コンストラクターの呼び出しには役立たないためです。

if (!Function.prototype.construct) {
    Function.prototype.construct = function(argArray) {
        if (! Array.isArray(argArray)) {
            throw new TypeError("Argument must be an array");
        }
        var constr = this;
        var nullaryFunc = Function.prototype.bind.apply(
            constr, [null].concat(argArray));
        return new nullaryFunc();
    };
}

> Date.construct([2011, 11, 24])
Sat Dec 24 2011 00:00:00 GMT+0100 (CET)

Function.prototype.construct = function(argArray) {
    var constr = this;
    var inst = Object.create(constr.prototype);
    var result = constr.apply(inst, argArray); // (1)

    // Check: did the constructor return an object
    // and prevent `this` from being the result?
    return result ? result : inst;
};

オブジェクトからメソッドを抽出すると、再び真の関数になります。オブジェクトとの接続が切断され、通常は正常に機能しなくなります。たとえば、次のオブジェクト counter を見てみましょう。

var counter = {
    count: 0,
    inc: function () {
        this.count++;
    }
}

inc を抽出して、（関数として！）呼び出すと失敗します。

> var func = counter.inc;
> func()
> counter.count  // didn’t work
0

説明は次のとおりです。counter.inc の値を関数として呼び出しました。したがって、this はグローバルオブジェクトであり、window.count++ を実行しました。window.count は存在せず、undefined です。 ++ 演算子を適用すると、NaN に設定されます。

> count  // global variable
NaN

> counter.inc = function () { 'use strict'; this.count++ };
> var func2 = counter.inc;
> func2()
TypeError: Cannot read property 'count' of undefined

> var func3 = counter.inc.bind(counter);
> func3()
> counter.count  // it worked!
1

function callIt(callback) {
    callback();
}

> callIt(counter.inc)
TypeError: Cannot read property 'count' of undefined

> callIt(counter.inc.bind(counter))
> counter.count  // one more than before
2

関数はパラメーター（例：コールバック）になり、関数式を介してインプレースで作成できるため、JavaScriptで関数定義をネストすることがよくあります。メソッドに通常の関数が含まれており、後者の中で前者の this にアクセスしたい場合に問題が発生します。メソッドの this は、通常の関数の this によってシャドウされるためです（通常の関数の this には独自の this を使用する理由はありません）。次の例では、(1)の関数が (2) でメソッドの this にアクセスしようとしています。

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  // (1)
                console.log(this.name+' knows '+friend);  // (2)
            }
        );
    }
};

これは失敗します。(1) の関数には独自の this があり、ここでは undefined であるためです。

> obj.loop();
TypeError: Cannot read property 'name' of undefined

この問題を回避する方法は3つあります。

loop: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name+' knows '+friend);
    });
}

> obj.loop();
Jane knows Tarzan
Jane knows Cheeta

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }.bind(this));  // (1)
}

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }, this);
}

obj はプロパティ describe を継承します。オブジェクト自体がそのプロパティを持っているかのようにアクセスできます。

> obj.describe
[Function]

obj を介してプロパティにアクセスするたびに、JavaScriptはそのオブジェクトで検索を開始し、そのプロトタイプ、プロトタイプのプロトタイプなどで続行します。これが、obj.describe を介して proto.describe にアクセスできる理由です。プロトタイプチェーンは、単一のオブジェクトであるかのように動作します。メソッドを呼び出すときに、そのイリュージョンは維持されます。this の値は常に、メソッドの検索が開始されたオブジェクトであり、メソッドが見つかった場所ではありません。これにより、メソッドはプロトタイプチェーンのすべてのプロパティにアクセスできます。たとえば、

> obj.describe()
'name: obj'

describe() の内部では、this は obj になり、メソッドが obj.name にアクセスできるようになります。

プロトタイプチェーンでは、オブジェクト内のプロパティは、後続のオブジェクトにある同じキーを持つプロパティを オーバーライド します。前者のプロパティが最初に見つかります。後者のプロパティは隠され、アクセスできなくなります。例として、obj 内でメソッド proto.describe() をオーバーライドしてみましょう。

> obj.describe = function () { return 'overridden' };
> obj.describe()
'overridden'

これは、クラスベースの言語でのメソッドのオーバーライドの動作と似ています。

プロトタイプは、オブジェクト間でデータを共有するのに最適です。複数のオブジェクトが同じプロトタイプを取得し、そのプロトタイプにすべての共有プロパティが保持されます。例を見てみましょう。オブジェクト jane と tarzan は両方とも同じメソッド describe() を含んでいます。これは、共有を使用することで避けたいものです。

var jane = {
    name: 'Jane',
    describe: function () {
        return 'Person named '+this.name;
    }
};
var tarzan = {
    name: 'Tarzan',
    describe: function () {
        return 'Person named '+this.name;
    }
};

どちらのオブジェクトも人物です。name プロパティは異なりますが、メソッド describe を共有させることができます。これを行うには、PersonProto という共通のプロトタイプを作成し、そこに describe を配置します(図17-2)。

図17-2. オブジェクト jane と tarzan は、プロトタイプ PersonProto を共有し、それによってプロパティ describe を共有する。

次のコードは、プロトタイプ PersonProto を共有するオブジェクト jane と tarzan を作成します。

var PersonProto = {
    describe: function () {
        return 'Person named '+this.name;
    }
};
var jane = {
    [[Prototype]]: PersonProto,
    name: 'Jane'
};
var tarzan = {
    [[Prototype]]: PersonProto,
    name: 'Tarzan'
};

そして、これがそのやり取りです。

> jane.describe()
Person named Jane
> tarzan.describe()
Person named Tarzan

これは一般的なパターンです。データはプロトタイプチェーンの最初のオブジェクトに存在し、メソッドは後続のオブジェクトに存在します。JavaScript のプロトタイプ継承の仕組みは、このパターンをサポートするように設計されています。プロパティの設定はプロトタイプチェーンの最初のオブジェクトのみに影響しますが、プロパティの取得は完全なチェーンを考慮します(設定と削除は自身のプロパティにのみ影響するを参照)。

これまで、JavaScript から内部プロパティ [[Prototype]] にアクセスできると想定してきました。しかし、言語ではそれが許可されていません。代わりに、プロトタイプを読み取るための関数と、指定されたプロトタイプを持つ新しいオブジェクトを作成するための関数があります。

Object.create(proto, propDescObj?)

var PersonProto = {
    describe: function () {
        return 'Person named '+this.name;
    }
};
var jane = Object.create(PersonProto, {
    name: { value: 'Jane', writable: true }
});

> jane.describe()
'Person named Jane'

var jane = Object.create(PersonProto);
jane.name = 'Jane';

Object.getPrototypeOf(obj)

> Object.getPrototypeOf(jane) === PersonProto
true

Object.prototype.isPrototypeOf(obj)

> var A = {};
> var B = Object.create(A);
> var C = Object.create(B);
> A.isPrototypeOf(C)
true
> C.isPrototypeOf(A)
false

function getDefiningObject(obj, propKey) {
    obj = Object(obj); // make sure it’s an object
    while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
        obj = Object.getPrototypeOf(obj);
        // obj is null if we have reached the end
    }
    return obj;
}

一部の JavaScript エンジンには、オブジェクトのプロトタイプを取得および設定するための特別なプロパティ __proto__ があります。これにより、[[Prototype]] への直接アクセスが言語に提供されます。

> var obj = {};

> obj.__proto__ === Object.prototype
true

> obj.__proto__ = Array.prototype
> Object.getPrototypeOf(obj) === Array.prototype
true

__proto__ について知っておくべきことがいくつかあります。

プロパティの取得のみが、オブジェクトの完全なプロトタイプチェーンを考慮します。設定と削除は継承を無視し、自身のプロパティにのみ影響します。

var proto = { foo: 'a' };
var obj = Object.create(proto);

> obj.foo
'a'
> obj.hasOwnProperty('foo')
false

> obj.foo = 'b';
> obj.foo
'b'

> obj.hasOwnProperty('foo')
true
> proto.foo
'a'

var proto = { foo: 'a' };
var obj = Object.create(proto);

> delete obj.foo
true
> obj.foo
'a'

> delete getDefiningObject(obj, 'foo').foo;
true
> obj.foo
undefined

すべての自身のプロパティキー、または列挙可能なキーのみを一覧表示できます。

プロパティは通常、列挙可能であることに注意してください(列挙可能性：ベストプラクティスを参照)。したがって、特に作成したオブジェクトには、Object.keys() を使用できます。

オブジェクトのすべてのプロパティ（自身のプロパティと継承されたプロパティの両方）を一覧表示する場合は、2つのオプションがあります。

オプション 1 はループを使用することです。

for («variable» in «object»)
    «statement»

object のすべての列挙可能なプロパティのキーを反復処理します。for-in を参照して、より詳細な説明を確認してください。

オプション 2 は、すべてのプロパティ（列挙可能なプロパティだけでなく）を反復処理する関数を自分で実装することです。例えば

function getAllPropertyNames(obj) {
    var result = [];
    while (obj) {
        // Add the own property names of `obj` to `result`
        result = result.concat(Object.getOwnPropertyNames(obj));
        obj = Object.getPrototypeOf(obj);
    }
    return result;
}

オブジェクトにプロパティがあるかどうか、またはプロパティがオブジェクト内に直接存在するかどうかを確認できます。

> var obj = { hasOwnProperty: 1, foo: 2 };
> obj.hasOwnProperty('foo')  // unsafe
TypeError: Property 'hasOwnProperty' is not a function

> Object.prototype.hasOwnProperty.call(obj, 'foo')  // safe
true
> {}.hasOwnProperty.call(obj, 'foo')  // shorter
true

次の例は、これらの定義に基づいています。

var proto = Object.defineProperties({}, {
    protoEnumTrue: { value: 1, enumerable: true },
    protoEnumFalse: { value: 2, enumerable: false }
});
var obj = Object.create(proto, {
    objEnumTrue: { value: 1, enumerable: true },
    objEnumFalse: { value: 2, enumerable: false }
});

Object.defineProperties() は、記述子を介したプロパティの取得と定義で説明されていますが、どのように機能するかはかなり明白なはずです。proto には、自身のプロパティ protoEnumTrue と protoEnumFalse があり、obj には、自身のプロパティ objEnumTrue と objEnumFalse があります（また、proto のすべてのプロパティを継承します）。

> Object.getPrototypeOf({}) === Object.prototype
true

> for (var x in obj) console.log(x);
objEnumTrue
protoEnumTrue

> Object.keys(obj)
[ 'objEnumTrue' ]

> Object.getOwnPropertyNames(obj)
[ 'objEnumTrue', 'objEnumFalse' ]

> 'toString' in obj
true
> obj.hasOwnProperty('toString')
false
> obj.hasOwnProperty('objEnumFalse')
true

Object.keys(obj).length

次の例では、オブジェクトリテラルを使用してプロパティ foo のセッターとゲッターを定義します。

var obj = {
    get foo() {
        return 'getter';
    },
    set foo(value) {
        console.log('setter: '+value);
    }
};

次にインタラクションを示します。

> obj.foo = 'bla';
setter: bla
> obj.foo
'getter'

ゲッターとセッターを指定するもう 1 つの方法は、プロパティ記述子を使用することです（プロパティ記述子を参照）。次のコードは、前のリテラルと同じオブジェクトを定義します。

var obj = Object.create(
    Object.prototype, {  // object with property descriptors
        foo: {  // property descriptor
            get: function () {
                return 'getter';
            },
            set: function (value) {
                console.log('setter: '+value);
            }
        }
    }
);

ゲッターとセッターはプロトタイプから継承されます。

> var proto = { get foo() { return 'hello' } };
> var obj = Object.create(proto);

> obj.foo
'hello'

プロパティのデータとそのメタデータの両方を含む、プロパティのすべての状態は、属性に格納されます。それらは、オブジェクトがプロパティを持っているように、プロパティが持っているフィールドです。属性キーは、二重角かっこで囲んで記述されることがよくあります。属性は、通常のプロパティとアクセサ（ゲッターとセッター）にとって重要です。

次の属性は、通常のプロパティに固有です。

次の属性は、アクセサに固有です。

すべてのプロパティには、次の属性があります。

プロパティ記述子は、属性をプログラムで操作するためのデータ構造です。これは、プロパティの属性をエンコードするオブジェクトです。記述子の各プロパティは、属性に対応します。たとえば、以下は、値が 123 の読み取り専用プロパティの記述子です。

{
    value: 123,
    writable: false,
    enumerable: true,
    configurable: false
}

アクセサを使用して同じ目標、つまり不変性を達成できます。この場合、記述子は次のようになります。

{
    get: function () { return 123 },
    enumerable: true,
    configurable: false
}

プロパティ記述子は、次の 2 種類の操作に使用されます。

次の操作では、プロパティ記述子を介してプロパティの属性を取得および設定できます。

オブジェクトの同一コピーを作成するには、次の 2 つのことを正しく行う必要があります。

次の関数は、そのようなコピーを実行します。

function copyObject(orig) {
    // 1. copy has same prototype as orig
    var copy = Object.create(Object.getPrototypeOf(orig));

    // 2. copy has all of orig’s properties
    copyOwnPropertiesFrom(copy, orig);

    return copy;
}

プロパティは、この関数を介して orig から copy にコピーされます。

function copyOwnPropertiesFrom(target, source) {
    Object.getOwnPropertyNames(source)  // (1)
    .forEach(function(propKey) {  // (2)
        var desc = Object.getOwnPropertyDescriptor(source, propKey); // (3)
        Object.defineProperty(target, propKey, desc);  // (4)
    });
    return target;
};

これらは、関連する手順です。

この関数は、Underscore.js ライブラリの関数 _.extend() に非常に似ていることに注意してください。

次の 2 つの操作は非常に似ています。

ただし、いくつかの微妙な違いがあります。

オブジェクト obj が、プロトタイプからプロパティ foo を継承しており、foo が書き込み可能でない場合、obj.foo に代入することはできません。

var proto = Object.defineProperty({}, 'foo', {
    value: 'a',
    writable: false
});
var obj = Object.create(proto);

obj は、proto から読み取り専用プロパティ foo を継承します。非厳格モードでは、プロパティを設定しても効果はありません。

> obj.foo = 'b';
> obj.foo
'a'

厳格モードでは、例外が発生します。

> (function () { 'use strict'; obj.foo = 'b' }());
TypeError: Cannot assign to read-only property 'foo'

これは、代入が継承されたプロパティを非破壊的に変更するという考え方に一致します。継承されたプロパティが読み取り専用の場合、非破壊的な変更を含め、すべての変更を禁止する必要があります。

自身のプロパティを定義することによって、この保護を回避できることに注意してください（定義と代入の違いについては、前のサブセクションを参照）。

> Object.defineProperty(obj, 'foo', { value: 'b' });
> obj.foo
'b'

一般的なルールは、システムによって作成されたプロパティは列挙不可であり、ユーザーによって作成されたプロパティは列挙可能であるということです。

> Object.keys([])
[]
> Object.getOwnPropertyNames([])
[ 'length' ]

> Object.keys(['a'])
[ '0' ]

これは、組み込みインスタンスプロトタイプのメソッドに特に当てはまります。

> Object.keys(Object.prototype)
[]
> Object.getOwnPropertyNames(Object.prototype)
[ hasOwnProperty',
  'valueOf',
  'constructor',
  'toLocaleString',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString' ]

列挙可能性の主な目的は、for-in ループにどのプロパティを無視すべきかを伝えることです。先ほど組み込みコンストラクターのインスタンスを見たときに、ユーザーが作成したものではないものはすべて for-in から隠されていることがわかりました。

列挙可能性の影響を受ける操作は次のとおりです。

以下に、覚えておくべきベストプラクティスをいくつか示します。

次の方法による拡張の防止：

Object.preventExtensions(obj)

obj にプロパティを追加することを不可能にします。例えば

var obj = { foo: 'a' };
Object.preventExtensions(obj);

これで、プロパティの追加は非厳格モードでは何も起こらずに失敗します。

> obj.bar = 'b';
> obj.bar
undefined

厳格モードではエラーをスローします。

> (function () { 'use strict'; obj.bar = 'b' }());
TypeError: Can't add property bar, object is not extensible

ただし、プロパティを削除することはできます。

> delete obj.foo
true
> obj.foo
undefined

オブジェクトが拡張可能かどうかは、次の方法で確認できます。

Object.isExtensible(obj)

次の方法によるシーリング

Object.seal(obj)

拡張を防止し、すべてのプロパティを「構成不可」にします。後者は、プロパティの属性（プロパティ属性とプロパティ記述子を参照）をもう変更できないことを意味します。たとえば、読み取り専用プロパティは、永久に読み取り専用のままです。

次の例は、シーリングによってすべてのプロパティが構成不可になることを示しています。

> var obj = { foo: 'a' };

> Object.getOwnPropertyDescriptor(obj, 'foo')  // before sealing
{ value: 'a',
  writable: true,
  enumerable: true,
  configurable: true }

> Object.seal(obj)

> Object.getOwnPropertyDescriptor(obj, 'foo')  // after sealing
{ value: 'a',
  writable: true,
  enumerable: true,
  configurable: false }

プロパティ foo を変更することはできます。

> obj.foo = 'b';
'b'
> obj.foo
'b'

ただし、その属性を変更することはできません。

> Object.defineProperty(obj, 'foo', { enumerable: false });
TypeError: Cannot redefine property: foo

オブジェクトがシールされているかどうかは、次の方法で確認できます。

Object.isSealed(obj)

次の方法による凍結：

Object.freeze(obj)

これにより、すべてのプロパティが書き込み不可になり、obj がシールされます。言い換えれば、obj は拡張可能ではなくなり、すべてのプロパティが読み取り専用になり、それを変更する方法はありません。例を見てみましょう：

var point = { x: 17, y: -5 };
Object.freeze(point);

ここでも、非厳格モードでは何も起こらずに失敗します。

> point.x = 2;  // no effect, point.x is read-only
> point.x
17

> point.z = 123;  // no effect, point is not extensible
> point
{ x: 17, y: -5 }

そして、厳格モードではエラーが発生します。

> (function () { 'use strict'; point.x = 2 }());
TypeError: Cannot assign to read-only property 'x'

> (function () { 'use strict'; point.z = 123 }());
TypeError: Can't add property z, object is not extensible

オブジェクトが凍結されているかどうかは、次の方法で確認できます。

Object.isFrozen(obj)

オブジェクトの保護は浅いです。つまり、自身のプロパティに影響しますが、それらのプロパティの値には影響しません。たとえば、次のオブジェクトについて考えてみましょう。

var obj = {
    foo: 1,
    bar: ['a', 'b']
};
Object.freeze(obj);

obj を凍結しても、完全に不変というわけではありません。プロパティ bar の（可変の）値を変更できます。

> obj.foo = 2; // no effect
> obj.bar.push('c'); // changes obj.bar

> obj
{ foo: 1, bar: [ 'a', 'b', 'c' ] }

さらに、obj はプロトタイプ Object.prototype を持っており、これも可変です。

手動で new 演算子を実装すると、おおよそ次のようになります。

function newOperator(Constr, args) {
    var thisValue = Object.create(Constr.prototype); // (1)
    var result = Constr.apply(thisValue, args);
    if (typeof result === 'object' && result !== null) {
        return result; // (2)
    }
    return thisValue;
}

（1）行では、コンストラクター Constr によって作成されたインスタンスのプロトタイプが Constr.prototype であることがわかります。

（2）行は、new 演算子のもう1つの機能を示しています。コンストラクターから任意のオブジェクトを返し、それが new 演算子の結果にすることができます。これは、コンストラクターにサブコンストラクターのインスタンスを返させたい場合に便利です（コンストラクターから任意のオブジェクトを返すで例を示します）。

残念ながら、プロトタイプという用語は、JavaScript であいまいな方法で使用されています。

通常、文脈からどちらのプロトタイプが意図されているかが明らかになります。あいまいさを解消する必要がある場合は、オブジェクト間の関係を記述するために、プロトタイプを使用する必要があります。これは、その名前が getPrototypeOf と isPrototypeOf を介して標準ライブラリに入っているためです。したがって、prototype プロパティによって参照されるオブジェクトには別の名前を見つける必要があります。1つの可能性は コンストラクタープロトタイプ ですが、コンストラクターにもプロトタイプがあるため、問題があります。

> function Foo() {}
> Object.getPrototypeOf(Foo) === Function.prototype
true

したがって、インスタンスプロトタイプが最適なオプションです。

デフォルトでは、各関数 C には、プロパティ constructor が C を指すインスタンスプロトタイプオブジェクト C.prototype が含まれています。

> function C() {}
> C.prototype.constructor === C
true

constructor プロパティはプロトタイプから各インスタンスに継承されるため、それを使用してインスタンスのコンストラクターを取得できます。

> var o = new C();
> o.constructor
[Function: C]

C.prototype.constructor === C

> function f() {}
> f.prototype.constructor === f
true

// Avoid:
C.prototype = {
    method1: function (...) { ... },
    ...
};

// Prefer:
C.prototype.method1 = function (...) { ... };
...

C.prototype = {
    constructor: C,
    method1: function (...) { ... },
    ...
};

instanceof演算子は

value instanceof Constr

valueがコンストラクタConstrまたはサブコンストラクタによって作成されたかどうかを判断します。これは、Constr.prototypeがvalueのプロトタイプチェーンにあるかどうかをチェックすることで行います。したがって、次の2つの式は同等です。

value instanceof Constr
Constr.prototype.isPrototypeOf(value)

次に例をいくつか示します。

> {} instanceof Object
true

> [] instanceof Array  // constructor of []
true
> [] instanceof Object  // super-constructor of []
true

> new Date() instanceof Date
true
> new Date() instanceof Object
true

予想どおり、instanceofはプリミティブ値に対して常にfalseになります

> 'abc' instanceof Object
false
> 123 instanceof Number
false

最後に、右辺が関数でない場合、instanceofは例外をスローします

> [] instanceof 123
TypeError: Expecting a function in instanceof check

> Object.create(null) instanceof Object
false
> Object.prototype instanceof Object
false

> Object.getPrototypeOf(Object.create(null))
null
> Object.getPrototypeOf(Object.prototype)
null

> typeof Object.create(null)
'object'
> typeof Object.prototype
'object'

if (myvar instanceof Array) ...  // Doesn’t always work

<head>
    <script>
        function test(arr) {
            var iframe = frames[0];

            console.log(arr instanceof Array); // false
            console.log(arr instanceof iframe.Array); // true
            console.log(Array.isArray(arr)); // true
        }
    </script>
</head>
<body>
    <iframe srcdoc="<script>window.parent.test([])</script>">
    </iframe>
</body>

このセクションでは、コンストラクタを実装するためのいくつかのヒントを示します。

function SloppyColor(name) {
    this.name = name;
}
var c = SloppyColor('green'); // no warning!

// No instance is created:
console.log(c); // undefined
// A global variable is created:
console.log(name); // green

function StrictColor(name) {
    'use strict';
    this.name = name;
}
var c = StrictColor('green');
// TypeError: Cannot set property 'name' of undefined

class Expression {
    // Static factory method:
    public static Expression parse(String str) {
        if (...) {
            return new Addition(...);
        } else if (...) {
            return new Multiplication(...);
        } else {
            throw new ExpressionException(...);
        }
    }
}
...
Expression expr = Expression.parse(someStr);

function Expression(str) {
    if (...) {
        return new Addition(..);
    } else if (...) {
        return new Multiplication(...);
    } else {
        throw new ExpressionException(...);
    }
}
...
var expr = new Expression(someStr);

プロトタイプには、複数のオブジェクトで共有されるプロパティが含まれています。したがって、メソッドに適しています。さらに、次に説明する手法を使用すると、インスタンスプロパティの初期値を提供するためにも使用できます。なぜそれが推奨されないのかを後で説明します。

コンストラクタは通常、インスタンスプロパティを初期値に設定します。そのような値の1つがデフォルトである場合、インスタンスプロパティを作成する必要はありません。同じキーを持つプロトタイププロパティで、値がデフォルトである必要があります。例えば

/**
 * Anti-pattern: don’t do this
 *
 * @param data an array with names
 */
function Names(data) {
    if (data) {
        // There is a parameter
        // => create instance property
        this.data = data;
    }
}
Names.prototype.data = [];

パラメータdataはオプションです。それが欠落している場合、インスタンスはプロパティdataを取得しませんが、代わりにNames.prototype.dataを継承します。

このアプローチはほとんどの場合機能します。インスタンスnのNamesを作成できます。n.dataを取得すると、Names.prototype.dataが読み取られます。n.dataを設定すると、nに新しい独自のプロパティが作成され、プロトタイプ内の共有デフォルト値が保持されます。デフォルト値を（新しい値で置き換えるのではなく）変更した場合にのみ問題が発生します。

> var n1 = new Names();
> var n2 = new Names();

> n1.data.push('jane'); // changes default value
> n1.data
[ 'jane' ]

> n2.data
[ 'jane' ]

前の例では、push()がNames.prototype.dataの配列を変更しました。その配列は、独自のプロパティdataを持たないすべてのインスタンスで共有されるため、n2.dataの初期値も変更されました。

function Names(data) {
    this.data = data || [];
}

function Names(data) {
    if (data) this.data = data;
}
Names.prototype = {
    constructor: Names, // (1)
    get data() {
        // Define, don’t assign
        // => avoid calling the (nonexistent) setter
        Object.defineProperty(this, 'data', {
            value: [],
            enumerable: true,
            configurable: false,
            writable: false
        });
        return this.data;
    }
};

もし同じプロパティ（同じキー、同じセマンティクス、通常は異なる値）が複数のプロトタイプに存在する場合、それはポリモーフィックと呼ばれます。 この場合、インスタンス経由でプロパティを読み取る結果は、そのインスタンスのプロトタイプによって動的に決定されます。ポリモーフィックに使用されないプロトタイププロパティは、（その非ポリモーフィックな性質をより良く反映する）変数に置き換えることができます。

例えば、プロトタイププロパティに定数を格納し、this経由でアクセスできます。

function Foo() {}
Foo.prototype.FACTOR = 42;
Foo.prototype.compute = function (x) {
    return x * this.FACTOR;
};

この定数はポリモーフィックではありません。したがって、変数経由でアクセスしても同じです。

// This code should be inside an IIFE or a module
function Foo() {}
var FACTOR = 42;
Foo.prototype.compute = function (x) {
    return x * FACTOR;
};

以下は、ポリモーフィックなプロトタイププロパティの例です。不変データを使用しています。プロトタイププロパティを介してコンストラクタのインスタンスにタグ付けすることで、異なるコンストラクタのインスタンスと区別できます。

function ConstrA() { }
ConstrA.prototype.TYPE_NAME = 'ConstrA';

function ConstrB() { }
ConstrB.prototype.TYPE_NAME = 'ConstrB';

ポリモーフィックな「タグ」であるTYPE_NAMEのおかげで、ConstrAとConstrBのインスタンスを、それらがレルムをまたいでいる場合でも区別できます（この場合、instanceofは機能しません。 「落とし穴：レルム（フレームまたはウィンドウ）をまたぐ」を参照してください）。

コンストラクタが呼び出されると、2つのものが作成されます。コンストラクタのインスタンスと環境です（「環境：変数の管理」を参照してください）。インスタンスはコンストラクタによって初期化されます。環境は、コンストラクタのパラメータとローカル変数を保持します。コンストラクタ内で作成されたすべての関数（メソッドを含む）は、その環境（作成された環境）への参照を保持します。その参照のおかげで、コンストラクタが終了した後でも、常に環境にアクセスできます。この関数と環境の組み合わせはクロージャと呼ばれます（「クロージャ：関数は誕生時のスコープとの接続を維持する」）。したがって、コンストラクタの環境は、インスタンスとは独立したデータストレージであり、両者が同時に作成されるという理由だけで関連付けられています。それらを適切に接続するには、両方の世界に存在する関数が必要です。ダグラス・クロックフォードの用語を使用すると、インスタンスには3種類の関連付けられた値があります（「図17-4」を参照してください）。

図17-4.コンストラクタConstrが呼び出されると、パラメータとローカル変数のための環境と、初期化されるインスタンスの2つのデータ構造が作成されます。

次のセクションでは、それぞれの種類の値をより詳細に説明します。

Constr.prototype.publicMethod = ...;

function Constr(...) {
    this.publicData = ...;
    ...
}

function Constr(...) {
    ...
    var that = this; // make accessible to private functions

    var privateData = ...;

    function privateFunction(...) {
        // Access everything
        privateData = ...;

        that.publicData = ...;
        that.publicMethod(...);
    }
    ...
}

function Constr(...) {
    ...
    this.privilegedMethod = function (...) {
        // Access everything
        privateData = ...;
        privateFunction(...);

        this.publicData = ...;
        this.publicMethod(...);
    };
}

function StringBuilder() {
    var buffer = [];
    this.add = function (str) {
        buffer.push(str);
    };
    this.toString = function () {
        return buffer.join('');
    };
}
// Can’t put methods in the prototype!

> var sb = new StringBuilder();
> sb.add('Hello');
> sb.add(' world!');
> sb.toString()
’Hello world!’

ほとんどのセキュリティクリティカルでないアプリケーションの場合、プライバシーはAPIのクライアントへのヒントのようなものです。「これを見る必要はありません。」 それがカプセル化の重要な利点であり、複雑さを隠すことです。内部ではさらに多くのことが行われていますが、APIのパブリック部分のみを理解する必要があります。命名規則の考え方は、プロパティのキーをマークすることで、クライアントにプライバシーについて知らせることです。この目的のために、プレフィックス付きのアンダースコアがよく使用されます。

前のStringBuilderの例を書き換えて、バッファがプロパティ_bufferに保持されるようにします。これはプライベートですが、あくまで慣習上のものです。

function StringBuilder() {
    this._buffer = [];
}
StringBuilder.prototype = {
    constructor: StringBuilder,
    add: function (str) {
        this._buffer.push(str);
    },
    toString: function () {
        return this._buffer.join('');
    }
};

以下に、マークされたプロパティキーによるプライバシーの長所と短所をいくつか示します。

プライベートプロパティの命名規則の1つの問題は、キーが衝突する可能性があることです（たとえば、コンストラクタのキーとサブコンストラクタのキー、またはmixinのキーとコンストラクタのキー）。コンストラクタの名前を含む、より長いキーを使用することで、このような衝突を減らすことができます。たとえば、前のケースでは、プライベートプロパティ_bufferは_StringBuilder_bufferと呼ばれます。このようなキーが長すぎる場合は、具象化して、変数に格納するという選択肢があります。

var KEY_BUFFER = '_StringBuilder_buffer';

プライベートデータにはthis[KEY_BUFFER]を介してアクセスします。

var StringBuilder = function () {
    var KEY_BUFFER = '_StringBuilder_buffer';

    function StringBuilder() {
        this[KEY_BUFFER] = [];
    }
    StringBuilder.prototype = {
        constructor: StringBuilder,
        add: function (str) {
            this[KEY_BUFFER].push(str);
        },
        toString: function () {
            return this[KEY_BUFFER].join('');
        }
    };
    return StringBuilder;
}();

定数KEY_BUFFERがローカルに留まり、グローバル名前空間を汚染しないように、StringBuilderをIIFEでラップしました。

具象化されたプロパティキーを使用すると、キーにUUID（Universally Unique Identifier）を使用できます。たとえば、Robert Kiefferのnode-uuidを介して。

var KEY_BUFFER = '_StringBuilder_buffer_' + uuid.v4();

KEY_BUFFERには、コードが実行されるたびに異なる値が設定されます。たとえば、次のようになる可能性があります。

_StringBuilder_buffer_110ec58a-a0f2-4ac4-8393-c866d813b8d1

UUIDを使用した長いキーを使用すると、キーの衝突をほぼ不可能にできます。

このサブセクションでは、IIFEを介して、シングルトンオブジェクト、コンストラクタ、およびメソッドに対してグローバルデータをプライベートに保つ方法について説明します（「IIFEを介して新しいスコープを導入する」を参照してください）。これらのIIFEは新しい環境を作成し（「環境：変数の管理」を参照してください）、そこにプライベートデータを配置します。

var obj = function () {  // open IIFE

    // public
    var self = {
        publicMethod: function (...) {
            privateData = ...;
            privateFunction(...);
        },
        publicData: ...
    };

    // private
    var privateData = ...;
    function privateFunction(...) {
        privateData = ...;
        self.publicData = ...;
        self.publicMethod(...);
    }

    return self;
}(); // close IIFE

var StringBuilder = function () { // open IIFE
    var KEY_BUFFER = '_StringBuilder_buffer_' + uuid.v4();

    function StringBuilder() {
        this[KEY_BUFFER] = [];
    }
    StringBuilder.prototype = {
        // Omitted: methods accessing this[KEY_BUFFER]
    };
    return StringBuilder;
}(); // close IIFE

var obj = {
    method: function () {  // open IIFE

        // method-private data
        var invocCount = 0;

        return function () {
            invocCount++;
            console.log('Invocation #'+invocCount);
            return 'result';
        };
    }()  // close IIFE
};

> obj.method()
Invocation #1
'result'
> obj.method()
Invocation #2
'result'

インスタンスプロパティは、コンストラクタ自体で設定されるため、スーパークラスのインスタンスプロパティを継承するには、そのコンストラクタを呼び出す必要があります。

function Sub(prop1, prop2, prop3, prop4) {
    Super.call(this, prop1, prop2);  // (1)
    this.prop3 = prop3;  // (2)
    this.prop4 = prop4;  // (3)
}

Subがnewを介して呼び出されると、その暗黙的なパラメータthisは新しいインスタンスを参照します。最初に、そのインスタンスをSuper（1）に渡し、インスタンスプロパティを追加します。その後、Subは独自のインスタンスプロパティを設定します（2,3）。コツは、Superをnewを介して呼び出さないことです。これは、新しいスーパーインスタンスを作成するためです。代わりに、Superを関数として呼び出し、現在の（サブ）インスタンスをthisの値として渡します。

メソッドなどの共有プロパティは、インスタンスプロトタイプに保持されます。 したがって、Sub.prototypeがSuper.prototypeのすべてのプロパティを継承する方法を見つける必要があります。解決策は、Sub.prototypeにプロトタイプSuper.prototypeを与えることです。

これがそれを実現するコードです

Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.methodB = ...;
Sub.prototype.methodC = ...;

Object.create()は、プロトタイプがSuper.prototypeである新しいオブジェクトを作成します。その後、Subのメソッドを追加します。インスタンスのコンストラクタプロパティで説明したように、プロパティconstructorも設定する必要があります。これは、正しい値を持っていた元のインスタンスプロトタイプを置き換えたためです。

図17-6は、SubとSuperがどのように関連付けられているかを示しています。Subの構造は、図17-5でスケッチしたものに似ています。図にはインスタンスプロパティは表示されていません。これらは図で説明されている関数呼び出しによって設定されます。

図17-6. コンストラクタSubは、コンストラクタSuperを呼び出すことと、Sub.prototypeをSuper.prototypeのプロトタイプにすることで、コンストラクタSuperを継承します。

「instanceofが機能することを確認する」とは、SubのすべてのインスタンスがSuperのインスタンスでもある必要があることを意味します。図17-7は、SubのインスタンスであるsubInstanceのプロトタイプチェーンがどのように見えるかを示しています。その最初のプロトタイプはSub.prototypeであり、その2番目のプロトタイプはSuper.prototypeです。

図17-7. subInstanceはコンストラクタSubによって作成されました。Sub.prototypeとSuper.prototypeの2つのプロトタイプがあります。

まず、より簡単な質問から始めましょう。subInstanceはSubのインスタンスですか？はい、そうです。これは、次の2つのアサーションが同等であるためです（後者は前者の定義と見なすことができます）。

subInstance instanceof Sub
Sub.prototype.isPrototypeOf(subInstance)

前述のように、Sub.prototypeはsubInstanceのプロトタイプの1つであるため、どちらのアサーションもtrueです。同様に、subInstanceはSuperのインスタンスでもあります。これは、次の2つのアサーションが成り立つためです。

subInstance instanceof Super
Super.prototype.isPrototypeOf(subInstance)

私たちは、Super.prototypeのメソッドを、同じ名前のメソッドをSub.prototypeに追加することでオーバーライドします。methodBはその例であり、図17-7で、その理由を確認できます。methodBの検索はsubInstanceで始まり、Super.prototype.methodBの前にSub.prototype.methodBを見つけます。

スーパーコールを理解するには、ホームオブジェクトという用語を知る必要があります。 メソッドのホームオブジェクトとは、その値がメソッドであるプロパティを所有するオブジェクトです。たとえば、Sub.prototype.methodBのホームオブジェクトはSub.prototypeです。メソッドfooのスーパーコールには、次の3つのステップが含まれます。

したがって、サブメソッドのコードは次のようになります。それ自体をスーパーコールし、オーバーライドしたメソッドを呼び出します

Sub.prototype.methodB = function (x, y) {
    var superResult = Super.prototype.methodB.call(this, x, y); // (1)
    return this.prop3 + ' ' + superResult;
}

(1)でのスーパーコールの読み方の1つは、スーパーメソッドを直接参照し、現在のthisで呼び出すことです。ただし、3つの部分に分割すると、前述の手順が見つかります

これまで、スーパークラスの名前を記述することで、常にスーパーメソッドとスーパーコンストラクタを参照してきました。 このようなハードコーディングは、コードの柔軟性を低下させます。スーパークラスプロトタイプをSubのプロパティに割り当てることで、これを回避できます。

Sub._super = Super.prototype;

その後、スーパークラスコンストラクタとスーパーメソッドの呼び出しは次のようになります

function Sub(prop1, prop2, prop3, prop4) {
    Sub._super.constructor.call(this, prop1, prop2);
    this.prop3 = prop3;
    this.prop4 = prop4;
}
Sub.prototype.methodB = function (x, y) {
    var superResult = Sub._super.methodB.call(this, x, y);
    return this.prop3 + ' ' + superResult;
}

Sub._superの設定は通常、サブプロトタイプをスーパープロトタイプにも接続するユーティリティ関数によって処理されます。例：

function subclasses(SubC, SuperC) {
    var subProto = Object.create(SuperC.prototype);
    // Save `constructor` and, possibly, other methods
    copyOwnPropertiesFrom(subProto, SubC.prototype);
    SubC.prototype = subProto;
    SubC._super = SuperC.prototype;
};

このコードでは、オブジェクトのコピーで示され、説明されているヘルパー関数copyOwnPropertiesFrom()を使用しています。

具体的な例として、コンストラクタPersonが既に存在すると仮定しましょう。

function Person(name) {
    this.name = name;
}
Person.prototype.describe = function () {
    return 'Person called '+this.name;
};

次に、PersonのサブコンストラクタとしてコンストラクタEmployeeを作成します。これを手動で行うと、次のようになります

function Employee(name, title) {
    Person.call(this, name);
    this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
    return Person.prototype.describe.call(this)+' ('+this.title+')';
};

これがそのやり取りです。

> var jane = new Employee('Jane', 'CTO');
> jane.describe()
Person called Jane (CTO)
> jane instanceof Employee
true
> jane instanceof Person
true

前のセクションのユーティリティ関数subclasses()を使用すると、Employeeのコードが少し簡単になり、スーパークラスPersonのハードコーディングが回避されます

function Employee(name, title) {
    Employee._super.constructor.call(this, name);
    this.title = title;
}
Employee.prototype.describe = function () {
    return Employee._super.describe.call(this)+' ('+this.title+')';
};
subclasses(Employee, Person);

組み込みコンストラクタは、このセクションで説明したのと同じサブクラス化アプローチを使用します。 たとえば、ArrayはObjectのサブコンストラクタです。したがって、Arrayのインスタンスのプロトタイプチェーンは次のようになります。

> var p = Object.getPrototypeOf

> p([]) === Array.prototype
true
> p(p([])) === Object.prototype
true
> p(p(p([]))) === null
true

ECMAScript 5とObject.create()が登場する前は、サブプロトタイプを作成する際に、スーパコンストラクタを呼び出すという方法がよく使われていました。

Sub.prototype = new Super();  // Don’t do this

これはECMAScript 5では推奨されていません。プロトタイプは、Superのインスタンスプロパティをすべて持つことになりますが、これはプロトタイプにとって不要です。したがって、前述のパターン(Object.create()を使用する)を使用する方が良いです。

次の2つのメソッドは、オブジェクトをプリミティブ値に変換するために使用されます。

数値および文字列への変換(暗黙的または明示的)は、プリミティブへの変換に基づいています(詳細は、アルゴリズム: ToPrimitive() — 値をプリミティブに変換するを参照)。そのため、前述の2つのメソッドを使用して、これらの変換を設定できます。valueOf()は、数値への変換で優先されます。

> 3 * { valueOf: function () { return 5 } }
15

toString()は、文字列への変換で優先されます。

> String({ toString: function () { return 'ME' } })
'Result: ME'

ブール値への変換は設定できません。オブジェクトは常にtrueとみなされます(ブール値への変換を参照)。

このメソッドは、オブジェクトのロケール固有の文字列表現を返します。デフォルトの実装では、toString()を呼び出します。ほとんどのエンジンでは、このメソッドのサポートはこれ以上進んでいません。ただし、ECMAScript国際化API(ECMAScript国際化APIを参照)は、多くの最新エンジンでサポートされており、いくつかの組み込みコンストラクタでオーバーライドされています。

次のメソッドは、プロトタイプ継承とプロパティに役立ちます。

ジェネリックにメソッドを呼び出すのは非常に冗長です。

Object.prototype.hasOwnProperty.call(obj, 'propKey')

空のオブジェクトリテラル{}によって作成されたObjectのインスタンスを介してhasOwnPropertyにアクセスすることで、これを短縮できます。

{}.hasOwnProperty.call(obj, 'propKey')

同様に、次の2つの式は同等です。

Array.prototype.join.call(str, '-')
[].join.call(str, '-')

このパターンの利点は、冗長性が少ないことです。ただし、自己説明的ではありません。エンジンはリテラルがオブジェクトを作成すべきではないことを静的に判断できるため、パフォーマンスは問題にならないはずです(少なくとも長期的には)。

以下は、使用中のジェネリックメソッドの例です。

プレーンオブジェクトでジェネリック配列メソッドを使用すると、その動作を理解できます。

JavaScriptには、配列のように感じられるが、実際には配列ではないオブジェクトがいくつかあります。つまり、インデックス付きアクセスとlengthプロパティは持っているものの、配列メソッド(forEach()、push、concat()など)は持っていません。これは残念なことですが、後で説明するように、ジェネリック配列メソッドを使用すると回避策が可能になります。配列のようなオブジェクトの例には、次のようなものがあります。

「配列のような」という用語は、ジェネリック配列メソッドとオブジェクトの間の契約とみなすこともできます。オブジェクトは特定の要件を満たす必要があります。そうしないと、メソッドはオブジェクトで機能しません。要件は次のとおりです。

以下のリストには、ECMAScript言語仕様で言及されているすべてのジェネリックメソッドが含まれています。

プロパティを読み取る操作は、2種類に分けられます。

オブジェクトをマップとして解釈してエントリを読み取る際には、これらの操作の種類を慎重に選択する必要があります。理由を見るために、次の例を考えてみましょう。

var proto = { protoProp: 'a' };
var obj = Object.create(proto);
obj.ownProp = 'b';

obj は1つの自身のプロパティを持つオブジェクトで、そのプロトタイプは proto です。 proto も1つの自身のプロパティを持っています。proto は、オブジェクトリテラルで作成されたすべてのオブジェクトと同様に、プロトタイプ Object.prototype を持ちます。したがって、obj は proto と Object.prototype の両方からプロパティを継承します。

私たちは obj を、単一のエントリを持つマップとして解釈したいと考えています。

ownProp: 'b'

つまり、継承されたプロパティを無視し、自身のプロパティのみを考慮したいのです。どの読み取り操作がこのように obj を解釈し、どれがそうでないかを見てみましょう。オブジェクトをマップとして使用する場合、通常、変数に格納された任意のプロパティキーを使用したいことに注意してください。これはドット記法を排除します。

> 'ownProp' in obj  // ok
true
> 'unknown' in obj  // ok
false
> 'toString' in obj  // wrong, inherited from Object.prototype
true
> 'protoProp' in obj  // wrong, inherited from proto
true

> obj.hasOwnProperty('ownProp')  // ok
true
> obj.hasOwnProperty('unknown')  // ok
false
> obj.hasOwnProperty('toString')  // ok
false
> obj.hasOwnProperty('protoProp')  // ok
false

> for (propKey in obj) console.log(propKey)
ownProp
protoProp

> Object.keys(obj)
[ 'ownProp' ]

> obj['toString']
[Function: toString]

function getOwnProperty(obj, propKey) {
    // Using hasOwnProperty() in this manner is problematic
    // (explained and fixed later)
    return (obj.hasOwnProperty(propKey)
            ? obj[propKey] : undefined);
}

> getOwnProperty(obj, 'toString')
undefined

関数 getOwnProperty() は、obj でメソッド hasOwnProperty() を呼び出しました。通常、それは問題ありません。

> getOwnProperty({ foo: 123 }, 'foo')
123

ただし、キーが hasOwnProperty であるプロパティを obj に追加すると、そのプロパティはメソッド Object.prototype.hasOwnProperty() をオーバーライドし、getOwnProperty() は動作しなくなります。

> getOwnProperty({ hasOwnProperty: 123 }, 'foo')
TypeError: Property 'hasOwnProperty' is not a function

この問題を解決するには、hasOwnProperty() を直接参照します。これにより、obj を介してそれを検索することを回避できます。

function getOwnProperty(obj, propKey) {
    return (Object.prototype.hasOwnProperty.call(obj, propKey)
            ? obj[propKey] : undefined);
}

hasOwnProperty() をジェネリックに呼び出しました (「ジェネリックメソッド: プロトタイプからメソッドを借りる」を参照)。

多くの JavaScript エンジンでは、プロパティ __proto__ (「特殊なプロパティ __proto__」を参照) は特別です。取得するとオブジェクトのプロトタイプを取得し、設定するとオブジェクトのプロトタイプを変更します。 これが、オブジェクトがキーが '__proto__' であるプロパティにマップデータを格納できない理由です。マップキー '__proto__' を許可する場合は、プロパティキーとして使用する前にエスケープする必要があります。

function get(obj, key) {
    return obj[escapeKey(key)];
}
function set(obj, key, value) {
    obj[escapeKey(key)] = value;
}
// Similar: checking if key exists, deleting an entry

function escapeKey(key) {
    if (key.indexOf('__proto__') === 0) {  // (1)
        return key+'%';
    } else {
        return key;
    }
}

競合を避けるために、'__proto__' のエスケープされたバージョン (など) もエスケープする必要があります。つまり、キー '__proto__' を '__proto__%' としてエスケープする場合、'__proto__' エントリを置き換えないように、キー '__proto__%' もエスケープする必要があります。それが (1) 行で起こることです。

Mark S. Miller は、メールで、この落とし穴が現実世界に及ぼす影響について述べています。

次のようにして、プロトタイプのないオブジェクトを作成します。

var dict = Object.create(null);

このようなオブジェクトは、通常のオブジェクトよりも優れたマップ (辞書) であり、そのため、このパターンはdict パターン (辞書のためのdict) と呼ばれることもあります。まず、通常のオブジェクトを調べてから、プロトタイプのないオブジェクトがより優れたマップである理由を見つけてみましょう。

> Object.getPrototypeOf({}) === Object.prototype
true
> Object.getPrototypeOf(Object.prototype)
null

> console.log('Result: '+obj)
TypeError: Cannot convert object to primitive value

オブジェクトをマップとして使用するアプリケーションは多数あります。すべてのプロパティキーが静的に (開発時に) わかっている場合は、継承を無視し、自身のプロパティのみを調べるようにする必要があります。任意のキーを使用できる場合は、このセクションで説明した落とし穴を避けるためにライブラリを使用する必要があります。次に2つの例を示します。