PDA

View Full Version : Ext.extend under the hood



Auner
30 Nov 2011, 2:53 AM
I've started looking at how Ext.extend works under the hood, just for the sake of learning more about "low level" Javascript. I must say that much of what I see in Ext JS is beautiful and and it helps my learning a lot.

I've searched the forums trying to find something that explains Ext.extend in detail, but the threads I find are more about how to actually use Ext.extend rather than explaining how it works under the hood. If there is already an answer to this question I would gladly read up on it if the link is provided.

So, I understand most of Ext.extend after reading up about prototype inheritance, but there is currently a few details that still makes me a bit confused.

1.

Line 264 in file Ext.js (ext-3.4.0):


sbp.superclass = sbp.supr = (function(){
return spp;
});


"sbp" is a reference to the subclass prototype, so what the code says could be transcribed as "set the superclass of the subclass prototype to a function which returns the superclass prototype".

Now, the questions come:

Why do we need a superclass prototype reference in the subclass prototype? The superclass prototype reference is already defined in the subclass.
How come the subclass prototype superclass reference is a function that returns the superclass prototype and not just the superclass prototype itself? On row 256 the superclass prototype reference is set as the subclass superclass without a function.
Why is the function wrapped in parentheses? I've read that (function() {}()) is a self-executing function, in all senses the same as function(){}() plus the fact that it works in IE6 something something.. But why use only a single set of parentheses surrounding the function, without the trailing pair of parentheses which would make the function self-execute? I have not found anything online about this. Is it due to scope? Please explain with an example, if possible.
2.

Why is Ext.extend a self-executing function that itself returns a function? Is it due to performance reasons, that io on row 236 should only be executed once? Otherwise, I don't see the point really, and tweaking the code to a be a non-self-executing method makes no difference when I run the code.


Cheers!

tobiu
30 Nov 2011, 6:09 AM
i recommend to take a look at the ext 4 version, it has not so cryptic variable names and does basically the same:

http://docs.sencha.com/ext-js/4-0/source/Ext.html#Ext-method-extend

Auner
30 Nov 2011, 7:44 AM
Thank you, I checked out the code, and it seems as if


subclassProto.superclass

that I asked for in the thread start has been removed.