I want to know what the global object in JavaScript is and to which class this object belongs to.
And how are Infinity, NaN and undefined part of the global object?
Variable scope is defined in JavaScript by a function, and functions can be nested inside other functions.
function foo() {
// new variable scope in here
var a = "a";
function bar() {
// another nested variable scope
var b = "b";
}
bar();
}
foo();
EXCEPT there is a default "global" variable scope that is defined when your program runs. It is the base variable scope in which all function created scopes are nested.
So what?
Well, every variable scope has a variable object (or more accurately, a "binding" object). It's an internal object to which all the local variables you create are bound.
This variable object is not directly accessible. You can only add properties to it by declaring a local variable (or function parameter, or function declaration). And you can only access properties via the variable names.
Again, so what?
Well the "global" variable scope is unique. It exposes this internal variable object by automatically defining a property on the object that refers back to the object itself. In a browser, the property is named window.
Because a property is placed on the object that refers back to the object, and because properties on the object become variables, we now have a direct access to the global variable object.
You can test this by observing that the window.window property is an equal reference to the window variable.
alert(window.window === window); // true
As a result, we can add a property to the object window.foo = "bar";, and it show up as a global variable alert(foo); // "bar".
Note that the only variable scope that exposes this internal object is the global scope. None of the function scopes expose it.
Also note that the ECMAScript specification does not require that the global variable object be exposed. It is up to the implementation to decide.
There are no real classes, but if you mean the prototype chain of the global object, the specification doesn't say much:
The values of the [[Prototype]] and [[Class]] internal properties of the global object are implementation-dependent.
([[Class]] is used in e.g. window.toString() so that you may get "[object global]".)
The three values you mention are properties of the global object, e.g.:
Infinity === window.Infinity; // true (in a browser the global object is window)
You cannot overwrite these variables, so you can see them as literals. But in reality they are properties of the global object, and thus you can refer to them as variables ("global variables").
Related
Just trying to clear some misconceptions...
function outer(){
function inner(){
}
}
Does a function being a member of a particular object decides it's contextual this ?
Like, is it the reason that outer function is member of window object therefore the contextual this of outer function refers to window object ?
If yes then whos member is the inner function ?
Is inner member of outer function's object ?
And why the inner function's contextual this is referring to the window object ?
Is any function(global or nested) invoked without new operator will have contextual this referring to window object ?
For an ordinary function (that is, not an arrow or member function), this is populated dynamically, at the call time. this depends on how the function is being called, not on where it's been declared.
this can be populated by 1) a property accessor (object.func) or 2) new as in new func() or 3) an indirection like call/apply. If the engine cannot populate this for a particular function call, it's set to the global/window in the sloppy mode and undefined in the strict mode. This applies to both global and inner functions.
Global functions being members of the global/window is an orthogonal concept and doesn't affect this in any way.
Inner functions, like local variables, are not members of any object.
To reference a property of a global object, we can use clearInterval instead of global.clearInterval. console.log instead of window.console.log. Can I confirm that this not having to type 'object.property' is a unique quality of the global object?
Yes, that's correct. Global variables are automatically made properties of the global object, which is named global in node.js, window in browsers.
Note that if you have a local variable with the same name as a global variable, you'll need to use the object.property syntax to access the global variable, since using the name without an object prefix will access the local variable. E.g.
function foo () {
let clearInterval = 0;
window.clearInterval(someVariable);
}
var foo = 'bar';
console.log(window.foo); // bar
Seems like variables get assigned as properties to this, but inside anonymous functions, this refers to the parent scope, but doesn't assign variables to the parent scope.
function() {
var foo = 'bar';
}();
window.foo; // undefined
What object do variables get assigned to in non-global scopes?
To cite http://perfectionkills.com/understanding-delete/#execution_context:
Every execution context has a so-called Variable Object associated
with it. Similarly to execution context, Variable object is an
abstract entity, a mechanism to describe variable instantiation. Now,
the interesing part is that variables and functions declared in a
source text are actually added as properties of this Variable object.
When control enters execution context for Global code, a Global object
is used as a Variable object. This is precisely why variables or
functions declared globally become properties of a Global object
Yet, these Variable Objects are not accessible. The only non-internal one is the global object, window or this (in global context).
The relevant section in the specification is #10: Executable Code and Execution Contexts.
In JavaScript, all variables are assigned to some scope object. However, only the scope object of global variables is accessible in JavaScript in the browser through the window object. Variables in a function scope are assigned to some scope object used internally by the JavaScript runtime, but this cannot be accessed by the user.
In another environment, global variables may be accessible as properties of another object (such as GLOBAL in node.js) or may be inaccessible (such as application scripts running inside the Windows Script Host).
They're available only in the function they're declared in.
Function scope is the only other scope in JavaScript, btw, unlike block-scoping in other {} languages.)
Re: your edit Don't be fooled--JS's this semantics are a bit irksome IMO--this may not be what you expect under a variety of circumstances.
Inside self-invoking anonymous function eg:
function() {
....
}()
All variables remain inside it and do not attach themselves to global object or window. Using that technique, there are patterns created such as module/singleton pattern.
Notice that in JS, variables have function-level scope.
Consider:
function Thing() {
this.prop = null
}
Thing.prototype.whoIsThis = function() {
console.log(this)
}
a = new Thing()
a.whoIsThis() // logs '> Thing {...}'
f = a.whoIsThis
f() // logs '> Window {...}'
So this is not bound to the Thing in the second call. How does this work in this situation? Isn't a.whoIsThis a "method" of a Thing regardless of any variable its assigned to?
When you say a.whoIsThis, it will refer the function object only. The function object will have no reference to the object on which it is attached. But when you invoke the function, JavaScript dynamically decides the current object and sets that as this inside the function.
This dynamicity allows us to use any object as the current object in the runtime.
But when you simply invoke a function object, without any object reference, by default, JavaScript will set this as the global object (window object in browser) and in Strict mode, this will be set to undefined.
A function's this keyword behaves a little differently in JavaScript compared to other languages. In most cases, the value of 'this' is determined by how a function is called, when 'this' is inside a function.
1) When a function is called as a method of an object, its this is set to the object the method is called on.
2) When a function is called directly, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object. In strict mode, the value of this remains at whatever it's set to when entering the execution context, so 'undefined'.
More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
This binding is decided at run time and not at author time
having f = a.whoIsThis is just another reference to the function WhoIsThis
now Imagine If you have the function declared in the global scope..which is really what f is now..and when calling f JS at run time run the function as if it was declared in the global scope(as I mentioned) so It asks ..what this refers to if I'm in the global scope => default binding rule would answer..it's simply the global(window) object
var foo = 'bar';
console.log(window.foo); // bar
Seems like variables get assigned as properties to this, but inside anonymous functions, this refers to the parent scope, but doesn't assign variables to the parent scope.
function() {
var foo = 'bar';
}();
window.foo; // undefined
What object do variables get assigned to in non-global scopes?
To cite http://perfectionkills.com/understanding-delete/#execution_context:
Every execution context has a so-called Variable Object associated
with it. Similarly to execution context, Variable object is an
abstract entity, a mechanism to describe variable instantiation. Now,
the interesing part is that variables and functions declared in a
source text are actually added as properties of this Variable object.
When control enters execution context for Global code, a Global object
is used as a Variable object. This is precisely why variables or
functions declared globally become properties of a Global object
Yet, these Variable Objects are not accessible. The only non-internal one is the global object, window or this (in global context).
The relevant section in the specification is #10: Executable Code and Execution Contexts.
In JavaScript, all variables are assigned to some scope object. However, only the scope object of global variables is accessible in JavaScript in the browser through the window object. Variables in a function scope are assigned to some scope object used internally by the JavaScript runtime, but this cannot be accessed by the user.
In another environment, global variables may be accessible as properties of another object (such as GLOBAL in node.js) or may be inaccessible (such as application scripts running inside the Windows Script Host).
They're available only in the function they're declared in.
Function scope is the only other scope in JavaScript, btw, unlike block-scoping in other {} languages.)
Re: your edit Don't be fooled--JS's this semantics are a bit irksome IMO--this may not be what you expect under a variety of circumstances.
Inside self-invoking anonymous function eg:
function() {
....
}()
All variables remain inside it and do not attach themselves to global object or window. Using that technique, there are patterns created such as module/singleton pattern.
Notice that in JS, variables have function-level scope.