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

目录
  • Object.create与new区别
  • 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区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript中使用Object.create()创建对象介绍

    对于对象的创建,除了使用字面量和new操作符,在ECMAScript 5标准中,还可以使用Object.create()来进行.Object.create()函数接受2个对象作为参数:第一个对象是必需的,表示所创建对象的prototype:第二个对象是可选的,用于定义所创建对象的各个属性(比如,writable.enumerable). 复制代码 代码如下: var o = Object.create({x:1, y:7}); console.log(o);//Object {x=1, y=7}

  • 一种新的javascript对象创建方式Object.create()

    Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的. 例如: function Car (desc) { this.desc = desc; this.color = "red"; } Car.prototype = { getInfo: function() {

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

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

    目录 Object.create与new区别 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

  • 浅谈js中字符和数组一些基本算法题

    最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping  这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式 方法,我想值得借鉴.比如在项目中有时候要处理一个字符,如果想不到一些相关的方法,还挺费事的,所以,在此记录下来,如果以后遇到一些字符或者数组处理,可以来翻翻这篇文章,希望以此得到一些提示而不是去翻文档. 看到此博文的博友,有更好更简单的代码或者好的想法,请留言交流(我一直觉得只有学习别人的优秀代码才能进

  • 浅谈js中对象的使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; //此对象中的author属性的值还是一个对象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //创建一个空对象和{}一样 var o4=new Object(); //给对象增加name属性 o4.name='JS' 上面使用了两

  • 浅谈JS中json数据的处理

    浅谈JS中json数据的处理

    1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组:var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}]; 2. 处理json数据,依赖文件有:jQuery.js

  • 浅谈JS中的常用选择器及属性、方法的调用

    选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="

  • 浅谈js中的attributes和Attribute的用法与区别

    一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值: setAttribute:建立一个属性,并同时给属性捆绑一个值: createAttribute:仅建立一个属性: removeAttribute:删除一个属性: getAttributeNode:获取一个节点作为对象: setAttributeNode:建立一个节点: removeAttributeNode:删除一个节点: 1.getAttrib

  • 浅谈js中的in-for循环

    浅谈js中的in-for循环 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </hea

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • 浅谈js中的this问题

    this this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上 this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得靠自己去慢慢体会) 只有方法在对象上,对象调用当前方法,指向当前对象 function fnThis(){ let user='js'; console.log(this.user)//undefined console.log(this)//global(window) } fnThis(); 这

  • 浅谈JS中的三种字符串连接方式及其性能比较

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

随机推荐