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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    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
    17,065
    Vote Rating
    659
    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,548
    Vote Rating
    873
    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
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,411
    Vote Rating
    179
    LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold

      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