扩展 JavaScript 中已定义的 class

Question

在 JS 中扩展 classes 的传统方式是这样的：

// 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
    }
});

然后你把你想要的方法添加到原型中

Fuu.prototype.method = function() {}

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

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

编辑： 示例

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. Using defineProperty and 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 or __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.

Answer 2

我认为您建议的方法可能是最佳选择。有没有你认为是错误的原因？

var old = Fuu.prototype;
Fuu.prototype = Object.create(OtherClass.prototype, {
    constructor: {
        value: Fuu, 
        enumerable: false, 
        writable: true, 
        configurable: true
    }
});
var names = Object.getOwnPropertyNames(old);
for (var i = 0; i < names.length; i++) {
    var name = names[i];
    Fuu.prototype[name] = old[name];
}

我唯一担心的是您的 constructor 方法被旧版本覆盖，并且您的旧原型的原型链丢失；但是你可以做一些事情来解决这个问题。

扩展 JavaScript 中已定义的 class

Extend already defined class in JavaScript

javascript

inheritance