如何在JavaScript对象字面量中实现继承？

Question

如何在JavaScript对象字面量中实现继承？

5

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

我已经创建了两个JSFiddle来帮助您帮助我。

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

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

- user425367

3

我不理解你的意图。JSON是一种文本数据格式，与对象继承无关。你是不是指JavaScript字面对象表示法？ - RoToRa

这可能非常符合我的意思，JavaScript 的正确术语并不是我擅长的领域。这也是为什么我没有说 JSON，而是说 JSON 风格。 - user425367

@Farmor “我想使用对象字面量进行编程”。 - Raynos

我对问题进行了一些小的编辑，将术语更改为“对象字面量”。或者应该是“对象字面量”？我认为从现在开始应该使用“对象字面量”。 - nnnnnn

2个回答

0

你需要扩展原型而不是将新对象分配为原型。

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 () {}
});

- J. K.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raynos · Accepted Answer

您想使用 Object.make。请查看示例。

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

如果你想要一个符合ES5标准的Object.make实现，可以直接使用。

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