I want my JavaScript class to be configurable from the outside. So, I created a private config-property and a loadConfig-method. My problem is, that when I load a config, it overwrites the config-property pletely and not just the properties I defined.

(function() {
var config = {
    param: value,
    group: {
        groupParam: value
    }
};
function MyClass() {
    this.loadConfig = function(loadConfig) {
        if (typepof loadConfig == "undefined" || typeof loadConfig == "null")
            return;
        else
            config = loadConfig;
    };  
}
window.MyClass = new MyClass();
})();

When I load a custom config

<script type="text/javascript">
    var config = {
        group: {
            groupParam: "newValue"
        }
    };

    MyClass.loadConfig(config);
</script>

I want config.param to still be "value", while config.group.groupParam is "newValue".

Currently, the object is overwritten and after loadConfig(), config.param doesn't exist anymore.

I want my JavaScript class to be configurable from the outside. So, I created a private config-property and a loadConfig-method. My problem is, that when I load a config, it overwrites the config-property pletely and not just the properties I defined.

(function() {
var config = {
    param: value,
    group: {
        groupParam: value
    }
};
function MyClass() {
    this.loadConfig = function(loadConfig) {
        if (typepof loadConfig == "undefined" || typeof loadConfig == "null")
            return;
        else
            config = loadConfig;
    };  
}
window.MyClass = new MyClass();
})();

When I load a custom config

<script type="text/javascript">
    var config = {
        group: {
            groupParam: "newValue"
        }
    };

    MyClass.loadConfig(config);
</script>

I want config.param to still be "value", while config.group.groupParam is "newValue".

Currently, the object is overwritten and after loadConfig(), config.param doesn't exist anymore.

• javascript
• jquery
• object
• configuration

Share Follow edited Jun 10, 2011 at 7:42 kapa 78.7k2121 gold badges165165 silver badges178178 bronze badges asked May 27, 2011 at 7:12 F.PF.P 17.9k3434 gold badges126126 silver badges194194 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you don't want to reinvent the wheel, jQuery has a great function called $.extend() which seems to be what you need.

You can check it out in the jQuery 1.6.1 source for example ( Ctrl + F and "extend" => been a long time since I've been waiting to use these keyboard things once :) ).

It's overwritten because you're telling it to overwrite with this line in your loadConfig method:

config = loadConfig;

In order to preserve any values that loadConfig does not explicitly change, you'll have to loop through all of the properties in loadConfig and assign them individually:

this.loadConfig = function (loadConfig) {
    if (typeof loadConfig == "undefined" || typeof loadConfig == "null") {
        return;
    } else {
        var x;
        for (x in loadConfig) {
            if (Object.prototype.hasOwnProperty.call(loadConfig, x)) {
                config[x] = loadConfig[x];
            }
        }
    }
};