javascript - 在 Javascript 中重新定义原型(prototype)与附加到原型(prototype)

Question

这个问题在这里已经有了答案:





Defining a Javascript prototype

(5 个回答)


1年前关闭。




从这里:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Performance considerations

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

However, redefining the prototype is not recommended. The following example instead appends to the existing prototype:

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

以上引用和代码来自给定的链接。
我想了解第一个代码如何表明我们正在重新定义原型(prototype)，第二个代码如何表明我们正在附加原型(prototype)？
在上面的代码中，什么代表重新定义，什么代表附加？

Answer 1

当你重新定义 prototype object 您正在创建一个全新的对象，而不是保留现有原型(prototype)及其属性，这是不可取的。
如果我们重新定义原型(prototype)对象，它将打破继承层次。特别instanceof和 Object.prototype.isPrototypeOf不会按预期工作。
让我们举个例子，用 ChildClassOne 展示一个简单的继承层次结构。和 ChildClassTwo继承自 ParentClass .
在第一种情况下，继承被破坏为 prototype被一个全新的对象覆盖，该对象删除了已经存在的所有信息，而不是附加到从 Object.create 接收到的原型(prototype)中。称呼。
在第二种情况下，它按预期工作，因为原型(prototype)没有被替换:

function ParentClass(param) {
  this.param = param;
}
ParentClass.prototype.getParam = function() {
  return this.param;
}

function ChildClassOne(param, name, message) {
  ParentClass.call(param);
  this.name = name.toString();
  this.message = message.toString();
}
//Inheriting through prototype
ChildClassOne.prototype = Object.create(ParentClass.prototype);
ChildClassOne.constructor = ChildClassOne;

//Prototype completely overriden, destroying the hierarchy
ChildClassOne.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

//the instanceof and isPrototypeOf is broken
const child1 = new ChildClassOne("bazz", "foo", "bar");
console.log(child1 instanceof ParentClass);
console.log(ParentClass.prototype.isPrototypeOf(child1));
console.log(ChildClassOne.prototype instanceof ParentClass)

function ChildClassTwo(param, name, message) {
  ParentClass.call(param);
  this.name = name.toString();
  this.message = message.toString();
}

//Inheriting through prototype
ChildClassTwo.prototype = Object.create(ParentClass.prototype);
ChildClassTwo.constructor = ChildClassTwo;

//Preserving the heirarchy information, by appending to existing prototype
ChildClassTwo.prototype.getName = function() {
  return this.name;
};
ChildClassTwo.prototype.getMessage = function() {
  return this.message;
}

//Works as expected
const child2 = new ChildClassTwo("bazz", "foo", "bar");
console.log(child2 instanceof ParentClass);
console.log(ParentClass.prototype.isPrototypeOf(child2));
console.log(ChildClassTwo.prototype instanceof ParentClass)