纯粹的 JavaScript 对象

最近在 EventEmitter3 源码中看到了 Object.create(null)，做一下考证。

传统的 JavaScript 对象

在 JavaScript 中，通常使用对象字面量语法来创建空对象。

var foo = {};             // create new object
foo.bar = 'bar';          // string -> string
foo.baz = function () {}; // string -> function

然而，{} 并非真正的「空」对象：它通过原型链继承了如 hasOwnProperty()、toString()、valueOf()、constructor 、__proto__ 等 Object 对象的属性和方法。

var foo = {};
foo.toString();  // "[object Object]"
foo.valueOf();   // Object {}

{} 创建的对象，其原型对象指向 Object.prototype（读者可以在 Chrome 控制台输入 {} 并回车，查看显示的结果）。

var foo = {};
Object.prototype.isPrototypeOf(foo);  // true
foo instanceof Object                 // true
foo.constructor === Object            // true

换言之，{} 对象字面量等价于 Object.create(Object.prototype)：

var foo = Object.create(Object.prototype);

糟糕的是，这些继承的属性是隐藏的，即不可 enumerable。

foo.propertyIsEnumerable('toString');  // false

for (var property in foo) {
  console.log(property);
}
// nothing is printed

即便是 propertyIsEnumerable 也不可枚举自身。

foo.propertyIsEnumerable('propertyIsEnumerable');  // false

当然，这样设计的初衷是为了区分自有属性和继承自原型链的属性，但 JavaScript 对象有时通过原型链方法进行隐式类型转型，颇令人费解，进而招致骂名。

{}.length         // SyntaxError: Unexpected token .
({}).length       // undefined
{} + 1            // 1
{} + {}           // Safari/ Firefox: NaN; Chrome/Node: "[object Object][object Object]"
({} + 1).length   // 16

({} + 1).length 为什么返回 16 呢？

对象与算术表达式结合时，首先调用其 valueOf()，{}.valueOf() 通过 Object.prototype.valueOf() 返回其自身；
又回到了对象加数字 1，尝试第二种方式：使用 toString()。{}.toString() 通过 Object.prototype.toString() 返回 "[object Object]"，字符串与 1 相加，得到 "[object Object]1"，其长度为 16。

我们可以通过改写原型方法来追踪此过程（仅作演示，实践中请勿改写内置对象的原型方法）：

Object.prototype.valueOf = function() {
  console.log('valueOf called'); return this;
};

Object.prototype.toString = function() {
  console.log('toString called'); return 'xyz';
};

({} + 1).length; // 4
// valueOf called
// toString called
// 'xyz1'.length === 4