JS中Object.create()与new的区别

Object.create()

Object.create()方法创建一个新对象，并使用现有的对象来提供新创建的对象的__proto__，关键代码如下

关键代码如下：

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

可以看到Object.create内部创建了一个新对象newObj,默认情况下newObj.__proto__== F.prototype

在本例中则重写了构造函数F的原型属性，最终的原型关系链为newObj.__proto__== F.prototype == o

详情可以阅读我之前的笔记。

JS中Object.create()的使用与实现

new

new实例化的时候，会执行以下操作。

• 新生成了一个对象newObj
• 将newObj.__proto__链接到TargetClass原型上
• newObj绑定 this到目标类TargetClass上
• 返回新对象newObj

详情可以看我之前的博文

用原生js实现一个new？

new与object.Create的不同

原型链

• Object.create 是创建一个新对象，使用现有的对象来提供新创建对象的 proto。意思就是生成一个新对象，该新对象的 proto（原型） 指向现有对象。

• new 生成的是构造函数的一个实例，实例继承了构造函数及其 prototype（原型属性）上的属性和方法。

new关键字创建的对象会保留原构造函数的属性，而用Object.create()创建的对象不会。

来看如下代码。

两者不同在于，Object.create 创建的新函数并没有继承构造函数的属性和方法，只继承了原型方法和原型属性

这就是为什么组合寄生式继承优于普通的组合继承的地方，因为之前已经继承过一次，不再重复继承多一次原型的属性和方法。

请看如下代码，来直接感受一下Object.create和new在继承实现中的用处，顺带补习一下js中的继承知识。

下面的代码实现的继承方式为一种实例继承。

function SuperType(name) {	
	this.name = name;	
	this.colors = ["red","green","black"];
}; 
SuperType.prototype.sayName = function() {
	return this.name
}; 
function SubType(name, age) {	
	SuperType.call(this, name);	//继承一次
	this.age = age;
}; 

let superType01 = new SuperType("卢本伟")
let subType01 = new SubType("卢本伟", 18)

组合寄生式继承

function SuperType(name) {	
	this.name = name;	
	this.colors = ["red","green","black"];
}; 
SuperType.prototype.sayName = function() {
	return this.name
}; 
function SubType(name, age) {	
	SuperType.call(this, name);	//继承一次
	this.age = age;
}; 

// let superType01 = new SuperType("卢本伟")
// let subType01 = new SubType("卢本伟", 18)

/* 普通组合继承 */
// SubType.prototype = new SuperType();	//继承第二次

/* 组合寄生 */
function inherit(son,father){
    // 步骤一
	let tmpObj = Object.create(father.prototype)	//不发生第二次继承
    console.log(tmpObj)
    
    // 步骤二
	tmpObj.constructor =  son
    
    // 步骤三
	son.prototype = tmpObj
}
inherit(SubType,SuperType)

SubType.prototype.sayAge = function () {return this.age};

let superType02 = new SuperType("伞兵一号")
let subType02 = new SubType("伞兵一号", 18)

原理图如下，我画了好一会的作品呢，足够一目了然了吧！

效率

在效率方面，据说，new操作符每秒能生成28361个实例，而同样条件下，Object.create只能每秒生成663个实例。

参考资料

《MDN文档》

《Object.create()方法详解，与new操作符的区别》b站 https://www.bilibili.com/video/BV1Xk4y1172Y