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

 更新时间:2022年03月02日 10:48:31   作者:小曼的码世界  
本文主要介绍了js中Object.create()与new的具体实现与区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生js实现简单滑动解锁功能 js实现滑动拼图解锁

    原生js实现简单滑动解锁功能 js实现滑动拼图解锁

    这篇文章主要为大家详细介绍了原生js实现简单滑动解锁功能,js实现滑动拼图解锁,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • js动态添加带圆圈序号列表的实例代码

    js动态添加带圆圈序号列表的实例代码

    这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 微信小程序实现自定义picker选择器弹窗内容

    微信小程序实现自定义picker选择器弹窗内容

    这篇文章主要为大家详细介绍了微信小程序实现自定义picker选择器弹窗内容,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Js和VUE实现跑马灯效果

    Js和VUE实现跑马灯效果

    这篇文章主要为大家详细介绍了Js和VUE实现跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js 金额格式化来回转换示例

    js 金额格式化来回转换示例

    这篇文章主要介绍了js 金额格式化来回转换实现,需要的朋友可以参考下
    2014-02-02
  • js实现窗口全屏示例详解

    js实现窗口全屏示例详解

    这篇文章主要为大家详细介绍了js实现窗口全屏示例,包含全屏事件、退出全屏事件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 同步文本框内容JS代码实现

    同步文本框内容JS代码实现

    这篇文章主要为大家详细介绍了JS实现同步文本框内容的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript变量和变换详情

    JavaScript变量和变换详情

    这篇文章主要介绍了JavaScript变量和变换详情,文章基于JavaScript的相关资料展开相关内容需要的小伙伴可以惨一下
    2022-04-04
  • bootstrap选项卡扩展功能详解

    bootstrap选项卡扩展功能详解

    这篇文章主要为大家详细介绍了bootstrap选项卡扩展功能,增加关闭,超出一行显示下拉,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS基础之undefined与null的区别分析

    JS基础之undefined与null的区别分析

    在JavaScript开发中,被人问到:null与undefined到底有啥区别?一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理。
    2011-08-08

最新评论