oop - How to do inheritance with JavaScript object literals? - Stack Overflow

admin管理员组

文章数量:1410724

Hello I have a problem with how to do inheritance while declaring object prototypes with object literal syntax.

I have made two Fiddles to help you help me.

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

This is my base class, almost all objects is defined in this way in my application:

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

This is how I succeed extending and overriding methods in 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/>");
}

But I wanted to use the same style as the rest of the application so I started playing around with object literals but it is driving me nuts eagerly cheered on by eclipse and firebug with its nonsense response to my syntax.

Now on to the question of how do I convert my succeeded extension code to object literal style? Here is one of many attempts (it don't pile but will give you an rough idea how I want the code to look like.)

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

Hello I have a problem with how to do inheritance while declaring object prototypes with object literal syntax.

I have made two Fiddles to help you help me.

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

This is my base class, almost all objects is defined in this way in my application:

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

This is how I succeed extending and overriding methods in 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/>");
}

But I wanted to use the same style as the rest of the application so I started playing around with object literals but it is driving me nuts eagerly cheered on by eclipse and firebug with its nonsense response to my syntax.

Now on to the question of how do I convert my succeeded extension code to object literal style? Here is one of many attempts (it don't pile but will give you an rough idea how I want the code to look like.)

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

• javascript
• oop
• inheritance

Share Improve this question Follow edited Nov 18, 2011 at 11:36 nnnnnn 150k3030 gold badges209209 silver badges247247 bronze badges asked Nov 18, 2011 at 11:20 user425367user425367 4

• 3 I don't understand what you are attempting. JSON is a text data format and has nothing to do with object inheritance. Do you maybe mean JavaScript literal object notation? – RoToRa Commented Nov 18, 2011 at 11:24
• It may very well be what I mean, the correct terminology of JavaScript is not my strong suit. It's also why I didn't say JSON but JSON style. – user425367 Commented Nov 18, 2011 at 11:29
• @Farmor "I want to program by using object literals". – Raynos Commented Nov 18, 2011 at 11:36
• I've made some minor edits to the question to change the terminology to "object literals". Or should that have been "objects literal"? I think from now on "objects literal" it shall be. – nnnnnn Commented Nov 18, 2011 at 11:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

If you want an ES5 pliant implementation of Object.make to just plug into your code then use

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

You need to extend the original prototype rather than assigning a new object as the prototype.

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

本文标签： oopHow to do inheritance with JavaScript object literalsStack Overflow