Javascript Constant Setting Variable

Question

When running this code, the whatever value is first passed in with the constructor Test(callbacks) becomes the callback that is always called, even in later instantiations of Test

function Test(callbacks) {
    if (callbacks) {
        if (callbacks.callback) {
            this.callback = callbacks.callback;
        }
    }

    this.options.complete = $.proxy(this.options.complete, this);
}

Test.prototype = {
    options: {
        type: "GET",
        complete: function() {
            this.callback();
        }
    },
    callback: function() { console.log("OVERRIDE ME"); },

    execute: function() {
        $.ajax(this.options);
    }
};

var eins = {callback: function() {console.log("AAA");}};
var zwei = {callback: function() {console.log("BBB");}};

var A = new Test(eins);
var B = new Test(zwei);

A.execute();
B.execute();

Running this code, every time you will get the output AAA. How does function() {console.log("AAA");} become a constant value for the prototype?

possible duplicate of Crockford's Prototypal inheritance - Issues with nested objects or Why are my JS object properties being overwritten by other instances — Bergi
– Bergi, Commented Dec 13, 2012 at 20:39

machineghost · Accepted Answer · 2012-12-13 20:38:43Z

1

It all starts with this line:

this.callback = callbacks.callback;

When you make a call new Test(eins), eins comes in as the callbacks argument. That line then sets this.callback (ie. the "callback" property on your new instance of Test) to the callback property of callbacks, ie. of eins.

Now, that alone wouldn't affect B. However, there's something tricky:

this.options.complete = $.proxy(this.options.complete, this);

You would think that that would set the "options" property on your Test instance, right? Wrong. The way Javascript works is that if a property isn't defined on your instance (eg. you didn't do this.options = something) then Javascript will look up the "prototype chain", where it will find the prototype's "options", and set it (not your instance's "options", since your instance doesn't have one).

You can fix all this by changing that line to:

this.options = {complete: $.proxy(this.options.complete, this)};

but of course that would lose your type: "GET", so either you need to do:

this.options = {type: "GET", complete: $.proxy(this.options.complete, this)};

or you need to base your options off the prototype's:

this.options = {};
for (var key in this.prototype.options) {
    this.options[key] = this.prototype.options[key];
}
this.options.complete = $.proxy(this.options.complete, this);

If you happen to be using the (excellent) Underscore library, it even has an extend function for doing this sort of thing more easily:

this.options = _.extend({}, this.prototype.options,
                        {complete: $.proxy(this.options.complete, this)});

Or (depending on your style preferences):

this.options = _.extend({}, this.prototype.options);
this.options.complete = $.proxy(this.options.complete, this);

Incidentally, Underscore also has a _.bind method which is comparable to jQuery's "proxy", so you could also do:

this.options = _.extend({}, this.prototype.options);
this.options.complete = _.bind(this.options.complete, this);

edited Dec 13, 2012 at 20:38

answered Dec 13, 2012 at 20:27

machineghost

36k33 gold badges174 silver badges270 bronze badges

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

3 Comments

machineghost Over a year ago

I never said it wasn't :-) The question was "How does function() {console.log("AAA");} become a constant value for the prototype?", and the answer is that it happens in that line.

user372743 Over a year ago

FWIW, jQuery also has $.extend, but I do agree, Underscore is a nice library. Luckily, OO JS is not too much of a common thing for me.

machineghost Over a year ago

There's some subtle difference between the jQuery extend and the Underscore one, but I couldn't remember what that difference was so I stuck to Underscore's in my example. But yeah, you can totally use jQuery's too.

Denys Séguret · Accepted Answer · 2012-12-13 20:35:10Z

0

When you do

    this.options.complete = $.proxy(this.options.complete, this);

You're replacing the options.complete function of the prototype by one that will always have this as context.

The problem is that you don't have a this.options object proper to this, but only one shared with all objects having the same prototype.

edited Dec 13, 2012 at 20:35

answered Dec 13, 2012 at 20:27

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Collectives™ on Stack Overflow

Javascript Constant Setting Variable

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related