如何使用JavaScript對象文字進行繼承？

Question

您好我在使用對象文字語法聲明對象原型時如何進行繼承有問題。

我制作了兩個小提琴來幫助你。

• 小提琴1，這個有效
• 小提琴2，這個不起作用

這是我的基類，幾乎所有對象都是以這種方式在我的應用程序中定義的：

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

你想要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;
}

Answer 2

您需要擴展原始原型，而不是將新對象指定為原型。

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