# Using var self = this or .bind(this)?

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. - ## 4 Answers 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. - 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 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 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.

-

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.

-
A very nice trick. Thanks for adding this –  λhmad λjmi Aug 16 at 18:47

One thing to note about self specifically; by default, self is an alias for window. If you override that with a var self, you're fine, but if you forget to add that line and you use self in an inner scope assuming it's referring to your outer scope, there's a potential for some nasty bugs that can be hard to track down.

For that reason, I tend to use some other identifier: that, _this, some variable denoting what type it is, such as app if it's referring to something I'm calling an "application", view if it's a view, etc. In this case, as long as you're in strict mode or properly linting your code to object to using undefined variables, you'll get notified if you forget to add that alias.

-
I tend to use me, but I agree that it's better to use a name that actually means something. –  Dave Van den Eynde Oct 10 at 9:36