Javascript Function Scope vs Object Scope

Question

I've gotten to the point where I am trying to fill out my javascript knowledge with some of the more advaned concepts.

I think I a pretty much understand how scope works. Where objects inherit from a prototype and then global scope, while functions offer a more traditional block scope within themselves.

What I am have trouble understanding is this:

function a(){
  console.log(this.z);
  }

a.z = 12;

a(); //returns undefined :(

I was expecting to echo out 12, but of course, it doesn't. Where exactly is z being stored? what does "this" refer to in the example?

A(); will ignore the z to be set. You can do: a = new a(); and a.z = 12; — pascalvgemert
– pascalvgemert, Commented May 12, 2014 at 6:21
this does not (usually) refer to the function-object (and is not related to the scope of the function at all!); rather, it refers to the "context" of the function — user2864740
– user2864740, Commented May 12, 2014 at 6:25
See stackoverflow.com/questions/3127429/javascript-this-keyword — user2864740
– user2864740, Commented May 12, 2014 at 6:27

thefourtheye · Accepted Answer · 2014-05-12 06:22:05Z

2

When you call a function, JavaScript will set the current context (this) as the object on which it is called. If the function is not attached to any object, by default global object (window object in browsers) will be used ^*.

So, in this case, this refers to the global object, not a. In the global object, z hasn't been defined yet. That is why it returns undefined.

To get the value 12, you need to access it like this

function a() {
    console.log(a.z);   // Use `a` itself, instead of `this`.
}

a.z = 12;

a();

^{* In strict mode, this will be set to undefined, if the function is called without any explicit object reference.}

answered May 12, 2014 at 6:22

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

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

1 Comment

Greg G Over a year ago

Light bulb went off. A lot of code patterns I have been seeing make sense now. Thank you

Collectives™ on Stack Overflow

Javascript Function Scope vs Object Scope

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related