Function prototype object is changed on another instance

Question

I am trying to put default object values in a prototype of an function. But that is causing prototype "defaults" object to be changed by another instance. Why is that happening? I know I can put defaults object inside function, but that is not what I would like to do. Can someone explain me why prototype variable is overridden by second instance? Demo is here: https://jsfiddle.net/c0zg5vjp/2/

window.foo = function(options) {

    this.settings = jQuery.extend({}, this.defaults, options || {});

    this.bar = function() {

        this.settings.classes.push('new_class');
    }
}

window.foo.prototype.defaults = { 'classes' : ['default'] };

var instance = new foo();

instance.bar();

var instance_2 = new foo();

instance_2.bar();

alert( instance_2.settings.classes.join() );

CodingWithSpike · Accepted Answer · 2017-08-03 20:18:48Z

2

jQuery.extend({}, this.defaults

is setting a property named classes on a new object, and setting it to the same memory pointer to the array ['default'] as the original.

In other words, both instances have separate "settings" objects that both have a classes property that point to the same array.

You should use the "deep" version of extend: https://api.jquery.com/jquery.extend/#jQuery-extend-deep-target-object1-objectN

jQuery.extend(true, {}, this.defaults, ...

which would recurse into your array and clone that too.

answered Aug 3, 2017 at 20:18

CodingWithSpike

43.9k18 gold badges106 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function prototype object is changed on another instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related