Scope of JavaScript Objects

Question

Quick question about JSON in general, say I had:

var foo = {
  a: null,
  init: function() {
    this.a = document.getElementById(...);
  }
}

This will give have a with null. Is there anyway to go outside this scope and get the document element other than doing it externally via foo.a = document.getElementById(...)?

EDIT: Changed title more appropriately.

I am calling foo.init(), but when I do this, say I have:

and then I call init.foo() which contains this.a = document.getElementById('test') it seems to return NULL, perhaps I am doing something wrong.

Sorry, I don't see any JSON in this question. Could you describe what you're trying to do a little more clearly? — Mark Bessey
– Mark Bessey, Commented Feb 19, 2011 at 22:33
@dan04's correct, this is JSON, as long as you remove the N. — Brad Christie
– Brad Christie, Commented Feb 19, 2011 at 22:34
I am not entirely sure what the question is. Do you want to execute the function without referring 'a'? — Puneet
– Puneet, Commented Feb 19, 2011 at 22:35

Jeff · Accepted Answer · 2011-02-19 22:39:02Z

2

This works fine:

var foo = {
  a: null,
  init: function() {
    this.a = document.getElementById('test');
  }
}

foo.init();
console.log(foo.a);

http://jsfiddle.net/dwhxN/

answered Feb 19, 2011 at 22:39

Jeff

4,16625 silver badges32 bronze badges

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

Comments

user236139 · Accepted Answer · 2011-02-19 22:40:38Z

This is not JSON. JSON is a lightweight data exchange format which is similar to JavaScript (hence the name JavaScript Object Notation). This is just regular JavaScript.

Nonetheless, I'm not 100% sure what you're asking. In your example, if you ran foo.init(), then foo.a would be reassigned to document.getElementById(...). If you're wanting to get the global object, then there's this old trick:

var foo = {
    a: null,
    init: function () {
        (function () {
            this.test = 1;
        })();
    }
};

In that example, running foo.init() will create the global variable test with a value of 1. If you mean getting the document element, as you said, then it is just as easy as referencing document (just as you did). If you mean changing the value of foo.a inside of foo.init, then there are only the two methods of using foo.a and this.a that I'm aware of.

However, I could be completely missing the mark...

Wayne · Accepted Answer · 2011-02-19 23:12:22Z

It matters how the function is invoked. The following usage will behave as expected:

foo.init();

In the above example the value of this inside init will be foo, so foo.a will be modified. However, be careful. This:

var fn = foo.init;
fn();

...will not behave as expected. The object receiving the message to execute foo in this case is the window object, so the value of this inside init will be window, and foo.a will not be modified (window.a will be).

You have complete control over the value of this inside your functions. In other words, you control the context in which your functions execute. This is done using JavaScript's call/apply: For example, what if we did this:

var someObj = {};
foo.init.apply(someObj);

In this example, init will be executed in the context of someObj, which means that someObj.a will be modified.

Collectives™ on Stack Overflow

Scope of JavaScript Objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related