javascript - 2种更改javascript对象原型(prototype)的方法，它们之间有什么区别？

Question

我是从stackoverflow上读到的这段代码，说明了如何在javascript中实现“继承”

var Base=function(){this.a='abc'};
var Sub = function () {};
Sub.prototype = new Base(); // note: this pattern is deprecated!
//Because we used 'new', the [[prototype]] property of Sub.prototype
//is now set to the object value of Base.prototype.
//The modern way to do this is with Object.create(), which was added in ECMAScript 5:
Sub.prototype = Object.create(Base.prototype);

我想知道，如果

Sub.prototype = new Base();

已弃用，采用新方式

Object.create(Base.prototype);

介绍正在创建的对象的任何内部差异？任何内部属性差异、行为差异，以至于我应该使用新方法，并尝试将旧代码转换为新代码？

谢谢。

Answer 1

恕我直言，做相关事情的现代方式是 class和相关关键字。

您建议的两个选项会产生不同的结果。参见 classical inheritance with Object.create .您缺少对 super 构造函数的调用以及将 prototype.constructor 重新分配给正确的值(在另一种情况下也缺少)。

如链接中所述，使用 Object.create 进行继承时，与分配 new Base() 相比的一个区别是可以找到属性的位置:

function Base() { this.baseProp = "baseProp"; }
function Sub() { this.subProp = "subProp"; }

Sub.prototype = new Base();
Sub.prototype.constructor = Sub;

let obj = new Sub();
console.log("obj.baseProp: " + obj.baseProp);
console.log("Has baseProp on itself: " + obj.hasOwnProperty("baseProp"));

function Base() { this.baseProp = "baseProp"; }
function Sub() {
  Base.call(this);
  this.subProp = "subProp";
}

//Note that here Base.prototype doesnt even have anything interesting
Sub.prototype = Object.create(Base.prototype);
Sub.prototype.constructor = Sub;

let obj = new Sub();
console.log("obj.baseProp: " + obj.baseProp);
console.log("Has baseProp on itself: " + obj.hasOwnProperty("baseProp"));

另请注意，Object.create 仍将一个额外的间接插入原型(prototype)链(使用其他方法时，包含 Base 属性的对象将位于原型(prototype)链中)。然而，额外的步骤并不是“错误的”，但可以看作是 Sub 的原型(prototype)属性和继承的原型(prototype)属性的拆分(例如，如果你想添加一些东西到 Sub.prototype，如果没有这种间接，你将很难这样做，因为你也会不小心添加到 Base.prototype)

function Base() { this.baseProp = "baseProp"; }
Base.prototype.someFunction = () => void 0;
function Sub() {
  Base.call(this);
  this.subProp = "subProp";
}

//Now this is important, the prototype contains something
Sub.prototype = Object.create(Base.prototype);
Sub.prototype.constructor = Sub;

let obj = new Sub();
console.log("First level link has function: " + obj.__proto__.hasOwnProperty("someFunction"));
console.log("Second level link has function: " + obj.__proto__.__proto__.hasOwnProperty("someFunction"));