详解Object.create(null)

在Vue和Vuex的源码中,作者都使用了Object.create(null)来初始化一个新对象。为什么不用更简洁的{}呢? 在SegmentFaultStack Overflow等开发者社区中也有很多人展开了讨论,在这里总结成文,温故知新。

Object.create()的定义

照搬一下MDN上的定义:

Object.create(proto,[propertiesObject])
  • proto:新创建对象的原型对象
  • propertiesObject:可选。要添加到新对象的可枚举(新添加的属性是其自身的属性,而不是其原型链上的属性)的属性。

举个例子(恶改了一下MDN的官方例子,看懂的点赞):

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()的定义其实很简单,弄清楚上面这个例子就可以了。

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

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

var o = {a:1};
console.log(o)

在chrome控制台打印如下:

1523413223796

从上图可以看到,新创建的对象继承了Object自身的方法,如hasOwnPropertytoString等,在新对象上可以直接使用。

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

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

在chrome控制台打印如下:

1523413480088

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

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

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

null改为{},结果是怎样的?在chrome控制台打印如下:

1523413793250

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

我们最后再来改一下:

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

chrome控制台打印如下:

1523414268433

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

Object.create(null)的使用场景

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

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

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

在chrome打印如下:

1523414692396

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

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

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

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

总结:

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

Object.create(null)吧!其他时候,请用{}

以上

原文发布于微信公众号 - 前端IT频道(thoughtkun)

原文发表时间:2018-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

javascript技能填坑之闭包

哪哪都说闭包重要重要,虽然它确实很重要(废话),但它重要在哪里呢? 先说结论,我个人以为,闭包就重要在,它形成了一个单独的作用域。 那单独的作用域又有什么重要的...

1758
来自专栏恰同学骚年

《C#图解教程》读书笔记之四:类和继承

  (1)除了特殊的Object类,其他所有类都是派生类,即使他们没有显示基类定义。

574
来自专栏desperate633

LintCode 移动零题目分析

给一个数组 nums 写一个函数将0 移动到数组的最后面,非零元素保持原数组的顺序

672
来自专栏Python、Flask、Django

Python中我刚知道的秘密

851
来自专栏全沾开发(huā)

正则表达式-JavaScript

正则表达式-JavaScript 什么是正则表达式 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达...

3325
来自专栏轮子工厂

6. 简单又复杂的“运算符”,建议你看一哈

昨天的《5. 很“迷”的字符与字符串》初稿本来很短的,但是我觉得内容太少了,就加了一些,结果好像就变得特别多〒▽〒。

483
来自专栏阿凯的Excel

Python读书笔记16(循环大法好!while少不了)

今天和大家分享一个新的循环语句while! 之前学过for循环语句用于遍历列表、元组、字典内的值,我们重温一下! ? 这种for循环语句是根据列表元素值的数量来...

3595
来自专栏静晴轩

JavaScript字符串间的比较

字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更 多…。@雪斌在Jav...

4249
来自专栏aCloudDeveloper

指向函数的指针

Author: bakari   Date: 2012.8.8 做好总结我觉得是把知识学扎实必不可少的实践环节。这个知识点是当初自己在学习这一块做的一些笔记,现...

1796
来自专栏静晴轩

JavaScript 之 this 详解

JavaScript作为一种脚本语言身份的存在,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript支持函数式编程、闭包、基于原型的继承等高级功...

3305

扫码关注云+社区