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?

Answer 1

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.