javascript - 在 JavaScript 中扩展已经定义的类

Question

在 JS 中扩展类的传统方式是这样的:

// define constructor function
function Fuu(){}
// extend prototype and override prototype's constructor
Fuu.prototype = Object.create(OtherClass.prototype, {
    constructor: {
        value: Fuu, 
        enumerable: false, 
        writable: true, 
        configurable: true
    }
});

然后您将想要的方法添加到原型(prototype)

Fuu.prototype.method = function() {}

就像你有一个功能扩展另一个。一个很好的 JS 继承示例!

我的问题是当子类已经有一个带有方法和属性的原型(prototype)时如何扩展。我可以尝试使用 for in 循环将旧原型(prototype)的方法复制到新原型(prototype)，但这些方法是不可枚举的(类是用转换器创建的)并使用 getOwnPropertyNames 做一些事情 好像不对。有什么建议吗？我可以做一些事情，比如保留原型(prototype)并向原型(prototype)添加原型(prototype)吗？

编辑:示例

class Fuu {
    someMethod(){} // non enumerable method in Fuu's prototype
}

// My first option: (extending this way `someMethod` is lost)
Fuu.protoype = Object.create(HTMLElement.prototype, {//...same as before})

// Option 2: copy methods from old to new prototype

// Option 3: prototype of prototype?
// Fuu.prototype.prototype = Object.create(HTMLElement.prototype, {...})

Answer 1

你想要类似的东西

            ┌──> Fuu.prototype
instances ──┤
            └──> OtherClass.prototype

但那是不可能的，因为对象只有一个 [[Prototype]]。

因此，您必须实现其中之一:

instances ───> Fuu.prototype ───> OtherClass.prototype
instances ───> OtherClass.prototype ───> Fuu.prototype

因此您必须将其中一个的 [[Prototype]] 设置为另一个。我会假设第一种可能性。

设置[[Prototype]]主要有两种方式:

• Object.create , 创建对象时

  问题是 Fuu.prototype 和 OtherClass.prototype 都已经创建了。

  但是，您可以使用正确的 [[Prototype]] 创建一个新对象并分配旧对象的属性。

  由于可能存在不可枚举的属性，所以必须使用getOwnPropertyNames .使用 defineProperty和 getOwnPropertyDescriptor如果有 getter 或 setter，这也可能是个好主意。

  var old = Fuu.prototype,
      props = Object.getOwnPropertyNames(old);
  Fuu.prototype = Object.create(OtherClass.prototype);
  for(var i=0; i<props.length; ++i)
     Object.defineProperty(
       Fuu.prototype,
       props[i],
       Object.getOwnPropertyDescriptor(old, props[i])
     );
  

• setPrototypeOf或 __proto__ (ES6)，一旦创建了对象:

  Object.setPrototypeOf(Fuu.prototype, OtherClass.prototype);
  

  Fuu.prototype.__proto__ = OtherClass.prototype;
  

  但是，请注意

  Mutating the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in every browser and JavaScript engine. The effects on performance of mutating prototypes [...] may extend to any code that has access to any object whose [[Prototype]] has been mutated. If you care about performance you should avoid mutating the [[Prototype]] of an object.