domingo, 4 de agosto de 2013

The Javascript Global Object JavaScript mystery

Today I will talk about a mystery that should be more noticeable because it is on the root of the code execution but only seems to be visible when having to face with different javascript runtime implementations (not only the browser). Since most javascript only face with The single environment the browser, lets talk about it: the problem of The javascript globals objects:

What is THE Javascript Global Object? Take in consideration the following  code:
var a = 1;
Here we declare 2 variables , but what's the difference. Well, in terms of usability the difference is that b is declared as a property of the global Object 'window' (in the browser) and so any javascript code can access this name (unless explicitly overriden).

So here is the first javascript mistery, So, how can I know, (as a javascript programmer), what is this Global Context Object ? For example, I need this object for performing some global evaluation and for that I need this Global Context object. The answer is simple:

`this` outside any function will be the global object.

Explained in other words, this is my way of understanding The Javascript Global Object:

Every code must be runned inside a function, even that code for which we don't see its corresponding function, like when we use eval() or the top-most code that is not inside any function. All the other javascript code resides on a function body. For the top most javascript written code we 

the chat conversation in that teach me :

(Cancerbero_sgx): hi all. question: when I assign a value to a name without the 'var' keyword, like global1=1, those variables are stored as properties of some global object, for example, in a browser on the 'window' object. Does that depends on the implementation?, or has the javascript language some reference this object ? example: for(var v in StandarGlobalObject){...} ? thanks in advance


(dwcook): Cancerbero_sgx, it's a property of the environment, not the implementation, whether the global object is the value of some global variable. In browsers, it is `window`.

(dwcook): There are other ways to access the global object. `this` outside any function will be the global object.
aha! thanks!

(Cancerbero_sgx) dwcook: so the implementation sets this initial environment value. Your "other ways to access" was what I wanted to know, thanks!

(dwcook): Cancerbero_sgx, no, it's not implementation-dependent. In different environments that all use V8, it could be `window` or `global` or something else.
However, the other way I mentioned is not dependent on implementation or environment.

(dwcook)It also works regardless of whether you're using strict mode.

(Cancerbero_sgx)aha nice to know, again thank you very much, these are the misteries of javascript that are hard to find googling ;)

(twey): Cancerbero_sgx: The global object is an object you specify when you're creating your Javascript environment (e.g. using V8).  It's up to you whether you give it a name; in browsers it's standard to call it ‘window’, but the only way to access it for sure no matter where your script is running is to use the global ‘this’.

(twey):  Cancerbero_sgx: A top-level name is just a reference, similar to (function() { var v = { }; v.v = v; return v; })()

(Cancerbero_sgx) twey: aja but for me that come from an OO language , it would never occur to me to reference 'this' in the global-root scope. till this moment 'this' only maked sense to me  inside a function and the context applyed to the function call. thanks!

(twey) Yes, the global ‘this’ is kind of magic.  Also, JS is also an OO language.  :þ

Well, an old javascripter that admit it is magic related to this issue. It is a mystery indeed.

But immediately we we start to suspect a relationship between the keywords var, this and with.

The first to notice is that, when declaring a named value, if we omit the keyword 'var' (when declaring a variable) or if we omit the keyword 'this' when declaring an attribute then the name is assigned as a property to the global object, in the case of browsers the window.  The following code try to show what i'm talking about:
// the Global Object. Because we are in the top-most context (no function sourrounding us) even if we are declared with 'var' we are global variables (properties of the current global object 'window'). This is an special case!
var Class1 = function(){
    nonattribute1="world"; //missing 'this' so this is a global veriable, this is a property of GLOBALOBJECT    
    var DeeperContext = function() {    
     var var1="just a veriable"; 
     global2="missing var so i'm global"; 
     this.attribute2="instance attribute";
     nonattribute2="missing this so i'm global"; // notice that DeeperContext constructor is executed on a second level context, but nonattribute2 name is assigned to the GLOBALOBJECT, not the parent context as some may expect.  
    this.attribute12 = new DeeperContext(); 
var c1 = new Class1(); 
console.log(GLOBALOBJECT); //at this point the GLOBALOBJECT contains 2 new properties nonattribute1 and nonattribute2

No hay comentarios: