watching fun fun function this video is
a video series on object creation in
JavaScript I will not be teaching
general object orientation principles
this video is for you if you’re already
familiar with object orientation but you
are confused how to apply it to
JavaScript specifically at the end of
this series you will hopefully if I do
my job right be a lot less confused
about the prototype classes fine object
dot create modules factories
constructors and all that this first
episode will start out very basic we
will be looking at how the this keyword
works with object literals and bind that
is it
so why begin with this and bind
specifically well it’s because it’s very
important to understand this and bind
before we try to tackle anything else
because they are very fundamental to how
object creation works in JavaScript if
we don’t understand bind almost nothing
about object creation in JavaScript is
going to make sense
first of all let’s talk a little bit
about the state of JavaScript so first
of all there is something um bit
emotionally taxing that we will need to
tackle right away there is no right way
to do object creation in JavaScript one
of the strongest feelings I remember
from when I was first learning
JavaScript was asking myself how do I
create a class and you start reading
about it and it is this rabbit hole
where you try to understand what a
prototype is and what’s worse is that
there are different opinions on how to
create a class and different opinions on
whether or not you should create a class
at all and you get very confused and
this what I’m doing on this is going to
be very very hard for your soul to deal
with
so you need to give it some time because
your soul will want javascript to be
like python python is a language that is
very tightly controlled by a single
Dutch middle-aged white guy and he
decides what is the right way of going
about things in Python JavaScript is
different JavaScript is arguably the
biggest programming language in the
world and it’s also pretty old it’s been
around for 21 years senior e c.o
it’s raining a lot I’m not sure of you
hear it but I need to close my window
which is sad because I think that the
sound of rain is like the best sound
ever but I’m afraid that it will mess up
the sound
anyway biggest programming language 21
years like seniority it comes with its
perks
javascript is installed on goddamn
everything and there will be free
pre-written packages for doing goddamn
everything – it’s good being on top but
there’s also some baggage that comes
with it some languages like JavaScript
are standardized there really isn’t a
default JavaScript environment
javascript is not like Java or Python
where you can go – you can’t go to
JavaScript org and download JavaScript
no JavaScript has for all very good
competing engines it made by Google
Microsoft Apple and Mozilla this is
possible because it is a standard but in
order for there to be a standard these
companies all need to sit down and agree
on how the language should look a
process like that requires compromise
and that is why there are a lot of
different ways of going about things in
JavaScript because you know people and
organizations are different and we have
to get along with that long digression I
just want to say that in order for you
to learn how
object orientation works in JavaScript
you need to accept that there isn’t a
right way to do object orientation in
JavaScript instead you will need to
learn how object creation really works
in language and then figure out what is
the best for you for your team and for
your set of problems I promise that I
would teach you about bind in this
episode so let’s look at some code let’s
okay so we have an object literal here
dog it has a property sound that we have
set to the string woof and we have a
method named talk which prints out our
the the sound property to the console so
when we call dog talk we get woof so
this is the kind of essence of what I
mean when I say an object in the context
of this series it doesn’t necessarily
have to be a class or something with
prototype or anything it means that we
have some some functionality like torque
that is bundled with some date and type
some data like woof so looking at this
code even if you you are coming from a
non JavaScript environment this is
probably not going to confuse you too
much you might think it a little weird
that you can instantiate a dog just like
this without declaring it a type and
instantiating it but overall this code
is probably not going to confuse you too
much but let me fix that for you I am
going to let talk function equals dog
talk and then I’m going to call talk
when you first run across this you’re
probably thinking something in the lines
of what the shade ass and that’s
okay that’s a normal reaction that
feeling of confusion it’s your friend it
means you’re learning let’s just calmly
have a look at what happened so we took
the dog talk method and we reassigned it
to a variable and then we called that
variable and that returned undefined for
some reason let’s first talk about the
fact that in JavaScript I can assign a
function to a variable because this is
not something like you can do we know
programming languages you can do this
because JavaScript it’s not only a
object-oriented programming language
JavaScript is also a functional
programming language let me give you a
history lecture on the background of
JavaScript the first version of
JavaScript was created by another
middle-aged white guy his name was
Brendan Eich and he was sort of lured
into this project by being promised that
he would be allowed to create scheme in
the browser scheme by the way is a very
cool functional programming language
that he liked a lot but as the project
started to take form his manager asked
him – can you make it look a little bit
more like Java because at that time Java
was actually considered to be a cool
programming language this was 1995 and
cellphones looked like this and Jay Leno
co-hosted the windows 95 launch so it
turns out that JavaScript is this
bastard bastard child of scheme and Java
and I know what you’re thinking what the
she does but you need to learn to
love this thing
you need to learn to love JavaScript
because it’s going to stay here for a
very long time and just like with your
human best friends you need to accept
their quirks in order to really
appreciate them but either way because
javascript has this scheme heritage it
also has higher-order functions
higher-order functions is an amazing
feature and it allows us to do a ton of
really really cool functional
programming in JavaScript are you have
an episode and actually a whole series
on explaining why higher-order functions
is such a good thing and how they work
you can find it by clicking in the upper
right corner on the I you can also find
it in the episode description but you
can
check that out later what’s important in
this context is that functions like dog
talk like this one or values like any
other value like string or number so I
can stuff them into a variable just like
I would be able to with a string but in
this code example here this mysterious
undefined that we get here it’s an
example of how the object-oriented
nature of JavaScript clashes with its
function oriented nature in languages
that are orient around functions like
schemas there is no concept of this this
the concept of this or self that it’s
not there but in object-oriented
languages like Java this is absolutely
essential for the language to work when
we are reassigning a method to a
variable like this it is now no longer a
method it is just a function it has kind
of ceased to be a method connected to an
object is now just a free-flowing
function so when you call it here this
is no longer going to be the dog it has
kind of ceased to be you’re not exactly
cease to be but it has lost its
connection to the dog object it’s going
to be like execute here and it’s going
to come to this but this it’s no longer
going to be the dog if I inline this
code like it might help you understand
it better
I’m going to put this here and paste it
in so we call talk function here and
it’s going to execute this here but like
this there is no there is no this really
in this context is yes duh yes the
function right see so in a function that
this keyword it does not refer to like
the context where the function was
defined it refers to the context where
the function is being called however we
can bind it to that
context by using the function bind me
show you how that looks like I’m going
to just do this very explicitly and call
it bound function ad and going to talk
function like dot bind and I’m going to
bind it to the dock and now I’m going to
change this call to be bound function
and now this is going to console log out
woof
all right so bind here is going to take
the talk function and it’s going to
return a new function here that has
bound dog to the this keyword so bind
forces this to be dog in this case and
it is because of this funkiness that you
will run across bind in a lot of
JavaScript code let me simulate an
example that looks a little bit more
like a a real world example so let’s say
so here we assign the talk method to the
click handler of the button but when the
click handler is being called this it’s
not going to be the dog it’s going to be
the window object actually because that
is where the add event listeners are
being triggered but that’s kind of
beside the point point is that it’s not
the dog therefore people will solve this
by here where they will type bind joke
so now what is being passed into the
Advent listener function is not the
vanilla Talk function instead it’s going
to be a new function which has bound
this to the dog if you have made it this
for good job you have learned a little
bit about bind which is one of the most
tricky parts about JavaScript to
understand and we’ve learned a little
bit of history which helps us understand
why JavaScript looks the way it does
I’ve talked a lot now I want to ask you
something
what do you want to see next because you
know this is a video series and I have
not yet decided what to talk about next
and I figured that I just asked you what
confuses you about object creation in
JavaScript what some what concepts would
you like to have cleared up write a
comment down below and I shall be happy
to oblige I will also be putting all the
episodes in this series in a playlist
which you can find by clicking the I in
the upper right corner or in the episode
description you have watched an episode
of fun fun function this is a
programming show that I release every
Monday morning o 800 GMT you can check
out the channel below and look at the
videos and see if it’s something that
you would consider subscribing to it
would make me very happy
and if you really really liked it you
might also want to follow me on Twitter
I am mpj this is fun fun function until
next Monday morning stay curious you