1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    tempest3d is on a distinguished road

      0  

    Default Design decisions: Scope/this vs. local vars

    Design decisions: Scope/this vs. local vars


    So, I have read everything I can find about scoping, and fundamentally I know how it works. I have not seen anywhere that talks about which design choice is better, hence this thread.

    Take the following example:
    Code:
    myClass = Ext.extend(Ext.someClass, {
    	constructor:function(){
    		//init
    	},
    	loadData:function(){
    		//do some loading
    	},
    	run:function(){
    		Ext.Ajax.request({
    			url:"someFunction.php",
    			success:function(response){
    				//call loadData()
    			}
    		});
    	}
    });
    Now, long story short, in the success callback of the Ajax.request I want to call myClass's loadData() method. There are 2 ways (that I have been using at random) to do this:

    Use scoping. make the scope of the callback the scope of myClass and access loadData() though this.
    Code:
    	run:function(){
    		Ext.Ajax.request({
    			url:"someFunction.php",
    			scope:this,
    			success:function(response){
    				this.loadData();
    			}
    		});
    	}
    Use local vars. Cache this in a variable and use that to access loadData();
    Code:
    	run:function(){
    		var self = this;
    		Ext.Ajax.request({
    			url:"someFunction.php",
    			success:function(response){
    				self.loadData();
    			}
    		});
    	}
    Both do what I need to do. I have a general idea of the ramifications of both, but to be honest I am sure I am missing something:

    Scoping:
    Plus: No local vars to take memory.
    Plus: No local vars to possibly get overwritten, etc.
    Plus: Seems like it would also avoid some sort of circular reference that the GC might have a hard time with, but i don't know on this one.
    Minus: Destroys the scope of the callback.
    Minus: Harder to read, possibly maintain
    Minus: Can get confusing with multiple levels of scope passing. I think the 'worst' I have is 3 levels of passing the scope down.

    Variable:
    Basically the opposite of scoping.

    Is there a "recommended" or "approved" way of doing this? In the Ext codebase I see examples of both.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Do you really think code using scope is harder to read? IMHO code using local vars is harder to read.

    You are forgetting a big minus for using scope: local vars are a lot faster!

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    tempest3d is on a distinguished road

      0  

    Default


    So, is this all up to me to pick which one I like?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Yes (but I would recommend sticking to one method and not mixing them).

  5. #5
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    You are forgetting a big minus for using scope: local vars are a lot faster!
    @Condor: Can you quantify this?

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by Eric24 View Post
    @Condor: Can you quantify this?
    No I can't...

    Using a local var is faster than an using call()/apply() to specify a scope, but Ext always uses call()/apply() even when you don't specify a scope, so in these cases using a scope is actually a bit faster!

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    tempest3d is on a distinguished road

      0  

    Default


    While we are talking design and scoping, is there a difference between doing:

    Code:
    var myStore = new Ext.store({
    	//config
    	listeners:{
    		load:function(){
    			//do something with the scope of myStore
    		}
    	}
    });
    and
    Code:
    var myStore = new Ext.store({
    	//config
    });
    myStore.on("load", function(){
    	//do something with anyScopeIWant
    }, anyScopeIwant);
    I assume that Ext internally does an on() call anyway during init for any listeners passed in, so other than indention levels and ease of passing scope in the second example, there is no reason to use of these over the other, right?

Thread Participants: 2