1. #1
    Ext JS Premium Member skullbooks's Avatar
    Join Date
    Nov 2010
    Location
    Dillenburg, Hessen, Germany
    Posts
    35
    Vote Rating
    1
    skullbooks is on a distinguished road

      1  

    Default why using "var me = this;" in ext4?

    why using "var me = this;" in ext4?


    hi

    i'm trying to understand the new class model and the new way to extend objects and stuff.
    works all fine but there is one question i don't find any anwers in the frum or on the net:

    what's the reason for using
    Code:
    var me = this;
    me.functionName();
    nearly everywhere instead of just using
    Code:
    this.functionName();
    ?

    i mean is it just for the opportunity of closures? or is there any other reason?

    should i do it the same way in my code?

    thx for any hints.

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    My guess is to reinforce that the intent of the reference is to an Ext JS component, as opposed to a possible DOM reference. By putting that in there, you KNOW you're never looking at a window/document reference.

    stevil

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,125
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If 'this' is used a lot in a method, using 'me' can save 16 bits each reference (after the initial usage is met).

    Ed Spencer told me when I first noticed it is that the main reason is because it compiles better. I started using it everywhere but the only reason I don't like it is my IDE (BBEdit) highlights 'this' in a blue color where as 'me' is just a variable so it's black.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,925
    Vote Rating
    632
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not so much compiles as compresses. Take, for example:

    Code:
    function doA() {
        var me = this;
        
        me.a();
        me.b();
        me.c();
        me.d();
    }
    
    function doB() {
        this.a();
        this.b();
        this.c();
        this.d();
    }
    Compressed, we get:

    Code:
    function doA(){var a=this;a.a();a.b();a.c();a.d()};
    function doB(){this.a();this.b();this.c();this.d()};
    Now compare:
    Code:
    function doA() {
        var me = this;
        
        me.a();
        me.b();
        me.c();
        me.d();
        me.e();
        me.f();
        me.g();
        me.h();
        me.i();
        me.j();
        me.k();
        me.l();
    }
    
    function doB() {
        this.a();
        this.b();
        this.c();
        this.d();
        this.e();
        this.f();
        this.g();
        this.h();
        this.i();
        this.j();
        this.k();
        this.l();
    }
    Code:
    function doA(){var a=this;a.a();a.b();a.c();a.d();a.e();a.f();a.g();a.h();a.i();a.j();a.k();a.l()}
    function doB(){this.a();this.b();this.c();this.d();this.e();this.f();this.g();this.h();this.i();this.j();this.k();this.l()};
    It adds up.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2009
    Posts
    316
    Vote Rating
    3
    azuroff will become famous soon enough

      0  

    Default


    It's just a compression optimization? I thought it had to do with cutting down the number of places where you had to pass "this" as the scope for a closure -

    Code:
    var me = this;
    someButton.on('click', function() {
        me.handleButtonClick();
    });
    instead of -

    Code:
    someButton.on('click', function() {
        this.handleButtonClick();
    }, this);

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,125
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That's pretty much what evant's code is doing, just your code is just a little different.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Ext JS Premium Member skullbooks's Avatar
    Join Date
    Nov 2010
    Location
    Dillenburg, Hessen, Germany
    Posts
    35
    Vote Rating
    1
    skullbooks is on a distinguished road

      0  

    Thumbs up


    well, thx for the replies.

    i didn't think about the compression fact till now.

    have to see what coding style guidline we will follow for our application-classes.

  8. #8
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    This thread raises two questions for me.

    If "this" appears numerous places throughout the minified JavaScript, it should be compressed out by the gzip encoding of the server. Has anyone actually compared gzip size of "this" vs. "me" ?

    If it really does save code, then why not use "m" instead of "me" since it saves yet another byte in lots of places? ;-)

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,125
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by mschwartz View Post
    If "this" appears numerous places throughout the minified JavaScript, it should be compressed out by the gzip encoding of the server. Has anyone actually compared gzip size of "this" vs. "me" ?
    gzip is yet another layer. If 'me' appears numerous, gzip won't compress it out?

    Quote Originally Posted by mschwartz View Post
    If it really does save code, then why not use "m" instead of "me" since it saves yet another byte in lots of places? ;-)
    For development it means more to put 'me'. When you compress it, it will be moved to one letter. Look at Evan's code, it gets compressed to 'a' in that example.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      2  

    Default


    It'd be silly to not gzip compress in the WWW server.

    Anyhow, the real advantage I see to "me" is that it captures "this" so you're really sure what its scope is.

    e.g.

    Code:
    // a grid, for example
    initComponent: function() {
      var me = this;
      ...
    
      me.toolbar = new Ext.Toolbar({
        items: [
          { text: 'refresh', handler: function() { me.store.reload(); } }
        ]
      });
    ...
    inside the handler, me references the grid, while "this" references the button. Surely a source of confusion for many a programmer at some point.

Similar Threads

  1. Replies: 5
    Last Post: 2 Jan 2014, 9:08 AM
  2. Replies: 4
    Last Post: 31 Mar 2011, 9:04 AM
  3. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  4. replace the "south" with the "new Ext.StatusBar" in "layout:'border'"
    By ealpha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 May 2008, 8:28 PM

Thread Participants: 14