Javascript Variable Scope. How Do I Access an Object Var From an Internal Object Function?

Question

I'm wondering how to access the "nam"e variable with a function in a javascript object like so:

function myObj() {
    this.vars = {
        name: 'bob',
        age: '42'
    }
    this.functions = {
        sayName: function() {
            alert(this.vars.name);
        }
    }
}

var obj = new myObj();
obj.functions.sayName();

What am I missing here?

I can get the name var if I pass a reference to itself like:

function myObj() {
    this.vars = {
        name: 'bob',
        age: '42'
    }
    this.functions = {
        sayName: function(name) {
            alert(name);
        }
    }
}

var obj = new myObj();
obj.functions.sayName(obj.vars.name);

but that seems a little redundant... thoughts?

user236139 · Accepted Answer · 2012-04-15 01:04:05Z

5

The issue is that in your function this.functions.sayName, the this keyword refers to this.functions instead of the current object¹.

Here is a fix for that issue:

function myObj() {
    var vars = this.vars = {
        name: 'bob',
        age: '42'
    }
    this.functions = {
        sayName: function() {
            alert(vars.name);
        }
    }
}

var obj = new myObj();
obj.functions.sayName();

This creates a local variable inside of myObj that you can access from any inner scope. It also exposes that variable to the outside world as a property of any instantiated myObj class, which means you can still do something like

obj.vars.name = 'test';

and it will still change the internal state of the object. That's probably the best solution for your current setup.

¹ The behavior of the this keyword in JavaScript is interesting. I recommend the excellent writeup at the Mozilla Developer Network.

answered Apr 15, 2012 at 1:04

user236139

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

1 Comment

Howard Zoopaloopa Over a year ago

awesome answer. I do indeed need to keep the variables accessible to outside components so adding the this.vars = is key. Thanks!

McGarnagle · Accepted Answer · 2012-04-15 01:00:13Z

1

You could do it like this:

var thisObj = this;
this.functions = {
    sayName: function() {
        alert(thisObj.vars.name);
    }
}

Not sure if that's the best solution, but it works. The Javascript this always refers to the internal scope if you're inside a function.

answered Apr 15, 2012 at 1:00

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Comments

gdoron · Accepted Answer · 2012-04-15 01:12:21Z

1

Just remove this:

function myObj() {
    var vars = {
        name: 'bob',
        age: '42'
    };
    this.functions = {
        sayName: function() {
            alert(vars.name);
        }
    };
};

var obj = new myObj();
obj.functions.sayName();

LIVE DEMO

edited Apr 15, 2012 at 1:12

answered Apr 15, 2012 at 1:03

gdoron

151k59 gold badges302 silver badges376 bronze badges

2 Comments

user236139 Over a year ago

That creates an implicit global and decouples the vars object from any specific object. If you instantiate another myObj, you end up having multiple objects share state.

gdoron Over a year ago

@Reid. I had a small mistake, take a look on the updated fiddle.

Collectives™ on Stack Overflow

Javascript Variable Scope. How Do I Access an Object Var From an Internal Object Function?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related