属性有三种

JavaScript 的对象字面量允许您直接创建普通对象（Object 的直接实例）。以下代码使用对象字面量将一个对象赋值给变量 jane。该对象有两个属性：name 和 describe。 describe 是一个方法：

var jane = {
    name: 'Jane',

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

您可能会认为对象只是从字符串到值的映射。但它们不止于此：它们是真正的通用对象。例如，您可以在对象之间使用继承（请参阅第二层：对象之间的原型关系），并且您可以保护对象不被更改。直接创建对象的能力是 JavaScript 的突出特性之一：您可以从具体对象开始（不需要类！），并在以后引入抽象。例如，构造函数是对象的工厂（如第三层：构造函数——实例的工厂中所述），它们大致类似于其他语言中的类。

点运算符提供了一种用于访问属性的紧凑语法。属性键必须是标识符（请参阅合法标识符）。如果要读取或写入具有任意名称的属性，则需要使用方括号运算符（请参阅方括号运算符 ([])：通过计算键访问属性）。

本节中的示例使用以下对象

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' ]

请记住，函数也是对象。因此，每个函数都有自己的方法。本节介绍了其中的三种方法，它们有助于调用函数。以下几节将使用这三种方法来解决调用函数时遇到的一些陷阱。接下来的示例都引用以下对象 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()（请参阅其他函数）与数组一起使用。在这种情况下，以下两个表达式将是等效的

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）。在下面的例子中，(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

有三种方法可以解决这个问题。

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()，尤其是对于您创建的对象。

如果要列出对象的全部属性（包括自有属性和继承属性），则有两种选择。

选项 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'

指定获取器和设置器的另一种方法 是通过属性描述符（请参阅 属性描述符）。以下代码定义与前面的字面量相同的对象

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'

属性的所有状态，包括其数据和元数据，都存储在 特性 中。它们是属性所具有的字段，就像对象具有属性一样。特性键通常用双括号括起来。特性对于普通属性和访问器（getter 和 setter）都很重要。

以下特性特定于普通属性

以下特性特定于访问器：

所有属性都具有以下特性：

属性描述符是一种用于以编程方式处理特性的数据结构。它是一个编码属性特性的对象。描述符的每个属性都对应于一个特性。例如，以下是一个只读属性的描述符，其值为 123：

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

您可以通过访问器实现相同的目标，即不变性。然后描述符如下所示

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

属性描述符用于两种操作：

以下操作允许您通过属性描述符获取和设置属性的特性：

要创建对象的相同副本，您需要确保两件事：

以下函数执行此类复制

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() 函数非常相似。

以下两个操作非常相似：

但是，有一些细微的差别

如果对象 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 运算符的另一个特性：您可以从构造函数返回一个任意对象，它将成为 new 运算符的结果。如果您希望构造函数返回子构造函数的实例，这将非常有用（从构造函数返回任意对象中给出了一个例子）。

不幸的是，术语原型在 JavaScript 中的使用 具有歧义：

通常，上下文会清楚地表明指的是哪种原型。如果需要消除歧义，那么我们只能使用原型来描述对象之间的关系，因为该名称已经通过 getPrototypeOf 和 isPrototypeOf 进入了标准库。因此，我们需要为 prototype 属性引用的对象找到一个不同的名称。一种可能是构造函数原型，但这有问题，因为构造函数也有原型

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

因此，实例原型是最好的选择。

默认情况下，每个函数 C 都包含一个实例原型对象 C.prototype，其属性 constructor 指向 C：

> 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 的原型链中来实现。因此，以下两个表达式是等效的：

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);

原型包含由多个对象共享的属性。因此，它们适用于方法。此外，使用接下来描述的技术，您还可以使用它们为实例属性提供初始值。稍后我将解释为什么不建议这样做。

构造函数通常将实例属性设置为初始值。如果其中一个值是默认值，则您不需要创建实例属性。您只需要一个具有相同键的原型属性，其值为默认值。例如

/**
 * 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。

这种方法通常有效：您可以创建 Names 的实例 n。获取 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 不起作用；请参阅陷阱：跨领域（框架或窗口））。

调用构造函数时，会创建两个东西：构造函数的实例和一个环境（请参阅环境：管理变量）。该实例将由构造函数初始化。环境保存构造函数的参数和局部变量。在构造函数内部创建的每个函数（包括方法）都将保留对环境的引用，即创建它的环境。这种函数和环境的组合称为闭包（闭包：函数与其诞生作用域保持连接）。因此，构造函数的环境是独立于实例的数据存储，并且仅因为两者同时创建才与其相关。为了正确连接它们，我们必须拥有同时存在于两个世界中的函数。使用Douglas Crockford 的术语，实例可以具有与其关联的三种值（请参阅图 17-4）

图 17-4. 调用构造函数 Constr 时，会创建两个数据结构：用于参数和局部变量的环境，以及要初始化的实例。

以下各节更详细地解释了每种值。

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('');
    }
};

以下是通过标记属性键实现隐私的一些优缺点

私有属性命名约定的一个问题是键可能会冲突（例如，构造函数中的键与子构造函数中的键，或 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;
}();

我们在 StringBuilder 周围包装了一个 IIFE，以便常量 KEY_BUFFER 保持局部性并且不会污染全局命名空间。

具体化的属性键使您能够在键中使用 UUID（通用唯一标识符）。例如，通过 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)
}

当通过 new 调用 Sub 时，其隐式参数 this 指的是一个新的实例。它首先将该实例传递给 Super (1)，后者添加其实例属性。之后，Sub 设置它自己的实例属性（2,3）。诀窍是不要通过 new 调用 Super，因为这会创建一个新的超类实例。相反，我们将 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 属性中所述，我们还需要设置属性 constructor，因为我们已经替换了原始实例原型，其中包含正确的值。

图 17-6 显示了 Sub 和 Super 现在是如何相关的。 Sub 的结构确实类似于我在图 17-5中绘制的内容。该图未显示实例属性，这些属性由图中提到的函数调用设置。

图 17-6. 构造函数 Sub 通过调用构造函数 Super 并使 Sub.prototype 成为 Super.prototype 的原型来继承构造函数 Super。

“确保 instanceof 工作”意味着 Sub 的每个实例也必须是 Super 的实例。 图 17-7 显示了 subInstance（Sub 的实例）的原型链是什么样的：它的第一个原型是 Sub.prototype，它的第二个原型是 Super.prototype。

图 17-7. subInstance 由构造函数 Sub 创建。它有两个原型 Sub.prototype 和 Super.prototype。

让我们从一个更简单的问题开始：subInstance 是 Sub 的实例吗？是的，因为以下两个断言是等效的（后者可以被认为是前者的定义）

subInstance instanceof Sub
Sub.prototype.isPrototypeOf(subInstance)

如前所述，Sub.prototype 是 subInstance 的原型之一，因此两个断言都为真。类似地，subInstance 也是 Super 的实例，因为以下两个断言成立

subInstance instanceof Super
Super.prototype.isPrototypeOf(subInstance)

我们通过向 Sub.prototype 添加一个同名方法来覆盖 Super.prototype 中的方法。 methodB 就是一个例子，在图 17-7 中，我们可以看到它是如何工作的：对 methodB 的搜索从 subInstance 开始，并在找到 Super.prototype.methodB 之前找到了 Sub.prototype.methodB。

要理解超级调用，您需要知道术语宿主对象。方法的宿主对象是拥有该方法作为其属性值的对象。例如，Sub.prototype.methodB 的宿主对象是 Sub.prototype。超级调用方法 foo 涉及三个步骤：

因此，子方法的代码如下所示。它超级调用自身，它调用它覆盖的方法

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

读取 (1) 处的超级调用的一种方法如下：直接引用超级方法并使用当前的 this 调用它。但是，如果我们将其分为三个部分，我们会发现前面提到的步骤

到目前为止，我们始终 通过提及超构造函数名称来引用超方法和超构造函数。这种硬编码会降低代码的灵活性。您可以通过将超原型分配给 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;
};

我们现在想创建构造函数 Employee 作为 Person 的子构造函数。我们手动执行此操作，如下所示

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()）。

以下两种 方法用于将对象转换为原始值：

转换为数字和字符串（无论是隐式还是显式）都建立在转换为原始值的基础上（有关详细信息，请参阅 算法：ToPrimitive() - 将值转换为原始值）。这就是为什么您可以使用前面提到的两种方法来配置这些转换。转换为数字时首选 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')

同样，以下两个表达式是等效的

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

这种模式的优点是不那么冗长。但它也不那么容易理解。性能应该不是问题（至少从长远来看），因为引擎可以静态确定字面量不应该创建对象。

以下是一些 正在使用的泛型方法的示例：

在普通对象上使用泛型数组方法可以让您深入了解它们的工作原理

JavaScript 中有一些对象感觉像数组，但实际上不是。 这意味着，虽然它们具有索引访问权限和 length 属性，但它们没有任何数组方法（forEach()、push、concat() 等）。这很不幸，但正如我们将看到的，泛型数组方法提供了一种解决方法。类数组对象的示例包括：

术语 类数组 也可以看作是泛型数组方法和对象之间的契约。对象必须满足某些要求；否则，这些方法将无法在它们上工作。要求是

以下 列表包含 ECMAScript 语言规范中提到的所有泛型方法：

读取属性的操作可以 分为两种：

读取对象作为映射的条目时，需要在这些操作之间仔细选择。要了解原因，请考虑以下示例

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

obj 是一个对象，它有一个自有属性，其原型是 proto，它也有一个自有属性。 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

但是，如果向 obj 添加一个键为 hasOwnProperty 的属性，则该属性将覆盖方法 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 代表 dictionary，即字典）的原因。让我们首先检查普通对象，然后找出为什么无原型对象是更好的映射。

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

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

将对象用作映射有很多应用程序。 如果所有属性键都是静态已知的（在开发时），那么您只需要确保忽略继承并仅查看自有属性。如果可以使用任意键，则应求助于库以避免本节中提到的陷阱。以下是两个示例：