Is having a reference to this for easy scoping a good or bad idea?

I sometimes assign the this pointer to a var. The benefit of it is that I don't loose the scope in anonymous callback functions. Is that a good or bad idea?

Example:

var Foo = (function($) {
  var Foo = function() {
    var self;

    self = this;

    this.init = function() {
      $('#foo').click(function(e) {
        self.onClick();
      });
    };

    this.onClick = function() {
      co开发者_如何学Cnsole.log(this);
    };

    this.init();
  };

  return function() {
    return new Foo();
  };
})(jQuery);

Thank you!

{Jim}

---

If you need a reference to the this value of a containing scope (which is certainly a reasonable requirement), it must be a good idea, particularly in cases where you are not in control of the function call (such as event handler functions) where it's your only option.

---

It's not a bad idea. Whether or not it is a good idea is mostly stylistic.

An alternate way to write your code is to hold a reference to the onClick function in the closure. However, this won't be bound for the onClick function when calling it this way. For example:

var Foo = (function($) {
  var Foo = function() {
    this.init = function() {
      $('#foo').click(function(e) {
        onClick();
      });
    };

    var self = this;  // Or use ES5's Function.prototype.bind

    var onClick = this.onClick = function() {
      console.log(self);
    };

    this.init();
  };

  return function() {
    return new Foo();
  };
})(jQuery);

I prefer this style to using self (or that or whatever name you chose) if the object's methods are all in a closure (as in your case).

---

There's nothing wrong with doing it that way, except perhaps that you'd have to come up with more synonyms for "this" and "self" if your scope nesting gets deeper than one level. My preferred method for hanging onto a particular "this" value is to use Function.prototype.bind, which is part of the ECMAScript 5 spec and being implemented in browsers now. As of this moment, only Google Chrome supports it natively, to my knowledge, but it's easy to stick it in with a polyfill, as I've been doing for some time.

---

It's neither a good nor a bad idea. It's your only chance to keep a reference to an outer scope/context.

---

I was asked for more detail, here we go:

A this value is a special object which is related with the execution context. Therefore, you could say it is a context object (an object in which context the execution context is activated).

• In the global context, this is the global object itself.
• In case of a function context, this in every single function call may be different. this is determined on entering the context, and in case with a function code the value can be absolutely different every time.

And even this that is a very brief summary of the whole topic. But you hopefully understand why you need to store a reference for the this value to access it from another function context.

---

It seems like the only way to retain a reference to the scope. But don't do this (from your example):

var self;
self = this;

Instead combine them into one line:

var self = this;