and in this tutorial we're going to
speak about the execution context and
the call stack in order to make the
entire subject more clear we need to go
to the very beginning and identify the
starting point of our application
between the script tags will have the
global scope and what happens here is
really just we're actually inside the
main window object here it's just not
being shown to us in other words behind
the scenes JavaScript does something
like this it instantiates the window
object for the global scope and that's
pretty much what global scope is it's a
instance of the window object now
because we are inside the window object
if you try to output the best keyword in
the global scope you'll notice that it
actually equals the window object what's
more interesting is that the window
keyword itself which was instantiated
here equals exactly the same thing and
so this is actually why you can do
something like this and compare that
this object instance with the window it
will actually be true because they're
one and the same
and for the same exact reason if you try
to compare the alert function for
example to window dot alert it will
output true and again the same thing is
here because this is actually the
instantiated object that is exactly the
same as window now there's a lot more to
this keyword in any scope including the
global scope as well so what this
usually referred to as the this binding
and we're gonna explore the subject in
just a moment remember how in my
previous tutorial we talked about
lexical environments and basically there
were three different types of lexical
environments the block scope which is
just the brackets without any context
it's not a function it's not global
context you're just the brackets you
treat anywhere and you can nest them
anywhere in your JavaScript application
now we have the global scope which is
really just the same as the window
object we described here a moment to go
and the third type of lexical
environments is the function scope so
this one's a little different and that
this binding can refer sometimes to the
global scope in the function and most of
the time
refer to the function instance itself
we're gonna take a look at this in a
little more detail in just a second what
is execution context basically execution
context consists of three different
things
it's the lexical environment usually
when we talk about execution context the
lexical environments will we'll be
talking about will be either the global
scope or the function scope executing
context is usually not discussed in the
context of block scope because it's just
uh even though that there is a disc a
word available in the block scope just
to describe the concept of how it all
works these two different scopes are
used generally to explain that and so we
got the lexical environment it's one of
those scopes that we have just covered
variable environment is simply a place
where you create your variables it
evaluates the values of the variables
you created and one important thing to
notice here is the variable environment
is separate from the disk binding so for
example what I mean by that is when you
create variables using far that gets
landed into the variable environment or
the same thing for let it still goes
into the variable environment but when
you start messing with this keyword
you're dealing with the Biz binding and
whatever this object is bound within the
given scope in this case it's a global
scope so whatever that object is bound
to in this scope is going to be accessed
by the dot operator and in different
scopes this keyword can be referring to
different execution contexts it's not
always necessarily referring to the
actual scope its and in order to
demonstrate how it actually works I'm
going to switch to a visual diagram that
I created that should explain this
entire process in greater visual detail
and so having said everything that we
have mentioned so far up to this point
what is the call stack in JavaScript the
global scope is the very first layer of
the execution context so whenever your
browser runs your application the first
layer of execution context is created by
the
window object which is the global scope
now let's say we create this function in
the global scope and call it f a inside
this function we assign the X property
on this object to one and so what
happens here is that once we run of a
function because we're writing it from
the global scope this object inside this
function will be actually equal to the
global scope object this is why after we
run this function and we try to output X
on the window object now we'll get one
it's the same value we set here because
again this keyword inside the function
that was called from the global scope
will be bound to the global scope or the
window object and not the function
itself so in other words what I'm saying
is inside a function this object is
bound to the context from which the
function was called in this case it is
window or global scope usually though
this is not considered as a good coding
practice because why would you want the
inside scope of a function have any ties
to a global variable usually that's not
a very good code design idea but that's
just how JavaScript works on this basic
global scope level what actually
happened here is this new execution
stack was created and as you can see
again because the function was called
from the global scope itself and the Biz
binding will be equal to the window
object even inside of this function now
let's erase this example and I'll show
you something else let's use that this
keyword in global scope to simply
identify this space as global scope and
now let's create a object literal
and so in this object literal we have a
method here that will output the value
of this a which was defined right here
now in this case notice how we have a
variable a defined on this object in
global scope and we also have property a
on the object literal now in this
particular case because we're calling
the method directly from the actual name
of the object literal the property on
this object here will be evaluated to 1
and not global scope that's because the
method here was not called from the
global scope itself on the contrary
notice that here we created a new
variable called M and assigned this
object method that we have just called
here but notice that this method is
created in the global scope so what
happens here is when we actually call
the method M the result of this
operation will not be 1 it will be
global scope because again this method
has been transferred into the global
scope so that this context in this
function will refer to the global scope
variable defined by the global scope
this instance rather than what we define
inside the object literal and this is
happening because it was called from the
global scope but in this instance
because it's called from the name of the
object that was created its known there
called from the context of the global
scope and for that reason that this
keyword here and the property a is
taking from the object itself so in a
way it's kind of locked inside its
private to this object in this case when
the execution of the script reaches this
method what's gonna happen actually
calling this method will create another
execution context added to the call
stack once this method returns though
will disappear from the stack again as
execution continues going down to the
script eventually will arrive at calling
this function again but
this time from the global scope and
what's gonna happen is that will create
another execution context once again
they will not be stacked one on top of
the other because as soon as this one
finishes returning it will disappear
there are cases where you can just build
these execution contexts into the stack
by continuing calling a function inside
a function and usually it will have
several levels of these execution
contexts stacked one on top of the other
as the functions and side functions are
being cold and of course that this
keyword will continue being bound from
whatever context the method was cold now
you'll have a lot of cases like this
where you have a function calling
another function and it just keeps
chaining the function calls in this case
you will grow a taller call stack of all
of these execution contexts and one
thing to notice here is because a the
first function was called within the
global scope what's gonna happen is
you'll have a chain of this bindings all
the way up to the function C which is
the last one to be cold and this
function C will also within this
function this keyword it's chained all
the way back to the original window
object again because it's called from
the global scope if you had functions
constructors executed using the new
operator then this chain would be broken
a new operator creates its own context
when you create constructors they
totally just own this object and if you
call any functions from that constructor
obviously they would inherit whatever
that this object would be at that time
but if you're just calling functions
within the global scope and execute them
starting from the first one and it goes
into B and C and so on and so forth you
will retain the original global scope
binding of this so it's sort of like a
chain created and that goes all the way
up to the number of functions it's
you're gonna call and that's pretty much
the idea behind
all stock and execution contexts that
keep stacking up on the call snack so
thanks guys for watching my tutorial