How to use the self with object-oriented javascript and closures

When I began with object-oriented javascript, I always saw a self here and there without fully understanding what it meant.

Self?

When you see self in some object-oriented javascript, it’s just mean that the developer is using a closure that will reference the current object via a variable named self. Because self is a variable, it could be named anything else. The use of “self” as a name is a unwritten convention but it could be whatever you want.

  1. // Create a cat
  2. function Cat() {
  3.     this.theCatName = "Mistigri";
  4. }
  5.  
  6. // The cat will meow later
  7. Cat.prototype.meowLater = function() {
  8.     // I create the variable self that refers to the this (the current object)
  9.     var self = this;
  10.  
  11.     // I create a timeout that calls the self.meow function within an anonymous function
  12.     /*** NOTE : You don’t always have to create an anonymous function it’s just that in
  13.         this case, it is required ***/
  14.     window.setTimeout(
  15.         function() {
  16.             self.meow();
  17.         }
  18.         , 1000);
  19. }
  1. // The cat meows
  2. Cat.prototype.meow = function() {
  3.     // I can use the this expression!!!
  4.     alert(this.theCatName + " : meow!");
  5. }
  6.  
  7. // I crate an object and call the meowLater() function
  8. var theCat = new Cat();
  9. theCat.meowLater();

Why not use the this?

Because when using closures within an object, the this in the called function (in the above example, in the meow() function) is the window object.

  • http://breakfastdinnertea.co.uk Simon

    if using multiple closures (particularly nested) it can become difficult to see what refers to what and debugging quickly becomes a nightmare. I find it quite useful to name the self variable according to what it’s referring to. In this case, _cat or thisCat.

  • http://www.rubyfleebie.com/diving-into-ruby-object-model-part-1/ Frank

    I ran into this problem once so now I know I have to store the current object into a custom variable in these situations.

    I think I had use the word “realThis”… I will use “self” from now on.

  • Alex

    Note that another way of doing this is using the “apply” method, for instance through Prototype’s Funtion.bind method:

    http://prototypejs.org/api/function/bind

  • http://jpz-log.info/archives/2007/05/17/links-for-2007-05-16/ links for 2007-05-16

    [...] How to use the self with object-oriented javascript and closures | Javascript Kata (tags: blog javascript howto tutorial programming) [...]

  • http://www.liftinteractive.com Kyle

    Ha! I’ve been doing something similar all along (except using ‘obj’ instead of ‘self’). Today I was wondering what the “real way” of doing this was. Now I know…

    And as a python programmer, I like the use of ‘self’ :)

  • http://billy-girlardo.com/delicious/2007/05/16/links-for-2007-05-17/ All in a days work…

    [...] How to use the self with object-oriented javascript and closures The use of “self” as a name is a unwritten convention but it could be whatever you want. (tags: Javascript) [...]

  • http://www.javascriptkata.com/ Dan

    Thanks to all for your comments. Like I said, the word “self” is the most used but is not a “real” convention at all.

    I don’t use the prototype library for now and I’m always surprised to see that it contains a lot of helper to simplify things for javascript… thanks to them…

  • http://www.barelyfitz.com/ Patrick Fitzgerald

    I’ll agree with Alex, if you can use JavaScript’s “apply” (or similar functionality offered through a framework, I use dojo’s “hitch”), it’s cleaner than using a closure with “self”. Perhaps this could be an additional kata…

  • Jordan

    I wouldn’t recommend using “self” because it could be confused with the the “self” property of the “window” object. But anyways, other naming conventions I’ve seen for “this” are “_this, that, thiz and tmp”.

  • http://www.dustindiaz.com Dustin Diaz

    I personally use “that” just because it seems logical what you want access to from within the closure. You want “that” :) . If you reference “self” within the closure… it’s really the self outside of yourself… so it’s not really yourself.

  • troels

    You don’t need to pollute your script with prototype; Mochikit (And probably all other js libraries, worth their salt) has an implementation, which doesn’t mess up the built-ins of javascript:
    http://www.mochikit.com/doc/html/MochiKit/Base.html#fn-bind

    And if you come from a class based, object oriented mindset, bindMethods may be helpful too:
    http://www.mochikit.com/doc/html/MochiKit/Base.html#fn-bindmethods

  • http://www.medienstern.de Werbeagentur

    Thanks. It is very usefully for me…

    THANKS THANKS

  • http://www.dreamland.de werbeagentur

    For me 2 – Thanks!

  • http://www.druckertinte-sets.de Druckertinte

    Many Thanks and Regards from Germany. Really an usefully article

  • zahnimplantate

    An great Article! Thanks a lot :)

  • http://artur.ejsmont.org/blog/ Artur

    nice and simple explanation i like it

  • http://www.werbeagentur-berlin.de Werbeagentur

    Wow more than three years old and still up to date. Fantastic.

  • http://www.facebook.com/people/Michel-Jansma/100000122965920 Michel Jansma

    Awsome