资讯专栏INFORMATION COLUMN

简述ES5之object.create()和new() 的区别 都做了哪些事

mmy123456 / 1515人阅读

摘要:注意该参数对象不能是,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。并且使用进行强转作用环境。从而实现了实例的创建。

先说一下object.create()

es5中新增的object操作方法object.create() 接受两个参数:
Object.create(obj,propertiesObject);

obj :    一个对象,是新创建的对象的原型。 即:创建一个空对象,空对象的原型是参数obj.

propertiesObject:可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties()的第二个参数一样)。注意:该参数对象不能是undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。 即:
propertiesObject = {
like:{ value:"fish", // 初始化赋值
writable:true, // 是否是可改写的
configurable:true, // 是否能够删除,是否能够被修改
enumerable:true //是否可以用for in 进行枚举 } ..... }

    var o = Object.create(null);
    console.log(o); // {}
    o.name = "jian";
    var o2 = Object.create(o);
    console.log(o2); // {}
    console.log(o2.name); // "jian", 
    
    没有找到o2的name属性==> {}   但是在原型链上面可以访问到 name属性
    所以object.create()创建一个空对象 然后空对象的原型是参数obj
   

  

再来说说new() :

创建空对象;

设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象;

使用新对象调用函数,函数中的this被指向新实例对象:

  ClassA.call(obj);  //{}.构造函数();

将初始化完毕的新对象地址,保存到等号左边的变量中

一个包含两个方法的例子

    
    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}
    
    
    

看完上面的例子应该可以区分两个方法的区别了

总结

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

var o1 = new Object();
o1.[[Prototype]] = Base.prototype;
Base.call(o1);
new做法是新建一个对象,并且让对象的__proto__指向了Base.prototype对象。并且使用call 进行强转作用环境。从而实现了实例的创建。

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

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

相关文章

  • 如何继承Date对象?由一道题彻底弄懂JS继承。

    摘要:前言见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。倘若用的是中文搜索。所以最终的实例对象仍然能进行正常的原型链回溯,回溯到原本的所有原型方法这样通过一个巧妙的欺骗技巧,就实现了完美的继承。 前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。 20180201更新: 修改用词描述,如组合寄生式改成寄生组合式,修改多处笔误(感谢@Yao Ding的...

    sunnyxd 评论0 收藏0
  • 前端面试题大集合:来自真实大厂532道面试题(只有题,没有答案)

    答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比,两者中间件的原理,koa捕获异常多种情...

    Kerr1Gan 评论0 收藏0
  • 前端面试题大集合:来自真实大厂532道面试题(只有题,没有答案)

    答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比,两者中间件的原理,koa捕获异常多种情...

    lushan 评论0 收藏0
  • 前端面试题大集合:来自真实大厂532道面试题(只有题,没有答案)

    答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比,两者中间件的原理,koa捕获异常多种情...

    joyvw 评论0 收藏0
  • JavaScript 原型系统变迁,以及 ES6 class

    摘要:一般我们对这种构造函数命名都会采用,并把它称呼为类,这不仅是为了跟的理念保持一致,也是因为的内建类也是这种命名。由生成的对象,其是。这是标准的规定。本文的主题是原型系统的变迁,所以并没有涉及和对原型链的影响。 概述 JavaScript 的原型系统是最初就有的语言设计。但随着 ES 标准的进化和新特性的添加。它也一直在不停进化。这篇文章的目的就是梳理一下早期到 ES5 和现在 ES6,...

    chuyao 评论0 收藏0

发表评论

0条评论

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