Object.create与new区别

function A() {
    this.name = 'abc';
}
A.prototype.a = 'a';
A.prototype.showName = function () {
    return this.name;
}
var a1 = new A();
var a2 = Object.create(A.prototype);

在这里插入图片描述

在这里插入图片描述

从这个例子可以看出,a2只继承了A原型的属性和方法,
a1 是构造函数 A 的实例,继承了构造函数 A 的属性 name及其原型属性和方法。

所以Object.create()与new的区别在于Object.create只继承原型属性和方法,继承不了构造函数的属性和方法。而通过new操作符创建的实例,既可以继承原型的属性和方法,又可以继承构造函数的属性和方法。

Object.create()原理

Object.create =  function (o) {
    var F = function () {};
    F.prototype = o;
	return new F();
};

new原理

  • 创建一个空对象obj;
  • 将该空对象的原型设置为构造函数的原型,即obj.proto = func.prototype;
  • 以该对象为上下文执行构造函数,即func.call(obj);
  • 返回该对象,即return obj。
var newFunc = function ( func ){
    var obj = Object.creat(func.prototype);
    var ret = func.call(obj);
    if(typeof ret === 'object') { 
    	return ret;
     }
    else { 
    	return obj;
    }
}

从两者的具体实现可以看出:Object.create没有执行步骤三,所以继承不了构造函数的属性和方法。

继承

a1.__proto__ == a2.__proto__;  // true
a1.__proto__ == A.prototype;  // true
a2.__proto__ == A.prototype;  // true
a1.__proto__.__proto__ == Object.prototype; // true
a1.__proto__.__proto__.__proto__ == null; // true

比较组合继承与寄生组合继承

组合继承

在子类构造函数中调用父类构造函数,并把父类实例化对象赋给子类原型。

function Parent(name, age) {
   this.name = name;
     this.age = age;
}
Parent.prototype.showName = function () {
    return this.name;
}
function Child(name, age) {
    Parent.call(this, name, age);   // 这里调用一次父类构造函数
}
Child.prototype = new Parent();  // 这里也会调用父类构造函数
Child.prototype.constructor = Child;

这种方式在构造函数继承时执行了一遍父类构造函数,又在实现子类原型继承时调用了一遍父类的构造函数。因此父类构造函数调用了两遍,所以这不是最优化的继承方式。

寄生组合继承

function Parent(name, age) {
   this.name = name;
     this.age = age;
}
Parent.prototype.showName = function () {
    return this.name;
}
function Child(name, age) {
    Parent.call(this, name, age);   // 这里调用一次父类构造函数
}
Child.prototype = Object.create(Parent.prototype);  // 这里避免了调用父类构造函数
Child.prototype.constructor = Child;

到此这篇关于浅谈js中Object.create()与new的具体实现与区别的文章就介绍到这了,更多相关Object.create()与new区别内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

浅谈js中Object.create()与new的具体实现与区别的更多相关文章

  1. 简单了解JavaScript中的new Function

    这篇文章主要介绍了简单了解JavaScript中的new Function,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  2. javascript new后的constructor属性

    new后的constructor属性使用说明,需要的朋友可以参考下。

  3. 浅谈js中Object.create()与new的具体实现与区别

    本文主要介绍了js中Object.create()与new的具体实现与区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. JS new操作原理及手写函数模拟实现示例

    这篇文章主要为大家介绍了JS new操作原理及手写函数模拟实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  5. 详解new function(){}和function(){}() 区别分析

    只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象。

  6. JavaScript中new操作符的原理与实现详解

    你知道new吗?你知道new的实现原理吗?你能手写new方法吗?不要担心,这篇文件就来带大家深入了解一下JavaScript中的new操作符,感兴趣的小伙伴可以学习一下

  7. PHP的new static和new self的区别与使用

    这篇文章主要介绍了PHP的new static和new self的区别与使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. 实例详解jQuery的无new构建

    这篇文章运用实例介绍了jQuery的无new构建,小编感觉介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧。

  9. vue如何使用文件流进行下载(new Blob)

    这篇文章主要介绍了vue如何使用文件流进行下载(new Blob),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  10. 关于Js中new操作符的作用详解

    这篇文章主要给大家介绍了关于关于Js中new操作符作用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部