详解Object.create(null)与Object.create({})

2019-09-12 admin

Object.create()的定义

参数

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

返回值

一个新对象,带着指定的原型对象和属性。

实例

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(123);
  }
};

const me = Object.create(person,{
  // foo会成为所创建对象的数据属性,且foo必须为一个对象;可设置新对象的foo属性的可读性,可配置性以及值
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  }
  });

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten
console.log(me)

new Object()

通过构造函数来创建对象, 添加的属性是在自身实例下。 Object.create() es6创建对象的另一种方式,可以理解为继承一个对象, 添加的属性是在原型下。:

var a = {  rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}

Object.create()

var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b)  // {}
console.log(b.__proto__) // {rep: "apple"}

Object.create(null)与Object.create({})还是有区别的

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

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

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

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

我们再把上面的例子改为{}

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

创建的对象和使用{}创建对象已经很相近了,但是还是有一点区别:多了一层proto嵌套。 我们最后再来改一下:

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

[转载]原文链接:https://segmentfault.com/a/1190000020370528

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74953.html

文章标题:详解Object.create(null)与Object.create({})

相关文章
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
javascript:;与javascript:void(0)区别
javascript:;直接返回undefined javascript:void(0);要去执行一次表达式“0”,然后返回undefined ...
2017-05-12
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http...
2017-03-14
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
回到顶部