Binding This in a Nested Function with Underscore.js

Question

I have a question with regards to the Bind feature in Underscore.js let’s say we have the following object "room":

var person = 'Bob';

$(function () {

    var room = {
        capacity: 10,
        exits: 2,
        count: 0,
        person: '',
        addPerson: function (name) {
            this.count += 1;            

            var nestedFunction = function (nameOfPerson) {

                //  this is bound to window
                this.person = nameOfPerson;

            }(name);        
        }
    };

    room.addPerson('dave');
});

At the line indicated by my comment, "this" is bound to the window. That is expected behaviour.

Let’s say we want to bind it to the "room" object. Is it possible to do that with Underscore.js' bind method.

Note: I am aware I could handle this with the good old "that = this" routine. But I'm not interested in that.

Niranjan Borawake · Accepted Answer · 2014-03-27 13:46:17Z

3

Yes, you can definitely do this using Underscore's bind.

You can use bind this way:

CODE:

 var nestedFunction = _.bind(function (nameOfPerson) {
     this.person = nameOfPerson;
 },this);

Please take note of the this passed as a second argument to bind, which makes this refer to what you want and not window.

JSFIDDLE

You can also do this without Underscore's bind by using call.

CODE:

   addPerson: function (name) {
        this.count += 1;            
        var nestedFunction = function (nameOfPerson) {
            this.person = nameOfPerson;
        };        
        nestedFunction.call(this,'dave');
    }

JSFIDDLE

edited Mar 27, 2014 at 13:46

answered Mar 27, 2014 at 12:17

Niranjan Borawake

1,63813 silver badges20 bronze badges

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

5 Comments

thefourtheye Over a year ago

+1 But, nestedFunction.call will not work, because the result of an IIFE is assigned to it, not the function itself.

Niranjan Borawake Over a year ago

Thanks @thefourtheye. Actually, I have updated the code snippet and it's no more an IIFE. The code is in JSFIDDLE link below.

Niranjan Borawake Over a year ago

Yes, it's an IIFE and it won't work with an IIFE. It has to be changed if nestedFunction.call is to be used.

onefootswill Over a year ago

@NiranjanBorawake Thanks. I'm not sure why I had an IIFE. And my apologies to thefourtheye. But this has not been a waste of time. I didn't think of using Bind like that. I'm still an _ noob. Thanks again.

thefourtheye Over a year ago

@NiranjanBorawake I know that, but to make this answer better, you should include important parts of the solution in the answer.

Brent · Accepted Answer · 2015-07-31 09:02:15Z

I know this might not help for the question but I stumbled on this question in regards to backbone.

I was trying to save one model then another on the call back. He is the working end result. But _.bind could be used in any other function you cant access this on.

  this.information.set('name', 'Bob');
  this.information.save(null,
        {
            success: _.bind(function(model, response)
            {
                    console.log('Saved Information');
                    this.review.set('review', "This is a test Review");
                    this.review.save(null,
                    {
                            success: function(model, response)
                            {
                                console.log('Saved Review');
                                location.reload();
                            }
                    });
            }, this)

        });

Collectives™ on Stack Overflow

Binding This in a Nested Function with Underscore.js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related