Javascript variable has different value in anonymous callback

Question

I came across this bug and didn't find an example anywhere. Documenting here for reference.

The problem was that when calling o.callback() in the example below, the value of x changes between defining and executing the callback.

p = {
    f: function () { x = 'p.f() local'; }
};
o = {
    f: function () {
        x = 'o.f() local';
        this.callback = function () { console.log(x); };
    }
};
o.f();
p.f();
o.callback.apply();

The output here is:

p.f() local

While I expected:

o.f() local

Update Here's a jsfiddle: http://jsfiddle.net/elplatt/kzS5A/1/

Pointy · Accepted Answer · 2014-03-10 15:59:52Z

1

The variable "x" is global, because it's not declared explicitly with var. Thus all of those functions reference the same "x".

Object properties in JavaScript must always be explicitly referenced as such. That is, unlike languages like C++ or Java, JavaScript provides for no implicit references to "member variables". If you want a property "x" on those objects, you'll have to refer to it as this.x.

answered Mar 10, 2014 at 15:59

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

1 Comment

elplatt Over a year ago

That would give the desired output in this example. It's a slightly different behavior from what I intended. this.x would always refer to o.x while var x would be a different variable each time o.f() gets called.

elplatt · Accepted Answer · 2014-03-10 16:01:36Z

0

This is fixed by using var to define x

var x = 'o.f() local'

The x in both o.f and p.f was in global scope because it was never declared with var.

answered Mar 10, 2014 at 16:01

elplatt

3,4074 gold badges21 silver badges20 bronze badges

4 Comments

Pointy Over a year ago

That will change things, but now that callback function will have access to neither of those variables.

elplatt Over a year ago

Not true, that confuses scope with context. Using var makes x within the local scope refer to x in the global context (window). Using this.x refers to x within the context of whatever object "this" is.

Pointy Over a year ago

That is incorrect. A var declaration inside a function creates a variable that is local to that function.

elplatt Over a year ago

Sorry, I meant to say not using var makes x within the local scope refer to x in the global context. You are correct that using var x creates a variable local to that function (with no context).

Collectives™ on Stack Overflow

Javascript variable has different value in anonymous callback

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related