javascript object literal - nested functions and the "this" keyword

Question

In the example below, when functionA() is invoked, the this keyword refers to the containing object, so I can access its properties (e.g. theValue)

My question: How do I refer to properties of myObj from within the nested functionB()?

var myObj = {
    theValue: "The rain in Spain", 
    functionA: function() {
        alert(this.theValue);
    },
    moreFunctions: {
        functionB: function() {
            alert(????.theValue);
        }
    }
}

myObj.functionA(); 
myObj.moreFunctions.functionB();

Thanks in advance.

Halcyon · Accepted Answer · 2013-06-13 23:21:26Z

10

Immediate invocation to the rescue!

var myObj = (function () {
    var that = {
        theValue: "The rain in Spain", 
        functionA: function() {
            alert(this.theValue); // or that.theValue, both work here
        },
        moreFunctions: {
            functionB: function() {
                alert(that.theValue);
            }
        }
    };
    return that;
}()); // <-- immediate invocation !!

You can decompose it even further:

var myObj = (function () {
    function functionA() {
        alert(that.theValue);
    }
    function functionB() {
        alert(that.theValue);
    }
    var that = {
        theValue: "The rain in Spain", 
        functionA: functionA,
        moreFunctions: {
            functionB: functionB
        }
    }
    return that;
}());

If you're familiar with OOP, you can use this to make private variables.

answered Jun 13, 2013 at 23:21

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

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

1 Comment

Bumpy Over a year ago

I'm confused about which answer to accept. elclanrs' suggestion (alert(myObj.theValue);) works (with no refactoring required), but Frits' solution (and a bit more research) has provided me with information on closures, immediate invocation, & how this can be used to make private variables, so I'm accepting this answer on that basis. Thanks everyone.

elclanrs · Accepted Answer · 2013-06-13 23:21:15Z

6

You can simply use myObj:

alert(myObj.theValue);

Check demo http://jsbin.com/izugon/2/edit

answered Jun 13, 2013 at 23:21

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

andrewjsaid · Accepted Answer · 2013-06-13 23:42:33Z

3

A common practice is to define a "self" variable and use that rather than the this keyword. This helps when you wish to add scope or create a class.

var myObj = new function(){
    var self = this;
    this.theValue = "The rain in Spain";
    this.functionA = function() {
        alert(self.theValue);
    },
    this.moreFunctions = {
        functionB: function() {
            alert(self.theValue);
        }
    }
   }();

   myObj.functionA();
   myObj.moreFunctions.functionB();

Another possibility is to use the ECMA5 Function.prototype.bind method. To put it simply, you can bind a method's this keyword. Follow the link or use a search engine for more details. If you use this method, beware that it is not compatible with older browsers, but the provided link shows an alternate implementation you may use to implement the .bind method in older browsers.

var myObj = new function(){
    this.theValue = "The rain in Spain";
    this.functionA = function() {
        alert(this.theValue);
    }.bind(this);
    this.moreFunctions = {
        functionB: function() {
            alert(this.theValue);
        }.bind(this)
    };
}();

myObj.functionA();
myObj.moreFunctions.functionB();

edited Jun 13, 2013 at 23:42

answered Jun 13, 2013 at 23:28

andrewjsaid

4893 silver badges11 bronze badges

4 Comments

elclanrs Over a year ago

Nop: jsbin.com/ofehap/1/edit, this in there is window. this applies inside functions, and the context depends on how you call that function.

elclanrs Over a year ago

I think you're missing the point. After your edit it'll work but you've just changed the data structure. Plus the option with bind will not work because this is still window.

andrewjsaid Over a year ago

You are right, when I originally read this I had a function in mind, rather than a simple clean JSON structure. I fixed the code to make it work as I originally intended, but I do not recommend it as the answer if you want to keep it clean JSON. However, the scoping does make it more attractive.

elclanrs Over a year ago

I'll remove the down vote for the effort, but you've said it already, this is not a great answer. For the scoping you can just use a module pattern approach like the answer by @FritsvanCampen.

Collectives™ on Stack Overflow

javascript object literal - nested functions and the "this" keyword

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related