Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I was curious which way is generally preferred, or if there is even a preference, given these two options:

$.ajax({
    url: '../Component/GetSearchFilters',
    success: function (response) {
        console.log("Outer scope:", this);
    }.bind(this)
});

If I was inside of a function where I needed both "this" and outer-scope's "this," then I would assign a variable, but I generally prefer binding to keep variable usage scoped to as few lines as possible.

share|improve this question
add comment

3 Answers 3

Things to consider:

  • bind isn't supported in IE8 and Safari5. var self = this would be more cross-browser friendly.

  • If you need the callback's this, then I wouldn't use bind or you'll lose the natural this. I'd rather go for the var self = this on the outside.

  • The way I understand it, you're creating 2 functions using bind this way (the original function, and the modified function), which might cause a performance impact.

share|improve this answer
2  
Note that the first can be solved with es5-shim. Using self requires a closure for the callback, but I haven't investigated a) if there's no closure without it and b) how much of an impact that has. –  David Harkness May 15 at 20:29
1  
It all depends on what the code is doing and the js engine but I would guess that the closure of this to be a more expensive operation. IMO you should just use what you feel is best and not worry about micro optimizations. –  pllee May 15 at 21:46
    
@pllee I believe that the function returned by bind is a closure as well, so this isn't really a mark against var self = this. –  wingedsubmariner May 16 at 4:59
    
After doing some research the closure is much faster than bind currently in most js engines, the overhead is still minimal and I would stick to what you prefer. –  pllee May 16 at 14:11
add comment

Simple rule of thumb use bind if you don't need to have a reference to the original this context. If the original this context is needed use a self variable obviously.

 $.ajax({
    url: '../Component/GetSearchFilters',
    success: function (response) {
        console.log("Outer scope:", this);
    }.bind(this)
});

vs

var me = this;
$.ajax({
    url: '../Component/GetSearchFilters',
    success: function (response) {
        console.log("Outer scope:", me);
    }
});

Using bind is slightly more consise and easier to read than the me variable but one way over the other really isn't a big deal.

share|improve this answer
add comment

Just to add another alternative, instead of doing

var self = this;
something( function () {
    // callback stuff
} );

one can also do this:

( function( self ) {
    something( function () {
        // callback stuff
    } );
} )( this );

Is it better? It might depend. The downsides are another scope and a deeper level of indentation.

One upside is that it's self-contained and the new scope avoids cluttering up the surriounding scope, though you can argue that in well-designed code there shouldn't be too much code in one scope anyway.

One could also say it's not too readable, though I personally would argue that bind( this ) really is that much more readable.

I just wanted to point out another option as having more options to choose from is generally a good thing.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.