watching fun fun function today we’re
going to continue our series on object
creation in JavaScript and we’re going
to explore the new keyword we are going
to talk about new when it is applied to
functions we’re not going to talk about
our new being applied to class because
class
is a new concept in action scripts in
agnostic 6 and in order to understand
how that works you we need to go back
and understand a little bit of history
and how classes were faked in ACMA
script 5 i want to stress that this is a
series if you start watching this
episode before watching any of the
others you’re going to be confused
because these build on top of each other
you can find the full playlist by
clicking in the episode description this
series is a deep dive in object region
on JavaScript you are not going to if
you just want to quickly learn how to
create object in JavaScript and and get
started you know like this is not the
series for you this is if you’re like in
working with JavaScript for a year or
two and you really want to understand
these things from the fundamental level
basically we’re geeking out seriously
about object creation here uh be warned
maybe it’s you
whoa it’s nessing reg let me show you
what I mean by new apply to functions so
that you know exactly what I’m referring
to you might have seen this on when
you’re trying to learn how to do when
you first google how to do a class in
JavaScript this is general what you find
it’s going to be a function and it’s
going to be like an object say a person
and perhaps that person has a saying and
you’re assigning that to this
it’s gonna be saying saying yeah and
then you’re gonna see something like
this person dot proto type talk and
would be function and it’s going to say
this dot saying save console log in to
do and it’s gonna be I say and like this
and then we instantiate a person we’re
going to use var because these these
examples are are in a Connecticut v and
it’s gonna be like
Crockford and it’s gonna be a new person
and it’s going to be a semi colons 1 1 1
forward just and we are going to India
to do then go Crockford dot talk and
we’re gonna run that no dot example yes
bunk and it’s going to say I say
semicolons 1 1 1 1 1 1 1 1 1 1 1 if you
don’t get the croc for joke it’s a it’s
a guy in the JavaScript community that
has been active in JavaScript for a very
very long time and he’s famous for a
book called JavaScript the good parts
and he really doesn’t like the
immittance of semicolons in JavaScript I
tend to omit them which annoys a lot of
people because they’ve read what
Crockford said and there’s a there’s
actually a video on the whole semicolon
issue that I made just so that I
wouldn’t have to reply all over and over
again you can find it in the episode
description why should we even bother
learning this why not simply just learn
the class keyword and forget all this
old stuff in
my script five’ll and that’s old just
true just forget about that well for oh
I can think of at least four reasons the
first one is that you are going to run
across this this is is code that you
will find as you progress as a
JavaScript developer javascript is a
language that has been around for a very
long time so if you’re a professional
developer you’re going to run across
code that is written in a style that is
not the absolute most recent version of
JavaScript and if you want to move from
being a okay developer to a great
developer you need to be able to deal
with all kinds of code old code included
the second important reason that you
might want to learn how this works is
that the class keyword uses this
technique under the hood so the class
keyword is really just a thin syntactic
sugar that actually does this up behind
the scenes the class keyword in Atma
script six is a bit of a so-called leaky
abstraction which means that you’re
going to see bits and bobs of of this
technique sticking out even if you just
use the class keyword exclusively and if
you don’t understand what is going on
under the hood it’s gonna confuse you
the third reason is that we in order to
understand or present we need to
understand our history if you uh if you
don’t understand where JavaScript is
coming from how things were added on top
of each other and you know where stuff
came from you don’t you have you will
have a much harder time to understand
why the language looks as it does this
is true with the world in general of
course but it’s especially valuable in
programming to understand the history of
things and fourth because we’re in this
series we’re just kicking out about
learning every nook and cranny about
language this feature is in the language
it’s there it’s not the most modern way
of doing things but it’s not deprecated
it’s not removed it is there and we want
to understand JavaScript fully because
we want to be experts because I feels
good okay but you want to know what
exactly exactly is it that new do do
dance I don’t I’m not a native English
also this place is so messy like it
looks kind of clean because it’s just
shooting the only area and this office
that is not a complete mess the desk is
a message just piles of stuff in this
paper all over the floor and you just oh
I really need to clean but I guess got
back from two conferences and a bra but
I digress
so what happens here when we call new
person what exactly is going on well new
is going to do a couple of things the
first thing the first order of business
that new does is that it creates a new
object just a plain object don’t nothing
no properties no nothing second order of
business is that it’s going to look at
whatever we have called new on and it’s
going to check that that objects
prototype property here and it’s going
to set the prototype of the new object
that it just has created to be that
object third it’s going to again look at
what we called new on there’s this
function that I’m now going to refer to
as the constructor and it’s going to
call that that function but it’s going
to call it with the new object that it
created in step one assigned to the this
variable here the fourth and final step
that new takes is to return the
you object that it created and then set
the prototype of and then execute the
constructor with as where the object was
set as this and then it returns to
object that is what we get here as
that’s into that we assigned to the
Crockford variable and then call call
talk on so this is the way that classes
are faked in Ekman script six if the
prototype part confuses you it’s because
you have cheated and not watch the
previous episodes in this series you can
find the series playlist by clicking
below if you don’t understand prototypes
and have not watched the previous
episodes on prototypes this episode is
just gonna confuse you but even if you
know products this was a little bit
confusing so we’re gonna go really slow
here and what I’m gonna do is that I’m
going to pretend that new keyword and
not that that that new did not exist and
we would have to build it with as a
function instead so that’s what I’m
we’re going to do we’re going to just
call new here so there and then we’re
going to declare the function new and
we’re going to rebuild new for me
rebuilding something on my own is often
a great way of understanding how
something works so again go through the
four things that new does the first
thing is that we want to create a new
object so let’s let’s do that we’re
gonna okay bar uh we’re gonna call this
our OB and it’s a new object whoa we
have completed one of the four things
that um new does number two we’re gonna
set the prototype now we learn how to do
this in the last episode the prototype
episode we’re going to call object dot
set prototype or or bishop and we’re
going to set it to the
honks truck door dot prototype and the
first argument that we’re going to give
to new is the construct door and now
when I look at it look here this does
not make sense because we’re calling
person here that that won’t be possible
we need to instead do this or it’s not
going to make sense so the the first
argument that we pass to our
implementation of new is the constructor
on struct or constructor and the second
argument is going to be whatever
arguments that we want to be passed the
constructor so we’re setting the
prototype here we’re setting the
prototype of object to whatever object
is on the prototype property of the
constructor and remember that we’re
passing in person here as the
constructor and the person here like the
prototype property we’re setting talked
and the top property on that object so
we’re building out the property here
prototype here and prototype is a
special property on every function
object that you’re creating because
function is an object in JavaScript it’s
a bit what are mind blowing but whenever
a function object in JavaScript is
graded it has this prototype property
automatically I’m not sure if it has it
for any other reason than to support
this thing I don’t think so ah please
comment in the in the comments if you
know I know for any other reason why
but either way with this line we now
completed the second criteria that that
second step that new does it which is to
set the prototype the third thing that
new does and that we need to
re-implement in our re-implementation
new e
is to execute the constructor with this
set to the new objects that we had
created okay this is gonna be a little
bit weird so we’re going to take the
constructor and we are going to call add
lie on it now you might or might not be
familiar with apply you can think of it
as a bind except that it executes the
function immediately and returns its
value and if you’re not familiar with
bind it’s because you have not watched
the previous episodes in the series
click the description
the first argument that we give apply is
going to be the object that we want to
be have set as this and remember that
this is going to be the object that we
just have created the one in the new
object here
the second argument that apply text is
an array of the arguments that we want
to call the function with so in the case
of the the person constructor here it’s
going to be an array with just one item
the same so it’s going to be now this is
in practice what we’re going to be sorry
that is what we’re going to be passing
in oh by the way I just noticed that we
have one parentheses too much down here
so how do we actually create this thing
dynamically here because we can’t have
its hard-coded like this that’s not a
proper implementation of new we are
passing the first argument here like
that’s a constructor and then it’s going
to be like the arguments that we’re
passing it won’t pass to the constructor
so here is a bunch of arguments let me
let me let’s actually execute these
things I’m going to comment these two
lines out and I’m going to start
teaching you if you don’t already know
it about the arguments keyword let’s run
this node example yes and see it boom
break
this li unexpected token you alright
yeah so what since new is a reserved
keyword we can’t actually call this new
let’s call it something else let’s call
it a prowess fun spawn more Crockford
overlords let’s run that again no
example judge ass all right now it looks
out the consulate log arguments and it
looks out this thing this is what the
arguments look like
so it’s an almost array this is a super
annoying design thingy in JavaScript
that arguments is not actually an array
object and it’s kinda sort of a tie
right it has for instance it does have a
length property I think if I log out
length it’s gonna be – yeah but it isn’t
an array so it because you know we we
want to get rid of this first argument
here from the array before passing it to
apply we just want this one and whatever
comes after it if you have multiple
arguments so uh we we will probably
reach for something like slice which
would give us like I think it’s I think
we can’t do that now that is what we let
me clear this and the whole note example
jazz and we’re gonna find out that whole
arguments does not have a slice function
because it’s not an array so we need to
convert arguments to an array first I’ll
call it war orgs array if this woods
ACMA script six we could use array from
and just call arguments and let’s log
that out see if that worked
orgs array node example yeah right now
we actually get something that looks
like an array and we could then call
slice on it and and yes
slice from index 1 which will give us
yes the semicolons let me adjust my
terminal a little bit because it’s
annoying me all right that’s better and
now we could pass uncommon this and pass
in the the sliced semicolons arguments
array to the the apply function but we
want to do this in ACMA script 5 for
consistency reasons because we’re doing
a bit of a history lesson here and in
internet my script 5 array dot from does
not exist so when you don’t have a
readout from this is how you did it back
in the day you go you go to the array
object and you locate the prototype
property and you are access it slice
function that’s on there and then you
apply call that with the arguments
property as this so slice is actually a
generic it doesn’t require it’s this to
be an array object and I suspect that
that is partially because it so that you
can use it like this either way let’s
remove the array from with our new like
retro way of creating an array out of
arguments then we slice those arguments
to get rid of this one like the the
constructor the first argument here so
like getting rid of this so that we get
just this which we then pass to apply
which means that constructor is being
called with the saying the semicolons 1
1 1 which brings us to the fourth thing
that new does it’s going to return the
return object No uh-huh land I think
that this might actually work now let’s
let’s run it no exlude no example dodge
as I say semicolons 1 1 1 1 we just
implemented new there is one more
weirdness with this that we need to
implement because I lied it’s actually
sometimes here because there there is an
edge case if the constructor returns an
object if it returns though I don’t know
exactly why you would ever do this but
it is a behavior like if I return dumb
object true some some object here that
is going to be turned as Crockford
instead so if I if I do so I guess that
we should do something like this I’m
gonna return this or the object this is
going to be a correct implementation so
if I do know an example georgia’s this
is going to give us an error because a
Crockford dot talk is is this is not a
function because it has returned the the
demonstrate this to you console dot log
hit hit low and I’m going to return it
could log out the Crockford object kind
of node oh sorry
node example jazz and if I scroll up you
see that hello and it has written the
Dom object and this is again this is
actually what it’s like so if I returned
and did you could not use our spawn
method and
I call you as in the standard way like
the native implementation and I’m
particular and I run at node example gas
you see that yes that is actually what
it does it does return the whatever
object that the constructor returns if
it’s if it happens to return return
something super weird but that’s the way
it behaves back and note sample yes I
say semicolons 1 1 and we refer to our
spawn cool and up can I do that again
some chess and it’s the same behavior
this is how new works on the inside so
we talk about the new keyword more
specifically how new is applied to
functions not to classes because that’s
the ex5 way of doing it and it’s
important to learn history and we have
like delve into what exactly new does do
first thing it does is to create a new
object then it sets the prototype third
it executes the constructor with this
set to the object that it created in
step one and finally it returns the
created object unless the constructor
returns an object and then it will
reject that instead is there anything
that was unclear please post an air a
comment down below and also if you feel
like you’re confident with these things
have a look at the comments below and
find a person that is not clear on them
and help them out because that is the
absolutely best way that you can learn
and grow as a programmer is by helping
others you have with her you have
watched an episode of fun fun function I
release new episodes like this one every
Monday morning at oh wait hundred gee
Mt 5mm PJ that’s Twitter bird there until next Monday morning stay curious