JavaScript simple object inheritance

Question

We are using a widget that takes object as parameter. I want some king of object inheritance to customize widget. Default setting should be default then inherit object (add and update properties) which should give desired object as shown in code below.

defaultSettings = {

     setting1 = "setting1 value"; 
     setting2 = "setting2 value"; 

}

customSettings  = {

     setting2 = "setting2 value - custom";  //Overwrite defaultSettings 2    
     setting3 = "setting3 value";  //New Setting 

}

finalObject = {

    setting1 = "setting2 value - custom"; 
    setting2 = "setting2 value"; 
    setting3 = "setting2 value"; 
}

I have googled before asking this but not sure that is most efficient techniques to achieve this?

Here you go: http://www.klauskomenda.com/code/javascript-inheritance-by-example/ — Allov, May 24 '13 at 12:56
Duplicate of this? http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically — net.uk.sweet, May 24 '13 at 12:57
Use or just view the source of http://underscorejs.org/#defaults — Stefan, May 24 '13 at 12:57
http://stackoverflow.com/questions/14749020/default-hash-values — Jan Turoň, May 24 '13 at 13:03

T.J. Crowder · Answer 1 · 2013-05-24T13:15:15.340

Inheritance wouldn't usually be the way to do what you're describing. Instead, what you usually do is have an object with defaults:

var defaults = {
   setting1: "default1",
   setting2: "default2",
   setting3: "default3"
};

...and then have the function accept an object which may have any of those properties (or not have them), and then build a combined result, like this:

function apiCall(o) {
    var options = {};
    var key;

    for (key in defaults) {
        options[key] = defaults[key];
    }
    for (key in o) {
        options[key] = o[key];
    }

    // ...then use `options` here...
}

This is such a common pattern that a number of libraries have functions for it, such as jQuery's extend, Prototype's extend, etc.

A general-purpose extend accepting an arbitrary number of objects (each object having precedence over the previous one) looks like this:

function extend() {
    var rv = {},
        key,
        source,
        index;

    for (index = 0; index < arguments.length; ++index) {
        source = arguments[index];
        for (key in source) {
            rv[key] = source[key];
        }
    }

    return rv;
}

If you had an extend like that, then the API call function looks like this instead:

function apiCall(options) {
    options = extend(defaults, options);

    // ...
}

But if you are interested in inheritance in JavaScript, I created a helper library called Lineage to make it easier, and I write about JavaScript (including inheritance) on anemic little my blog periodically.

score 0 · Answer 2 · answered May 24 '13 at 12:59

0

If you're using Node.js you can use util.inherits(constructor, superConstructor). If you aren't, here is some library-dependent documentation:

Prototype: http://prototypejs.org/learn/class-inheritance
jQuery: http://api.jquery.com/jQuery.extend/

Implementations may differ (e.g. deep copy), so I'ld recommend you to test it thoroughly before marking it ready for production.

answered May 24 '13 at 12:59

cutsoy

10,127
4
40
57

Please note that this only works after you converted your settings-hashes into Object Oriented code first (manually). – cutsoy May 24 '13 at 13:00

Gustavo S. Rodrigues · Answer 3 · 2013-05-24T13:53:17.467

You can set default values in the class, and if you pass values, the class assumes these values.

var foo = function (settings){
    this.Settings = settings || {};

    this.Settings.a = this.Settings.a  || 'Default';
    this.Settings.b = this.Settings.b  || 'Default'
    console.log(this.Settings)
}

//default
var test = new foo(); //Object {a: "default", b: "default"}

//custom
var settings = {
    a:'a', 
    b:'b'
};
var x = new foo(settings); // Object {a: "a", b: "b"}


//add new settings
x.Settings.c = 'test';

console.log(x.Settings); // Object {a: "a", b: "b", c: "test"}

JavaScript simple object inheritance

3 Answers3