如何使用 JavaScript 对象字面量进行继承？

Question

您好，我在使用对象字面量语法声明对象原型时遇到了一个问题。

我已经制作了两个小提琴来帮助你帮助我。

• Fiddle1, This one works
• Fiddle2, This one doesn't work

这是我的基类，几乎所有对象在我的应用程序中都是这样定义的：

Base = function(param){
    this.init(param);
}
Base.prototype = {
    init: function(param){
        this.param = param;
    },
    calc: function(){
        var result = this.param * 10;
        document.write("Result from calc in Base: " + result + "<br/>");
    },
    calcB: function(){
        var result = this.param * 20;
        document.write("Result from calcB in Base: " + result+ "<br/>");
    }
}

这就是我在 Base 中成功扩展和覆盖方法的方式：

Extend = function(param){
    this.init(param);
}
Extend.prototype = new Base();

Extend.prototype.calc = function(){
    var result = this.param * 50;
    document.write("Result from calc in Extend: " + result+ "<br/>");
}

但是我想使用与应用程序的其余部分相同的样式，所以我开始使用对象文字，但它让我发疯，因为 eclipse 和 firebug 对我的语法的无意义响应而热切地欢呼。

现在的问题是如何将成功的扩展代码转换为对象字面量样式？ 这是众多尝试之一（它不会编译，但会让您大致了解我希望代码的外观。）

Extend = function(param){
    this.init(param);
}
Extend.prototype = {
    : new Base(),
    calc: function(){
        var result = this.param * 50;
        document.write("Result from calc in Extend: " + result+ "<br/>");
    }
}

Answer 1

您需要扩展原始原型，而不是分配一个新对象作为原型。

function extend(original, extension) {
  for (var key in extension) {
    if (extension.hasOwnProperty(key)) {
      original[key] = extension[key];
    }
  }
};

var A = function () {};
var B = function () {};
B.prototype = new A();
extend(B.prototype, {
   methodName: function () {}
});

Answer 2

你想要Object.make。 Live Example

Extend = function(param){
    this.init(param);
}
Extend.prototype = Object.make(Base.prototype, {
    constructor: Extend,
    calc: function(){
        var result = this.param * 50;
        document.write("Result from calc in Extend: " + result+ "<br/>");
    }
});

如果您希望 Object.make 的 ES5 兼容实现仅插入到您的代码中，请使用

Object.make = function make (proto) {
    var o = Object.create(proto);
    var args = [].slice.call(arguments, 1);
    args.forEach(function (obj) {
        Object.getOwnPropertyNames(obj).forEach(function (key) {
            o[key] = obj[key];
        });
    });
    return o;
}