CODEWITHSUNDEEP
javascriptanonymous-function
levi
levi

Reputation: 25091

"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?

Upvotes: 11

Views: 9590

Answers (5)

Quinten C
Quinten C

Reputation: 771

You can also make a new function that has uses a certain this with the .bind method.

function getaloadofthis() {return this}

If you do getaloadofthis() it just returns window but if you do getaloadofthis.bind(3)() it returns 3.

So you could also have

const getaloadofthis3 = getaloadofthis.bind(3)
getaloadofthis3() // 3

This also works with anonymous functions

(function() {return this}).bind(3)() // 3

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227240

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);
    }
}

Upvotes: 13

Endel Dreyer
Endel Dreyer

Reputation: 1654

You can always force another this for any function call, using the apply method.

(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;
    };
}).apply(this);

Upvotes: 1

Nikola Borisov
Nikola Borisov

Reputation: 368

Here is how to do it. You need to save the context into another variable. The other option is not to do this inner function that you are doing in the for loop.

// 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)
   var that = this;
   for ( var i in properties ) { (function(){
       // Create a new getter for the property
       that[ "get" + i ] = function() {
          return properties[i];
       };
       // Create a new setter for the property
       that[ "set" + i ] = function(val) {
           properties[i] = val;
       };
    })(); }
}

Option 2:

// 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 ) {
       // 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;
       };
    }
}

Upvotes: 1

Peter Olson
Peter Olson

Reputation: 142921

The this in the inner self-executing function is not the same as the this in the outer User function. As you noticed, it refers to the global window.

The problem is fixed if you slightly modify the code by adding a variable that refers to the outer this.

function User(properties) {
  var self = this;
  for (var i in properties) { 
    (function() { 
      self["get" + i] = function() { /* ... */ }; 
      self["set" + i] = function() { /* ... */ }; 
    })();
  }
}

That said, I'm not sure why the anonymous self-executing function is even needed here, so you have the simpler option of just leaving it out entirely, like this:

function User(properties) {
  for (var i in properties) { 
      this["get" + i] = function() { /* ... */ }; 
      this["set" + i] = function() { /* ... */ }; 
  }
}

Upvotes: 4

Related Questions