Naming this in nested functions

gistfile1.md

tl;dr

If you must nest functions in a way that requires access to multiple this', alias outer this to something meaningful - describe the value it's holding. Treat this as the invisible first argument.

In general though, avoiding the situation (nested functions and frivolous use of this) will frequently produce clearer results.

Naming this in nested functions

I was accidentally included in a discussion on how to best name this in nested functions in JavaScript. +1's were given to this suggestion of using _this.

Giving style advice on naming nested this without a meaningful context isn't too helpful in my opinion. Examples below have been altered to have at least some context, although a completely contrived and stupid one.

Assume this setup:

var morgan = new Person("Morgan");

Bad

morgan.logger = function() {
  var self = this;
  return function() {
    console.log(self);
  };
};

Bad

morgan.logger = function() {
  var that = this;
  return function() {
    console.log(that);
  };
};

Bad (still no good in my opinion)

morgan.logger = function() {
  var _this = this;
  return function() {
    console.log(_this);
  };
};

Meaningful name: Better

morgan.logger = function() {
  var person = this;
  return function() {
    console.log(person);
  };
};

Another more realistic example

Function.prototype.throttle = function (ms) {
    var fn = this;
    var timer;
    return function () {
        clearTimeout(timer);
        var args = [].slice.call(arguments);
        timer = setTimeout(function () {
            fn.apply(this, args);
        }, ms || 100);
    };
};

function myFunc() {
    console.log(arguments);
}

var throttled = myFunc.throttle(50);
throttled("Hey there!");

In the above example, "fn" is way superior to "_this". Still, the following example would be even better:

function throttle(fn, ms) {
    var timer;
    return function () {
        clearTimeout(timer);
        var args = [].slice.call(arguments);
        timer = setTimeout(function () {
            fn.apply(this, args);
        }, ms || 100);
    };
};

function myFunc() {
    console.log(arguments);
}

var throttled = throttle(myFunc, 50);
throttled("Hey");
throttled("Hey there!");

What about bind?

In cases where you don't also need the nested this bind works fine. However, since the bind happens on the bottom, it can also create quite confusing results. I also think the massive use of the word this in code that binds a lot - see most jQuery code snippets - is very confusing. Naming each thing is generally more readable in my opinion.

If using bind, I generally prefer a separate bind over the Function.prototype one, e.g.:

morgan.logger = function () {
    return bind(this, function() {
        console.log(this);
    });
};

Because it moves the target object up. "object, method" is also less noisy than "object.method, object".

However, this example can be even better written like so:

morgan.logger = function () {
    return bind(console.log, console, this);
};

i.e., with added partial application. With the non-Function.prototype bind, you can even do one better, like so:

morgan.logger = function () {
    return bind(console, "log", this);
};

In my opinion, this is pretty concise and readable. I think lodash's bind supports this kind of use.

In summary

See tl;dr ;)

@cjno you should post it on your blog, took me a while to find it again (I wasn't sure who wrote it and if it was a gist or not).

I think self is OK in most cases since it's a known convention (already have some meaning attached to it), but I do agree that descriptive names are a good idea. If you avoid using the this keyword in multiple places it gets easier to extract/reuse the methods later if needed:

Person.prototype.walkAndTalk = function(){
  walkAndTalk(this);
};

// no need for inheritance or awkward Function#call
Robot.prototype.walkAndTalk = function(){
  walkAndTalk(this);
};

function walkAndTalk(target){
   target.walk();
   targat.talk();
}

But of course the this keyword gives a lot of flexibility and is an extremely powerful tool.

I also wrote about the this keyword in jQuery and why it should be avoided: http://blog.millermedeiros.com/avoiding-the-this-keyword-on-jquery/

Cheers.