参考

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

  var o = {a:1};

  console.log(o)

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

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

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

  

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

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

3、我们再把上面的例子改一改,将Object.create(null)改为Object.create({}):

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

  

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

4、我们最后再来改一下:Object.create(Object.prototype)

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

  这次就和使用{}创建的对象一模一样了。

5、使用Object.create(null)的理由:

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

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

Object.create(null)、Object.create({})、{} 三者创建对象的区别的更多相关文章

  1. 详解Object.create(null)

    在Vue和Vuex的源码中,作者都使用了Object.create(null)来初始化一个新对象.为什么不用更简洁的{}呢? 在SegmentFault和Stack Overflow等开发者社区中也有 ...

  2. object.create(null) 和 {}创建对象的区别

    原文 简书原文:https://www.jianshu.com/p/43ce4d7d6151 创建对象的方法 如果要创建一个空的对象,可以使用如下的三种方法 var obj1 = {}; var ob ...

  3. Object.create(null) 和 {} 区别

    Object.create(null) 创建一个空对象,此对象无原型方法. {} 其实是new Object(),具有原型方法. 应用: 使用Object.create(null)的一个重要应用是:创 ...

  4. Object.create 以及 Object.setPrototypeOf

    第一部分 Object.crate() 方法是es5中的关于原型的方法, 这个方法会使用指定的原型对象以及属性去创建一个新的对象. 语法 Object.create(proto, [ properti ...

  5. (转)es6中object.create()和object.assign()

    今天学习javascript面向对象,在学习Obejct方法时了解到create方法,偶像想起之前使用的assign方法,顺带查找一番,感觉这篇博客讲解详细,遂转载. 先简单提一下装饰器函数,许多面向 ...

  6. vs变量监视提示-VAR-CREATE: UNABLE TO CREATE VARIABLE OBJECT解决方法

    昨天有个linux应用在使用vs 远程debug的时候,debug可以正常进行,但是监视变量的时候提示-VAR-CREATE: UNABLE TO CREATE VARIABLE OBJECT,经测试 ...

  7. php错误:Uncaught exception com_exception with message Failed to create COM object

    本文为大家讲解的是php错误:Uncaught exception com_exception with message Failed to create COM object,感兴趣的同学参考下. ...

  8. Object.create 和 Object.assign

    Object.assign(target, ...source) 1.Object.assign方法只会拷贝源对象自身(不包括原型)的并且可枚举的属性到目标对象,使用源对象的get和目标对象的set, ...

  9. 设计模式之美:Null Object(空对象)

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Null Object 的示例实现. 意图 通过对缺失对象的封装,以提供默认无任何行为的对象替代品. Encapsulate t ...

随机推荐

  1. iOS项目之获取WebView的高度

    获取高度值的方法: - (void)webViewDidFinishLoad:(UIWebView *)webView { // 获取webView的高度 CGFloat webViewHeight ...

  2. CRT/LCD/VGA Information and Timing

    彩色阴极射线管的剖面图: 1. 电子QIANG Three Electron guns (for red, green, and blue phosphor dots)2. 电子束 Electron ...

  3. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  4. Linux 系统最大TCP连接数 调优

    Linux系统TCP最大连接数 Linux系统可接连接到最大的TCP连接数,高并发情况下可进行扩展加大,最大为65536. 限制最大TCP连接数 修改文件:/etc/sysctl.conf 生效命令: ...

  5. python从字符串中提取指定的内容

    有如下字符串: text=cssPath:"http://imgcache.qq.com/ptlogin/v4/style/32",sig:"OvL7F1OQEojtPk ...

  6. [C++ Primer Plus] 第5章、循环和关系表达式(二)课后习题

    1.编写一个要求用户输入两个整数的程序,将程序将计算并输出这两个整数之间(包括这两个整数)所有的整数的和.这里假设先输入较小的整数,例如如果用户输入的是2和9,则程序将指出2-9之间所有整数的和为44 ...

  7. [c/c++] programming之路(12)、循环结构

    一.求2n #include<stdio.h> void main(){ ; ; while(n--){ s*=; printf("%d,%d\n",s,n); } g ...

  8. 如何快速实现 markdown 转 HTML 文档?

    我想要在 Github 上开一个主题博客,我希望通过 Markdown 语法写作,然后生成 HTML 并附带自定义样式显示在网页上. 我找到了 gulp-markdown 这个库,看起来符合我的需求场 ...

  9. pandas之时间序列

    Pandas中提供了许多用来处理时间格式文本的方法,包括按不同方法生成一个时间序列,修改时间的格式,重采样等等. 按不同的方法生成时间序列 In [7]: import pandas as pd # ...

  10. js Infinity 属性

    Infinity 属性用于存放表示正无穷大的数值. 说明 无法使用 for/in 循环来枚举 Infinity 属性,也不能用 delete 运算符来删除它. Infinity 不是常量,可以把它设置 ...