简析 Object.create(null)

在阅读 Vue 和 Vuex 的源码中，我们会发现，作者都使用了 Object.create(null) 来初始化一个新的对象。

作为 ES5 继承中更优解的组合寄生继承中，也同样用 Object.create(prototype) 来处理原型链。

那么问题来了，我们为什么不用更加简洁的 {} 呢？

通过自己查找一些资料，总结在这里，温故知新。

定义

首先，我们先照搬 MDN 上的定义:

Object.create (opens new window)

Object.create(proto, [propertiesObject])

• prototype: 新创建对象的原型对象
• propertiesObject: 可选。要添加到新对象的可枚举（新添加的属性是其自身的属性，而不是其原型链上的）属性

eg:

const car = {
  isSportsCar: false,
  introduction: function() {
    console.log(`Hi girl, this is a ${this.name}.
    Do you like to have a drink with me ? ${this.isSportsCar}`)
  },
}

const porsche = Object.create(car, {
  //color成为porsche的数据属性
  //颜色不喜欢，可以改色或贴膜，所以可修改
  color: {
    writable: true,
    configurable: true,
    value: 'yellow',
  },
  //type成为porsche的访问器属性
  type: {
    // writable、configurable等属性，不显式设置则默认为false
    // 想把普通车改成敞篷，成本有点大了，所以就设成不可配置吧
    get: function() {
      return 'convertible'
    },
    set: function(value) {
      'change this car to', value
    },
  },
})

porsche.name = 'Porsche 911' // "name"是"porsche"的属性, 而不是"car"的
porsche.isSportsCar = true // 继承的属性可以被覆写

porsche.introduction()
// expected output: "Hi girl, this is a Porsche 911. Do you like to have a drink with me ? true"

其实很简单，只要过一下上面的例子，我们就能掌握了。

Object.create()、{...} 的区别

先看看我们经常使用的 {} 创建的对象那个是什么样子的：

let a = { b: 1 }

console.log(a)

在 chrome 控制台打印如下

从上图中可以看到，新创建的对象继承了 Object 自身的方法，如 hasOwnProperty、toString 等，在新对象上面可以直接使用。

再看看使用 Object.create() 创建对象

let o = Object.create(null, {
  a: {
    writable: true,
    configurable: true,
    value: '1',
  },
})
console.log(o)

可以看到，新创建的对象除了自身属性 a 之外，原型链上没有任何属性，也就是没有继承 Object 的任何东西，此时如果我们调用 o.toString()会报 Uncaught TypeError 的错误。

大家可能会注意到，第一个参数使用了 null。也就是说将 null 设置成了新创建对象的原型，自然就不会有原型链上的属性。我们再把上面的例子改一改：

let o = Object.create(
  {},
  {
    a: {
      writable: true,
      configurable: true,
      value: '1',
    },
  }
)
console.log(o)

我们看到，这样创建的对象和使用{}创建对象已经很相近了，但是还是有一点区别：多了一层 proto 嵌套。

我们最后再来改一下：

let o = Object.create(Object.prototype, {
  a: {
    writable: true,
    configurable: true,
    value: '1',
  },
})
console.log(o)

这次就和使用{}创建的对象一模一样了。至此，我相信大家已经对两者的区别十分清楚了。

Object.create(null)的使用场景

再回到文章开头的问题，为什么很多源码作者会使用 Object.create(null)来初始化一个新对象呢？这是作者的习惯，还是一个最佳实践？

其实都不是，这并不是作者不经思考随便用的，也不是 javascript 编程中的最佳实践，而是需要因地制宜，具体问题具体分析。

我们进一步比较一下 Object.create(null)和{}创建控对象的区别：

在 chrome 打印如下：

从上图可以看到，使用 create 创建的对象，没有任何属性，显示 No properties，我们可以把它当作一个非常纯净的 map 来使用，我们可以自己定义 hasOwnProperty、toString 方法，不管是有意还是不小心，我们完全不必担心会将原型链上的同名方法覆盖掉。举个例子：

//Demo1:
let a= {...省略很多属性和方法...};
//如果想要检查a是否存在一个名为toString的属性，你必须像下面这样进行检查：
if(Object.prototype.hasOwnProperty.call(a,'toString')){
    ...
}
//为什么不能直接用a.hasOwnProperty('toString')?因为你可能给a添加了一个自定义的hasOwnProperty
//你无法使用下面这种方式来进行判断,因为原型上的toString方法是存在的：
if(a.toString){}

//Demo2:
let a=Object.create(null)
//你可以直接使用下面这种方式判断，因为存在的属性，都将定义在a上面，除非手动指定原型：
if(a.toString){}

另一个使用 create(null)的理由是，在我们使用 for..in 循环的时候会遍历对象原型链上的属性，使用 create(null)就不必再对属性进行检查了，当然，我们也可以直接使用 Object.keys[]。

总结 🆙

• 你需要一个非常干净且高度可定制的对象当作数据字典的时候
• 想节省 hasOwnProperty 带来的一丢丢性能损失并且可以偷懒少些一点代码的时候
• 组合寄生继承的时候

用 Object.create(null)吧！其他时候，请用{}。