Skip to content

Instantly share code, notes, and snippets.

@airbr
Forked from jashmenn/self-eq-this-vs-bind.md
Created February 16, 2017 20:21
Show Gist options
  • Select an option

  • Save airbr/7a1b0c953e93146a67bfeea01e4b7e10 to your computer and use it in GitHub Desktop.

Select an option

Save airbr/7a1b0c953e93146a67bfeea01e4b7e10 to your computer and use it in GitHub Desktop.

Revisions

  1. @jashmenn jashmenn revised this gist Oct 29, 2015. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions self-eq-this-vs-bind.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    ### The Problem

    In Javascript `this` is bound to the current function so when you want to keep a reference to an "outer" object you see the pattern:
    In Javascript `this` is bound in unexpected ways. Functions, in particular, create a new 'this' and so when you want to keep a reference to an "outer" object you sometimes see the pattern:

    `var self = this;`

    as in:
    @@ -68,4 +69,4 @@ function foo() {
    Of course, because this is a matter of style the issue of "mental accounting" will differ from person to person. But to me, given the semtanics of Javascript's `this`, I think that `self = this` is easy to comprehend when you have nested callbacks.
    ### See Also
    * [Mythical Methods](http://blog.niftysnippets.org/2008/03/mythical-methods.html)
    * [Mythical Methods](http://blog.niftysnippets.org/2008/03/mythical-methods.html) - See [this key phrase specifically](http://genius.com/8072071/blog.niftysnippets.org/2008/03/mythical-methods.html)
  2. @jashmenn jashmenn revised this gist Oct 29, 2015. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion self-eq-this-vs-bind.md
    Original file line number Diff line number Diff line change
    @@ -65,4 +65,7 @@ function foo() {
    }
    ```
    Of course, because this is a matter of style the issue of "mental accounting" will differ from person to person. But to me, given the semtanics of Javascript's `this`, I think that `self = this` is easy to comprehend when you have nested callbacks.
    Of course, because this is a matter of style the issue of "mental accounting" will differ from person to person. But to me, given the semtanics of Javascript's `this`, I think that `self = this` is easy to comprehend when you have nested callbacks.
    ### See Also
    * [Mythical Methods](http://blog.niftysnippets.org/2008/03/mythical-methods.html)
  3. @jashmenn jashmenn revised this gist Oct 27, 2015. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions self-eq-this-vs-bind.md
    Original file line number Diff line number Diff line change
    @@ -64,3 +64,5 @@ function foo() {
    })
    }
    ```
    Of course, because this is a matter of style the issue of "mental accounting" will differ from person to person. But to me, given the semtanics of Javascript's `this`, I think that `self = this` is easy to comprehend when you have nested callbacks.
  4. @jashmenn jashmenn revised this gist Oct 27, 2015. 1 changed file with 49 additions and 2 deletions.
    51 changes: 49 additions & 2 deletions self-eq-this-vs-bind.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    ### The Problem

    In Javascript `this` is bound to the current function so when you want to keep a reference to an "outer" object you see the pattern:
    `var self = this;`

    @@ -10,10 +12,55 @@ return function(whatever) {
    }
    ```

    Is this a good pattern? Shouldn't we just use `.bind(this)` on the inner function?

    ### Sources Say:

    I've done some reasearch and here are a few links that discuss this idea along with a little summary of what they suggest.

    * [Is var self = this; a bad pattern?](http://stackoverflow.com/questions/4371333/is-var-self-this-a-bad-pattern)
    * Do what feels right
    * [What underlies this JavaScript idiom: var self = this?](http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this)
    * Find to do, but could be dangerous because there is a `window.self` - see also: [Window.self](https://developer.mozilla.org/en-US/docs/Web/API/Window/self)
    * [Getting Out of Binding Situations in JavaScript](http://alistapart.com/article/getoutbindingsituations)
    * Awesome tutorial on how `.bind` works
    *
    * Tutorial on binding-sensitive code patterns, using `call` and `apply` and why `.bind` was created
    * [var self = lame](http://ngauthier.com/2012/04/var-self-equals-lame.html)
    * This fellow doesn't care for the idiom, but I don't find his arguments convincing
    * [self = this](http://blog.iangilman.com/2015/02/self-this.html)
    * Explains the `self = this` pattern but doesn't really suggest pros and cons
    * [Understanding JavaScript’s Function.prototype.bind](http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)
    * Says `self = this` is fine, but explains how `.bind` works and why to use it
    * [Using var self = this or .bind(this)?](http://codereview.stackexchange.com/questions/49872/using-var-self-this-or-bindthis)
    * Provides a good list of pros and cons to using `.bind`
    * Tweets:
    * Ohhhh I would do anything for scope, but I won't do that = this — [Jake Archibald (@jaffathecake) February 20, 2013](https://twitter.com/jaffathecake/statuses/304163675810439168)
    * @benhowdle $this for jQuery, for plain JS i don't, use .bind() — [Sindre Sorhus (@sindresorhus) February 22, 2013](https://twitter.com/sindresorhus/statuses/304917599484010496)

    ### Summary

    To me, it seems that `.bind` definitely has it's place. For instance when you have a function in a variable and you want to attach it to a particular `this`.

    That said, in the case of nested anonymous functions I think that using `var self = this;` is straightforward and requires less mental accounting vs. using `.bind`. For example, say we have two nested functions:

    ```javascript
    function foo() {
    return (function() {
    doSomething((function() {
    return this.name; // what is `this` again?
    }).bind(this));
    }).bind(this);
    }
    ```

    vs.

    ```javascript
    function foo() {
    var self = this;
    return (function() {
    doSomething((function() {
    return self.name; // `self` is easy to know because its defined
    })
    })
    }
    ```
  5. @jashmenn jashmenn created this gist Oct 27, 2015.
    19 changes: 19 additions & 0 deletions self-eq-this-vs-bind.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    In Javascript `this` is bound to the current function so when you want to keep a reference to an "outer" object you see the pattern:
    `var self = this;`

    as in:

    ```javascript
    var self = this;
    return function(whatever) {
    return self.foo(whatever); // `this` here is for the inner function
    }
    ```

    * [Is var self = this; a bad pattern?](http://stackoverflow.com/questions/4371333/is-var-self-this-a-bad-pattern)
    * Do what feels right
    * [What underlies this JavaScript idiom: var self = this?](http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this)
    * Find to do, but could be dangerous because there is a `window.self` - see also: [Window.self](https://developer.mozilla.org/en-US/docs/Web/API/Window/self)
    * [Getting Out of Binding Situations in JavaScript](http://alistapart.com/article/getoutbindingsituations)
    * Awesome tutorial on how `.bind` works
    *