文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

解读new Object()和Object.create()的区别

2023-02-10 15:00

关注

Object.create()

创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。 --MDN

语法

Object.create(proto, [propertiesObject]);

参数

proto:传递一个现在有的对象,即新对象的原型对象(新创建的对象_proto_属性指向现有属性)。

第一个参数proto的值为null,那么创建出来的对象是一个{}(空对象)并且没有原型;

Objecr.create({name:'lili'});

Objecr.create(null);

propertiesObject:可选,给新对象添加新属性以及描述器。如果没有指定即创建一个{},有原型也有继承Object.prototype上的方法。。

返回值

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

小试牛刀

//题目
var a = {num:2};
var b = Object.create(a);
//问题,以下顺序执行,值是?
b.num
b.num++ 
a.num 
1. b.num == 2
Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。
也就是b.__proto__ == a
所以虽然b是个空对象,但会从原型上一直找值。
b.num == b.__proto__.num == 2
2. b.num++ == 2
b.num为2,++运算符是先用后加,这时b.num++还是2
3. a.num == 2
b.num 在执行 ++ 操作之后,这时的b为{num:3},不影响a.

new Object()

new创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

new Object();

new Object({name:'lili'});

区别

new Object()继承内置对象Object,而Object.create()则是继承指定对象可以通过Object.create(null) 创建一个干净的对象,也就是没有原型,而 new Object()创建的对象是 Object的实例,原型永远指向Object.prototype 

创建对象new Object() 和 Object.create()区分

new Object() 和 Object.create() 创建对象有什么不同之处,先看一个例子:

  var foo = {
    something: function() {
        console.log( "Tell me something good..." );
    }
};
foo.c = 1
var a = Object.create( foo );
var b = new Object(foo)
foo.foo='foo'
a.a='a'
b.b = 'b'
b.something()
a.something(); // Tell me something good...
console.log('a:',a)
console.log('b:',b)
console.log('foo:',foo)

打印结果:

b.something(); //Tell me something good…
a.something(); // Tell me something good…
console.log(‘a:’,a) // a: {a: “a”}
console.log(‘b:’,b) //b: {c: 1, foo: “foo”, b: “b”, something: ƒ}
console.log(‘foo:’,foo) //foo: {c: 1, foo: “foo”, b: “b”, something: ƒ}

发现:

在控制台上打印,看出这两种创建对象区别,十分清晰,create创建的对象只是原型指向foo,之后它俩无任何关系了,无论foo怎么修改,都不会影响a,a添加属性也不会影响foo,new 方式则会相互影响扩展

当要设计通用组件或模块时,假设要调用 a.something(),如果 a中不存在 something()时这条语句也可以正常工作的话,那你的 API 设计就会变得很“神奇”,对于未来维护者来说这可能不太好理解。

但是你可以让你的 API 设计不那么“神奇”,同时仍然能发挥 [[Prototype]] 关联的威力:

var foo= {
	something: function() {
		console.log( "something!" );
	}
};
var a= Object.create(foo);
a.doSomething= function() {
	this.something(); // 内部委托!
};
a.doSomething(); // "something!"

这里我们调用的 a.doSomething() 是实际存在于 a中的,这可以让我们的 API 设计更加清晰(不那么“神奇”)。从内部来说,我们的实现遵循的是委托设计模式,通过 [[Prototype]] 委托到foo.something()。

小结一下吧:

Object.create(…) 会创建一个新对象(bar)并把它关联到我们指定的对象(foo),这样 我们就可以充分发挥 [[Prototype]] 机制的威力(委托)并且避免不必要的麻烦(比如使 用 new 的构造函数调用会生成 .prototype 和 .constructor 引用)。。create()则不会生成这些引用,避免一些不必要的麻烦

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯