Object.create()介绍

Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString(), hasOwnProperty()等方法

Object.create()方法接受两个参数:Object.create(obj,propertiesObject) ;

obj:一个对象,应该是新创建的对象的原型。

propertiesObject:可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties()的第二个参数一样)。注意:该参数对象不能是 undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

var o = Object.create(Object.prototype, {
// foo会成为所创建对象的数据属性
foo: {
writable:true,
configurable:true,
value: "hello"
},
// bar会成为所创建对象的访问器属性
bar: {
configurable: false,
get: function() { return 10 },
set: function(value) {
console.log("Setting `o.bar` to", value);
}
}
});
console.log(o);//{foo:'hello'} var test1 = Object.create(null) ;
console.log(test1);// {} No Properties 因为在bar中设置了configurable 使用set,get方法默认都是不起作用,所以bar值无法赋值或者获取
这里的o对象继承了 Object.prototype Object上的原型方法 我们可以 对象的 __proto__属性,来获取对象原型链上的方法 如: console.log(o.__proto__);//{__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
console.log(test1.__proto__);//undefined

通过打印发现, 将{}点开,显示的是 No Properties ,也就是在对象本身不存在属性跟方法,原型链上也不存在属性和方法,

new object()

var test1 = {x:1};

var test2 = new Object(test1);

var test3 = Object.create(test1);
console.log(test3);//{}
//test3等价于test5
var test4 = function(){
  
}
test4.prototype = test1;
var test5 = new test4();
console.log(test5);
console.log(test5.__proto__ === test3.__proto__);//true
console.log(test2);//{x:1}

{}

var test1 = {};
var test2 = new Object();
var test3 = Object.create(Object.prototype);
var test4 = Object.create(null);//console.log(test4.__proto__)=>undefined 没有继承原型属性和方法
console.log(test1.__proto__ === test2.__proto__);//true
console.log(test1.__proto__ === test3.__proto__);//true
console.log(test2.__proto__ === test3.__proto__);//true
console.log(test1.__proto__ === test4.__proto__);//false
console.log(test2.__proto__ === test4.__proto__);//false
console.log(test3.__proto__ === test4.__proto__);//false

总结:使用Object.create()是将对象继承到__proto__属性上

var test = Object.create({x:123,y:345});
console.log(test);//{}
console.log(test.x);//123
console.log(test.__proto__.x);//3
console.log(test.__proto__.x === test.x);//true var test1 = new Object({x:123,y:345});
console.log(test1);//{x:123,y:345}
console.log(test1.x);//123
console.log(test1.__proto__.x);//undefined
console.log(test1.__proto__.x === test1.x);//false var test2 = {x:123,y:345};
console.log(test2);//{x:123,y:345};
console.log(test2.x);//123
console.log(test2.__proto__.x);//undefined
console.log(test2.__proto__.x === test2.x);//false

Object.create()和new object()和{}的区别的更多相关文章

  1. Object.create(null)、Object.create({})、{} 三者创建对象的区别

    参考 1.先看看我们经常使用的{}创建的对象是什么样子的: var o = {a:1}; console.log(o) 从上图可以看到,新创建的对象继承了Object自身的方法,如hasOwnProp ...

  2. [设计模式] JavaScript 之 原型模式 : Object.create 与 prototype

    原型模式说明 说明:使用原型实例来 拷贝 创建新的可定制的对象:新建的对象,不需要知道原对象创建的具体过程: 过程:Prototype => new ProtoExam => clone ...

  3. Object.create() vs new SomeFunction() in javascript

    Object.create builds an object that inherits directly from the one passed as its first argument. Wit ...

  4. js Object.create 初探

    1.作用 Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. https://developer.mozilla.org/zh-CN/docs/W ...

  5. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

  6. 基本类型和引用类型调用是的区别(Object.create)

    var person = { name : 'jim', address:{ province:'浙', city:'A' } } var newPerson = Object.create(pers ...

  7. js中的new操作符与Object.create()的作用与区别

    js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...

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

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

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

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

随机推荐

  1. 基础JAVA程序设计 (多个类方法的实现)

    模拟实现家庭购买电视.要求: (1) 电视类(TV)属性: channel : int ,  1 代表CCTV-1,2代表CCTV-2-- 方法: 设置频道setChannel(int i) , 获取 ...

  2. 微信小程序框架集合

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  3. Ubuntu18.04安装SS(不是服务器端!!!)

    终于下定决心把我1T的机械硬盘格式化了- -,分了100G装了Ubuntu 18.04,在安装shadowsocks的时候有些东西想记下来.shadowsocks目前在ubuntu上使用的主要有两个版 ...

  4. ios中关键词weak,assign,copy.strong等的区别

    虽然开发IOS好多年了.但是这几个关键词总是深深困扰着我.加上IOS开发从mRC到ARC的过渡,这些概念更为困扰我了. 先说weak与assign.weak只能修饰对象,不能修饰基本数据类型.而ass ...

  5. vue--transition-group

    1.为什么要使用<transition-group> <transition></transition>是vue封装的过渡组件 <transition nam ...

  6. 比NPOI更好用的Excel操作库——EPPlus

    提到通过纯.Net读写Excel,一般首先想到的自然是大名鼎鼎的NPOI,就连微软官方的MSDN都有专门的一篇文章来介绍它的用法.今天在一个项目中使用到了导出报表为Excel的功能,便特地的试用了一下 ...

  7. day_其他操作符的重载

    #include <iostream> #include <stdlib.h> using namespace std; class A{ public: A(void) { ...

  8. Go语言学习之13 日志管理平台开发

    主要内容: 1. ElasticSearch介绍与使用2. kibana介绍与使用 1. ElasticSearch安装 详见上节内容2. kibana安装 (1) 下载ES,下载地址:https:/ ...

  9. [经验]怎么删除“通过QQ/TIM发送到”右键菜单

      首先打开QQ主面板上的系统设置   选择[基本设置]-[文件管理]菜单,并将如图所示的选项去掉勾选即可

  10. Python第三方库的安装 --Python3

    1.使用安装包管理工具安装:easy_install .pip/pip3 easy_install:easy_install是由PEAK(Python Enterprise Application K ...