资讯专栏INFORMATION COLUMN

使用 Object.create(null) 代替大括号生成({})对象

cangck_X / 2800人阅读

摘要:传统对象写法为这种写法等价于,所以并不是真正的空对象,它还通过原型链继承了的属性方法。输出当对象和数值进行运算的时候会对对象进行隐式转换,就变成了所以计算结果的长度为。所以推荐大家使用代替大括号生成对象。

传统对象写法为 var obj = {} 这种写法等价于 var obj = Object.create(Object.prototype) ,所以 {} 并不是真正的空对象,它还通过原型链继承了 Object 的属性方法。

这种方式不好地方是,{} 在某些时候会进行隐式类型转型,还有当我们使用 for...in 时候会遍历原形链上的属性方法,如下面的代码所示。

Object.prototype.test = "test";
var obj = {};
console.log((obj + 0).length); // 16
for (var i in obj) {
  console.log(i); // 输出 test
}

当对象和数值进行运算的时候会对对象进行隐式转换,{} + 1 就变成了 [object Object] + 0 所以计算结果的长度为 16。

for...in 进行遍历的时候也会遍历原型链可枚举的属性,所以当遍历的时候还需要使用 hasOwnProperty 进行过滤操作。

Object.create(null) 没有这样的问题,是一个没有继承 Object 原型的属性和方法的纯对象。

var obj = Object.create(null)
obj + obj  // Uncaught TypeError: Cannot convert object to primitive value
obj  + 1 // Uncaught TypeError: Cannot convert object to primitive value

性能方面,如下图,在以前使用 Object.create(null) 会有性能问题(比 {} 慢了很多倍),而现在已经不是问题了,而且更快了。

所以推荐大家使用 Object.create(null) 代替大括号生成({})对象。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89982.html

相关文章

  • 创建对象的4种方式

    摘要:创建对象的种方式方式一通过对象字面量表示法又称为直接量原始方式。例子在自定义构造函数的内部定义对象的方法函数的值赋给的属性。 创建对象的4种方式 方式一:通过对象字面量表示法(又称为直接量、原始方式)。object literals 方式二:通过new和构造函数Object()、String()等。 方式三:用自定义构造函数来初始化新对象。 方式四:通过Object.create()...

    seanlook 评论0 收藏0
  • ES6学习笔记2—各扩展

    摘要:字符串的扩展字符的表示法允许采用形式表示一个字符,其中表示字符的码点。返回布尔值,表示参数字符串是否在源字符串的头部。使用和这两个常量,用来表示这个范围的上下限。对于那些无法用个二进制位精确表示的小数,方法返回最接近这个小数的单精度浮点数。 字符串的扩展 字符的 Unicode 表示法 JavaScript 允许采用uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码...

    Zoom 评论0 收藏0
  • JavaScript类的写法

    摘要:在中,写成类的本质基本都是构造函数原型。操作符左边是待检测类的对象,右边是定义类的构造函数。不宜用在这里,我们需要知道的几种定义类的方法,除了上面的构造函数外,还有方法用这个方法,类就是一个对象,而不是函数。 js类的基本含义 我们知道,在js中,是没有类的概念的。类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心。 类是对象的抽象,而对象是类的具体实例。类是抽象的...

    OnlyLing 评论0 收藏0
  • ES6(3)- 各种类型的扩展(数组、对象

    摘要:上面代码中,分别是字符串布尔值和数值,结果只有字符串合入目标对象以字符数组的形式,数值和布尔值都会被忽略。 1 数组的扩展 http://es6.ruanyifeng.com/#do... 1.1 扩展运算符 2 对象的扩展 http://es6.ruanyifeng.com/#do... 2.1 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简...

    weapon 评论0 收藏0
  • ES5(下)

    摘要:命令命令的作用,就是执行构造函数,返回一个实例对象。实例对象相当于创建一个空的构造函数,将其属性指向参数对象,从而实现让该实例继承的属性。 这是ES5的入门篇教程的笔记,网址:JavaScript教程,以下内容中黑体表示大标题,还有一些重点;斜体表示对于自身,还需要下功夫学习的内容。这里面有一些自己的见解,所以若是发现问题,欢迎指出~ 实例对象与new命令面向对象编程是目前主流的编程范...

    includecmath 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<