Search code examples
javascriptanonymous-function

"this" inside an anonymous function?


Inside John Resig's book "Pro Javascript techniques" he describes a way of generating dynamic object methods with the below code:

// Create a new user object that accepts an object of properties
function User(properties) {
    // Iterate through the properties of the object, and make sure
    // that it's properly scoped (as discussed previously)
    for (var i in properties) {
        (function() {
            // Create a new getter for the property
            this["get" + i] = function() {
                return properties[i];
            };
            // Create a new setter for the property
            this["set" + i] = function(val) {
                properties[i] = val;
            };
        })();
    }
}

The problem is when I try instantiating the above object, the dynamic methods are being attached to the window object instead of the object instantiated. It seems like "this" is referring to the window.

// Create a new user object instance and pass in an object of
// properties to seed it with
var user = new User({
name: "Bob",
age: 44
});

alert( user.getname() );

Running the above code throws this error "user.getname is not a function".

What is the correct way of generating the dynamic functions for each object instantiated?


Solution

  • Is this code from the book? I have the book, but I haven't read through it.

    It's an error in the book. Check the errata: http://www.apress.com/9781590597279

    Inside the anonymous function, this is the global window.

    You could make it work by adding .call(this, i) after it.

    function User(properties) {
        // Iterate through the properties of the object, and make sure
        // that it's properly scoped (as discussed previously)
        for (var i in properties) {
            (function(i) {
                // Create a new getter for the property
                this["get" + i] = function() {
                    return properties[i];
                };
                // Create a new setter for the property
                this["set" + i] = function(val) {
                    properties[i] = val;
                };
            }).call(this, i);
        }
    }