在 JavaScript 中扩展已经定义的类答案

【问题标题】：Extend already defined class in JavaScript在 JavaScript 中扩展已经定义的类
【发布时间】：2015-04-27 01:18:37
【问题描述】：

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

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

Fuu.prototype.method = function() {}

就像你有一个扩展另一个函数一样。一个很好的 JS 继承示例！

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

编辑：示例

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, {...})

【问题讨论】：

你能举个例子说明你正在尝试做什么吗？

标签： javascript inheritance

【解决方案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;
```
但是，请注意

改变对象的 [[Prototype]] 的本质是现代 JavaScript 引擎优化属性访问，非常慢操作，在每个浏览器和 JavaScript 引擎中。对的影响变异原型的性能 [...] 可以扩展到任何代码可以访问任何 [[Prototype]] 已发生变异的对象。如果你关心性能，你应该避免改变 [[Prototype]] 的一个对象。

【讨论】：

谢谢，也许我会使用getOwnPropertyNames 为您提供第一个选项。我以为我可以用 Fuu.prototype.prototype 做点什么，但我没有意识到 Fuu.prototype 是一个实例。
作为@Wio cmets，我还关心旧原型的构造函数属性。现在想起来有点晚了......以这种方式复制旧的构造函数是我想要做的吗？
@olanod constructor 应该没有问题。由于是自己的属性，所以会包含在getOwnPropertyNames返回的数组中，所以会被复制。并且setPrototypeOf 不会影响自己的属性。

【解决方案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 方法被旧版本覆盖，并且您的旧原型的原型链丢失；但是你可以做一些事情来解决这个问题。

【讨论】：