Hybrid View

  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 Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,870
    Vote Rating
    932
    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 Software Engineer
    ________________
    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
    17,384
    Vote Rating
    709
    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 Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,870
    Vote Rating
    932
    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 Software Engineer
    ________________
    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
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,557
    Vote Rating
    350
    LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of LesJ has much to be proud of

      0  

    Default


    evant,

    What compressor is used to compress Ext4?

    Google Closure Compiler ignores the "me = this" technique, see below:

    http://closure-compiler.appspot.com/home

    Code:
    function doA(){this.a();this.b();this.c();this.d()};

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