hey everyone and welcome back so in this
tutorial we’re gonna take a look at ESL
classes now the very first thing you
need to understand is that even though
javascript is an object-oriented
language it does not have a concept of a
class so unlike other languages like
Java or C sharp which also
object-oriented languages javascript is
not class-based now you heard me use a
term class essentially we talked about
classes and object oriented languages
but class will mean essentially a
blueprint for object so essentially the
process is that you create classes which
are essentially like I said blueprints
for objects and then you spawn off
objects out of those classes now you can
also extend classes by defining new
classes that basically augment the
functionality of the original classes so
this is all fine and cool but the only
thing is JavaScript uses what’s called a
prototype based inheritance model so
essentially the way works is a first you
create an object then you basically
define properties and methods unloading
that object and then you instantiate new
objects out of it and the way that
inheritance works in Java sip is that it
uses what’s known as prototypes so a
prototype is essentially an internal
property that every single object has in
JavaScript that basically points to
another object which this card object
inherits from so in order to we’ll show
the concept let’s say you have a simple
empty object here if you were to
console.log the prototype of this object
which could generally be accessed
through the proto property you see that
in this case we get an object if you
open up the dev tools and Chrome and you
expand the object you’re actually gonna
see that it has a whole bunch of
properties so the reason you see that is
because every single object in
JavaScript is an extension of the global
object class which has all these
different properties and methods and one
thing you can see there is the
constructor that points to the
underlying object so when we talk about
the prototype the prototype is
essentially a pointer a reference to the
object that this object that we create
right there extensive um so when we talk
about classes in es6 we need to
understand that classes are essentially
just simply a convenient syntax so
classes and by classes I simply mean the
new class keyword in year six is just
simply syntactical sugar for the
traditional prototype based model in
JavaScript so classes are you as you’ll
see
don’t actually introduce a new you know
object-oriented model in JavaScript
JavaScript still uses prototypes under
the hood and the new class syntax is
simply clearer and simpler way to define
objects as well as inherit from them so
what I’d like to do in this tutorial is
I’d like to walk you through the process
of creating classes working with glasses
and the way I’m gonna do that is
basically on the Left I’m going to first
show you examples using the traditional
es5 approach or the functional approach
and on the right I’m going to show you
the new word es6 approach that uses
classes so the very first thing is
previously in order to create classes
and like I said take this with a grain
of salt because actually there’s no
classes in JavaScript and again
JavaScript uses the prototype based
model but in order to create
quote-unquote classes and the older
using the older traditional JavaScript
syntax you would essentially use
functions and so functions in this case
would basically act as object
constructors so one example I’d like to
show you it would be an example of
creating a bank account so in order to
model a bank account we might have a
function we’re gonna call it an account
and then every single bank account in
the real world essentially has a balance
right and so the function what it’s
gonna do is it’s basically gonna assign
the balance to the object given the
balance argument now we can already
create a new instance of the account and
basically it’s gonna be an instance of
the account class or account function
and their starting balance let’s say
it’s gonna be $1,000
we can only console.log account that
balance and of course as you would
expect it’s gonna us $1,000 now if you
wanted to attach some kind of behavior
to
the account class you would need to
create a function or a method so one way
to do it would simply be to assign the
function to a property on the function
structure or the object constructor so
one of the behaviors of a bank account
would be to deposit some kind of an
amount to it right so we could create a
function that might be called deposit we
might just simply pass an amount to it
and all this function is going to do
it’s basically gonna increment the
existing balance with the amount that
you pass to it so where you have an
account here let’s do a calendar posit
we’re gonna deposit two hundred dollars
and once that’s done we’re gonna
console.log the account balance once
again and as you would expect first we
get a thousand once we add two hundred
we’re gonna get twelve country so that’s
simple and cool the only problem with
this approach though and it works
perfectly fine but the only problem with
it is that every single object that we
create out of the account class is going
to have its own copy of all the
properties that the function defines so
in this case we’ll define the balance
property but we also define the deposit
method and again it’s also a property
but in this case it’s not a value like a
balance right it’s not ie an integer
like 1000 it’s actually a function then
this keys balance is going to change
right so if we created let’s say account
account – and it’s gonna be a new
account let’s say the balance is going
to be 550 and we did console the log
account to balance and then we wanted to
deposit a new amount into it let’s say
$100 and then was it a console log of
account to that balance and of course I
misspelled it it should be deposit but
once that happens you’re gonna see it’s
gonna be incremented by 100 so like I
said balance is going to be dynamic it’s
going to change from object to object
but the deposit function well it’s
pretty much the same every time the
behavior is going to be the same so
there’s really no point in copying over
the same function
for every single object that we create
it’s kind of a waste of memory if you
think about it because it’s gonna be the
same function but it’s gonna be recreate
it every time a new object is
instantiated so like I said it’s
basically a waste of time and we want to
avoid it at all cost so in order to
avoid the situation one way we can
approach it is basically by the use of
the prototype now we talked about the
prototype a little bit but essentially a
prototype like I said it’s an object
that every single object in JavaScript
is going to have it’s like an internal
property that you can attach properties
or method to it methods to it and those
properties and methods are going to be
shared across all the objects that you
create so in this case we have an
account we do open an account and let’s
say that an account is gonna have a
prototype and we’re going to attach a
deposit function to that prototype so
it’s again it’s gonna be a function
we’re gonna pass an amount to it and
it’s just simply going to increment the
balance with the amount so now in this
case you get the same result you get the
same output nothing changed it’s the
same behavior but in this case the
difference is that this deposit function
well it’s going to be sure it across all
instances of the account class or the
account function so that each one of
them is going to have the same instance
of the same deposit function in other
words the deposit function is not going
to be recreated for every single
instance now so how would this look in
es6 using a class notation well in an in
es6 we’ll have the new class keyword and
it basically allows us to create classes
in this case we’re dealing with the
account class now in order to have a
constructor previously we had to resort
to functions so we basically use
functions as object constructors in this
case we can use a special constructor
constructor method and we’re going to
pass a balance into it so the
Constructors you can receive a balance
and we’re just going to assign the
balance as a property to the object all
right so we can already create a new
account instance it’s going to be a new
account let’s say 700 as a starting
balance
and then we can console.log account
balance and of course that’s gonna give
us 700 now in order to add a function to
the class we would use a new notation of
defining methods the base he’ll have a
deposit we can accept an amount and then
the body of a function is basically
going to contain this logic it’s gonna
increment the balance by the amount that
you pass so that’s how you deposit money
into the account so now we can simply
call account our deposit let’s say 100
we’ll call for log account balance and
of course I misspelled the deposit no
fix that and you see it’s gonna be
incremented by 100 now there’s an
apposite function it’s not going to
suffer from the same issue as we had
before so this deposit function is
actually being defined on the prototype
and in fact if you wanted to prove that
you could basically do a console log of
the deposit function right or the
deposit string in the account prototype
and this returns true meaning that the
account prototype contains the deposit
function so like I said the deposit
function is being created on the
prototype it’s not being created as a
property on the constructor you could
still technically do that but like I
said really it’s a waste of memory and
there’s no reason to do that now the
other thing that you might consider when
dealing with objects in JavaScript is
getters and setters so one of the
problems as you can see here is that we
have direct access to the balance data
property on the account so this means
that we can actually use the account
balance property and initialize it to
any value that we want so we could
either assign it to negative values or
we could even assign and gibberish to it
and it’s not going to work because if we
console.log the balance of course it’s
going to be the new value that we
assigned to it so this is of course not
ideal and if you are familiar with
object-oriented paradigm in modern
languages well essentially one of the
concepts that it has is known as
encapsulation it’s essentially a
paradigm in which you want to make sure
that data properties of classes and
objects are hidden from the outside
world and you essentially only expose
some kind of an interface that allows
you to interact with those that are
properties in a safe way so in this case
one of the ways to deal with this would
be to use a simple convention that
basically uses the underscore so we
could instead of using the ballots we’ll
just assign underscore balance as the
property and then in this case of course
we’re not going to have access to the
balance but we can still create and
what’s the only getter or an accessor
which is basically a special type of
function that is just simply going to
return the balance of this account in
this case one of the ways to do this and
of course there’s multiple ways but one
of the ways is to use the object define
property method the first argument would
be the account prototype the second one
would be the name of the property in
this case this would be balance right
and the last one would be the actual
getter so in this case we can use a
special get keyword then we’re gonna use
the function and all its gonna do is
just gonna return this balance and in
fact it’s gonna return this underscore
balance because if you return balances
you’re basically gonna end up with an
infinite loop that it’s basically gonna
call together again and again in this
case you can see that we get the new
balance and of course this assignment
fails because we no longer have the
balance property now in order to work
with that we might need to create a
setter now in this case it makes sense
to call our setter balance now one way
to do this would be to use a method
called define properties but because we
already have the direct access to the
prototype it’s simpler to just simply
assign a complete new object to the
prototype and define everything on it so
we’re gonna move the deposit function
inside of that object so it’s gonna be a
property it’s gonna be called deposit
then we’re gonna have a getter which is
basically going to
the the balance function it’s just gonna
return the current balance and lastly
we’re gonna define a sitter which is
going to accept a new balance and then
so we don’t need any of this stuff I’m
gonna collage so instead of this setter
like I said if we want to protect
ourselves from being able to assign
negative values to the ballots we can
have an if condition that says if
balance is less than zero we could just
simply throw an exception and say
balance cannot be negative right and
otherwise we’re going to assign this
balance equals balance so in this case
as you would expect here this is still
going to work right because we’re not
checking for any shrinks but if you try
to assign let’s say a negative 500
you’re gonna get an exception because
balance cannot be negative now this is
quite complicated and again like I said
there’s multiple ways to go about it in
es6 there’s actually only one way to do
it and you would use this special get
keyword again so you can have your
balance this would be a simple getter it
would return this balance the only thing
here like I said before you gotta be
careful with the names so in this case
you’re actually gonna run into gonna run
into maximum stack size exceeded
exception because you’re calling here
you get it with the same name and
basically what the Gator does it calls
itself with the balance right so that’s
not going to work so one way to go about
it is to use this special underscore
notation basically the underscore
balance is still going to be accessible
you like you could still do a count but
dot underscore balance it’s gonna give
you access to the balance and you could
also in fact do a count dot underscore
balance and you get to assign any kind
of gibberish value to it but again by
using the underscore it’s or like a
notation to higher values even though
the actual there’s no public and they’re
still accessible like I said there’s no
actually there’s no notion of public
protected or private in JavaScript both
in es6 and es5
all the properties of an object are
public by default so this underscore
notation is just simply a convention
that allows you to
so like haven’t work around around that
issue so going back to our getter to
make this work we just need to add the
underscore to the balance and this
should work and then finally the setter
could also be named as balance and you
could pass the starting balance to it
and then you simply do this and of
course you could move the same logic as
we had before to the new cetera now to
illustrate a concept we can have our
counter balance and we get console.log
that so let’s go so love that and then
we can do account balance sure you
assign 1000 to it and then do
console.log account balance again no
exceptions so far first we get 700 even
get 1000 but if we tried a negative 1000
of course that’s going to fail with the
exception right there now lastly when it
comes to inheritance inheritance in
JavaScript works with prototypes so
let’s say in this class we had a new
class or new function we’re gonna call
it
premium account so a premium account
let’s say it’s a special type of an
account will you also have the balance
but let’s say you also have bonus points
right so the very first thing you need
to do is you still need to call the
original account right because we’re
gonna extend the account class and you
need to pass the best keyword which is
basically this object and also the
balance so that the balance will be
properly initialized last thing we can
also assign these bonus points to the
object just like so and then there’s two
important things that you would need to
do the very first one you need to call
the premium account prototype and you
need to assign an instance of the
accounts to that prototype and in fact
and this gives you what you could also
use object.create with the account but
in this case I would just stick to using
a simple and situation of the account
class and the second thing you would
need to do is you would need to assign
to the premium accounts class and once
you do that
we’re basically set and now we can
create instances of the premium account
so let’s say we have a premium account
it’s going to be an instance of the
premium account class what function
we’re gonna have a starting price of 500
let’s say we have a 100 bonus points and
we just want to console.log premium
account balance just to see the
underlying values and as well as premium
account that bonus points now in this
case as you would expect we get five
hundred and 100 but in this case we also
get access to all the gears and the
servers as well as the deposit function
so we could do premium account dot
deposit let’s say one hundred dollars
and after that one the console log the
premium account balance in this case
notice we’re using the balance getter to
get the value of the balance as opposed
to accessing the property directly so in
this case all the functions and all the
properties are inherited using the
prototype and the interesting thing is
if you want to go deep and actually see
what the prototype looks like you could
do console.log premium accounts dot
prototype and in this case it actually
returns undefined but if you did proto
this would make more sense they would
actually returns you an object that has
balance that has a constructor with a
premium account like we assigned right
there and it also has the poro object
with all the methods as I explained
before so how does inheritance work in
the ax six now in EO 6 the syntax is
actually much much simpler so you would
think you would again have a class right
in this case will be a premium account
class and what you want to do is you
want to extend the account class right
so you would still have your constructor
and you would pass your balance and
it’ll
to pass your bonus points into the
constructor now in order to call the
constructor of the parent class like we
did in the previous example on the left
right we did a count call in this case
in order to do that it’s much simpler
you just simply call the super keyword
and you pass the balance into it so it’s
basically gonna call the constructor of
the parent class with the balance so the
balance is going to be set in that
method and lastly we’re gonna do this
bonus points equals bonus points so
let’s see if that worked let’s create a
new premium account it’s gonna be a new
object of premium account class don’t
get a pass let’s say nine hundred and
one hundred four bonus points and then
we’re gonna do premium account balance
and that’s gonna be our getter we’re
gonna do a little comfortable oops we’re
gonna do a puzzle log of premium account
balance and then we’re gonna do let’s
say we’re gonna use the deposit method
just for the sake of it we’re gonna
deposit $100 and then last we’re gonna
do or console log of the balance so we
get nine hundred as you would expect and
we also get one thousand once we call
the deposit function so again in this
case again all the functions and
properties are inherited in the child
class and you also have your bonus
points right there so at this point you
can already extend the class by creating
new getters for the born spool for the
bonus points and so long but one thing
you could also do in es5 is you could
use what’s known at other languages as
static functions so static functions are
basically or methods those are basically
methods that you call off the class
without having to instantiate the class
as an object so in this case one of the
methods that would make sense would be
to register a bank account so we might
have a register function in order to
register a bank account you would need a
starting balance right so once we have
the balance we could simply return new
account balance so just creates in
instance of the account class I’m just
gonna kill the other examples that we
had I always try to do console.log
account the register and we’re gonna
pass 600 as a balance right it’s gonna
create an object for us and it’s gonna
have all the functions and all the
properties now you could still do the
same thing in es6 and in order to do
that you could use this static keyword
so you might have static register you’re
still gonna pass the balance and then
lastly the body of the function would
simply return you the new account
instance and it’s still going to work in
fact I’m gonna kill the older examples
and let’s do console.log account dot
create or actually we call it register
let’s fast nine hundred it’s gonna pass
it’s gonna give us an object with a
balance of nine hundred and again of
course you could still call all the
different methods and access all the
properties that the account class or
account object has now to wrap up this
video I’m just gonna mention a few
things about es6 classes so like I said
before es6 classes don’t actually
introduce a new concept in javascript
javascript still uses prototypes under
the hood so all of this syntax that we
have right here is actually being
translated into es 5 and actually in
order to prove that I’m gonna do a
simple trick here so let’s look for es6
[Music]
compilation online let’s see I’m looking
for the Babel website and I think it’s
right there so if I were to copy over
our account class right there let’s just
base it over here and let’s prettified
it also so as you can see here this is
basically the website I’m on is Babel
Gao what we did right there is we
basically added our account class and
Bob will essentially compiled a class
into the traditional es5 form and you
can see right here that we have our good
old function constructor that creates
the account we assign the balance and
then there’s a whole bunch of methods
here you can see the getters
our getter you can see our setter you
can also see their register
static function that we created so again
at the end of the day es6 classes get
compiled to es5 functional classes and
the other thing to keep in mind and one
of the tricks is that classes in es6
don’t actually have or don’t actually
allow you to create static properties if
you’re familiar with es5 prototypes
using prototypes you can not just only
create functions but you could also sign
properties to that prototype so let’s
say we could create a shared value or
shared property of minimal balance and
it sort of it makes sense right so my
minimum balance would be zero so in this
case every single object
that’s being created is going to share
that minimum balance value right or
property so look into a console log of
our what we could do new premium account
and I’m just gonna wrap it in
parenthesis and I’m gonna call minimum
balance off of it and let’s see what
value we get we get zero so no matter
how many instances you create they’re
all gonna share the same minimum balance
property now you can’t actually do that
in es6 at this point there is a proposal
that’s known as preset stage two which
sort of allows you to use the static
keyword in order to create static
properties like so but still it’s sort
of like a proposal it’s not been
integrated into the core language so we
can’t be sure if it’s going to become
part of the language in the future or
not so for now you can’t really define
static properties on classes and the
other thing to note is in es5 you could
not only instantiate classes using the
function keyword but you could actually
call the account as a function and still
it’s going to work it’s not going to
break well that’s not really the case
with classes you can’t simply just do a
count as a call because account is a
class so it’s not callable and
you’re gonna get a type error that
basically says that class cannot be
invoked without the new keyword so the
only way to invoke the class would be to
use the new keyword which is basically
what we did right here with a premium
account but with the case of es5 you
could still call the function because
we’re not dealing with classes here
we’re dealing with functions and then
the very very last thing I’m gonna
mention because I know it’s already
pretty long video but the one thing you
need to keep in mind is when you deal
with functions then we talked about
functions in previous videos and also
mention the notion of scope now when we
deal with scope scope is an interesting
thing in es5 or javascript in general
because in Java there’s a concept that’s
known as hoisting no hoisting like I
explained before it’s essentially
behavior of JavaScript in which
JavaScript compiler basically moves all
of your declarations be variables or
functions to the top so that basically
allows us to in this case create an
instance of the account even before the
account is created sort of so we could
do new accounts and pass the balance we
could do a console log the new account
object sorry I smile or the screwed up
but basically what I was trying to
explain is that if you have a function
no matter what kind of function if it’s
a constructor function if it’s just a
regular function it’s perfectly valid to
call that function
you know before it’s written in your
code and that’s because when the Charles
of code executed is the function sort of
like moves to the top of the scope and
not just functions like I mentioned in
the previous video about hoisting but
also variables so what functions is
possible to call a function prior to
when it appears in your code but of
course in es6 that’s not possible with
classes so you can’t let’s say have a
declaration or initialization or your
class before the class is actually
defined so it’s necessary to first write
the definition of your class and only
after that can you you know create
instances of that class and when it
comes to classes in es6 well you’ve seen
so far is basically class declarations
and that’s when you have the class
keyword and you have your the name of
your class and then you have the
rackets we split the body for class but
just like with functions you could also
assign a class to a variable just like
you would do with a function so you
might have something like that account
equals class and then you might have
your account keyword or not it’s
optional and then you have the body of
your class but the difference between
class expressions and class declarations
is that with class expressions you could
actually read a clearer class so it’s
just a little tweak just a little thing
to keep in mind that might help you down
the road
but other than that class expressions
and class declarations work pretty much
in the same way so just to reiterate the
very last thing I know this video is
pretty long but just to recap sure of
all the things that we covered we
covered the different ways to create
methods setters as well as setters and
getters and also static methods on
classes and es6 we’ve seen how
inheritance works with the extents
keyword and we also realized that
classes don’t actually introduce a new
object oriented model they basically
just provide you with a sugar syntax for
ps5 functional classes so they sort of
allow you for more flexibility you know
shorter code more concise code that also
resembles other object-oriented
languages as we mentioned Java and
c-sharp so that is basically it for
classes thanks a lot for checking out
this video and I’ll get back to you with a next one thanks a lot again
tutorial we’re gonna take a look at ESL
classes now the very first thing you
need to understand is that even though
javascript is an object-oriented
language it does not have a concept of a
class so unlike other languages like
Java or C sharp which also
object-oriented languages javascript is
not class-based now you heard me use a
term class essentially we talked about
classes and object oriented languages
but class will mean essentially a
blueprint for object so essentially the
process is that you create classes which
are essentially like I said blueprints
for objects and then you spawn off
objects out of those classes now you can
also extend classes by defining new
classes that basically augment the
functionality of the original classes so
this is all fine and cool but the only
thing is JavaScript uses what’s called a
prototype based inheritance model so
essentially the way works is a first you
create an object then you basically
define properties and methods unloading
that object and then you instantiate new
objects out of it and the way that
inheritance works in Java sip is that it
uses what’s known as prototypes so a
prototype is essentially an internal
property that every single object has in
JavaScript that basically points to
another object which this card object
inherits from so in order to we’ll show
the concept let’s say you have a simple
empty object here if you were to
console.log the prototype of this object
which could generally be accessed
through the proto property you see that
in this case we get an object if you
open up the dev tools and Chrome and you
expand the object you’re actually gonna
see that it has a whole bunch of
properties so the reason you see that is
because every single object in
JavaScript is an extension of the global
object class which has all these
different properties and methods and one
thing you can see there is the
constructor that points to the
underlying object so when we talk about
the prototype the prototype is
essentially a pointer a reference to the
object that this object that we create
right there extensive um so when we talk
about classes in es6 we need to
understand that classes are essentially
just simply a convenient syntax so
classes and by classes I simply mean the
new class keyword in year six is just
simply syntactical sugar for the
traditional prototype based model in
JavaScript so classes are you as you’ll
see
don’t actually introduce a new you know
object-oriented model in JavaScript
JavaScript still uses prototypes under
the hood and the new class syntax is
simply clearer and simpler way to define
objects as well as inherit from them so
what I’d like to do in this tutorial is
I’d like to walk you through the process
of creating classes working with glasses
and the way I’m gonna do that is
basically on the Left I’m going to first
show you examples using the traditional
es5 approach or the functional approach
and on the right I’m going to show you
the new word es6 approach that uses
classes so the very first thing is
previously in order to create classes
and like I said take this with a grain
of salt because actually there’s no
classes in JavaScript and again
JavaScript uses the prototype based
model but in order to create
quote-unquote classes and the older
using the older traditional JavaScript
syntax you would essentially use
functions and so functions in this case
would basically act as object
constructors so one example I’d like to
show you it would be an example of
creating a bank account so in order to
model a bank account we might have a
function we’re gonna call it an account
and then every single bank account in
the real world essentially has a balance
right and so the function what it’s
gonna do is it’s basically gonna assign
the balance to the object given the
balance argument now we can already
create a new instance of the account and
basically it’s gonna be an instance of
the account class or account function
and their starting balance let’s say
it’s gonna be $1,000
we can only console.log account that
balance and of course as you would
expect it’s gonna us $1,000 now if you
wanted to attach some kind of behavior
to
the account class you would need to
create a function or a method so one way
to do it would simply be to assign the
function to a property on the function
structure or the object constructor so
one of the behaviors of a bank account
would be to deposit some kind of an
amount to it right so we could create a
function that might be called deposit we
might just simply pass an amount to it
and all this function is going to do
it’s basically gonna increment the
existing balance with the amount that
you pass to it so where you have an
account here let’s do a calendar posit
we’re gonna deposit two hundred dollars
and once that’s done we’re gonna
console.log the account balance once
again and as you would expect first we
get a thousand once we add two hundred
we’re gonna get twelve country so that’s
simple and cool the only problem with
this approach though and it works
perfectly fine but the only problem with
it is that every single object that we
create out of the account class is going
to have its own copy of all the
properties that the function defines so
in this case we’ll define the balance
property but we also define the deposit
method and again it’s also a property
but in this case it’s not a value like a
balance right it’s not ie an integer
like 1000 it’s actually a function then
this keys balance is going to change
right so if we created let’s say account
account – and it’s gonna be a new
account let’s say the balance is going
to be 550 and we did console the log
account to balance and then we wanted to
deposit a new amount into it let’s say
$100 and then was it a console log of
account to that balance and of course I
misspelled it it should be deposit but
once that happens you’re gonna see it’s
gonna be incremented by 100 so like I
said balance is going to be dynamic it’s
going to change from object to object
but the deposit function well it’s
pretty much the same every time the
behavior is going to be the same so
there’s really no point in copying over
the same function
for every single object that we create
it’s kind of a waste of memory if you
think about it because it’s gonna be the
same function but it’s gonna be recreate
it every time a new object is
instantiated so like I said it’s
basically a waste of time and we want to
avoid it at all cost so in order to
avoid the situation one way we can
approach it is basically by the use of
the prototype now we talked about the
prototype a little bit but essentially a
prototype like I said it’s an object
that every single object in JavaScript
is going to have it’s like an internal
property that you can attach properties
or method to it methods to it and those
properties and methods are going to be
shared across all the objects that you
create so in this case we have an
account we do open an account and let’s
say that an account is gonna have a
prototype and we’re going to attach a
deposit function to that prototype so
it’s again it’s gonna be a function
we’re gonna pass an amount to it and
it’s just simply going to increment the
balance with the amount so now in this
case you get the same result you get the
same output nothing changed it’s the
same behavior but in this case the
difference is that this deposit function
well it’s going to be sure it across all
instances of the account class or the
account function so that each one of
them is going to have the same instance
of the same deposit function in other
words the deposit function is not going
to be recreated for every single
instance now so how would this look in
es6 using a class notation well in an in
es6 we’ll have the new class keyword and
it basically allows us to create classes
in this case we’re dealing with the
account class now in order to have a
constructor previously we had to resort
to functions so we basically use
functions as object constructors in this
case we can use a special constructor
constructor method and we’re going to
pass a balance into it so the
Constructors you can receive a balance
and we’re just going to assign the
balance as a property to the object all
right so we can already create a new
account instance it’s going to be a new
account let’s say 700 as a starting
balance
and then we can console.log account
balance and of course that’s gonna give
us 700 now in order to add a function to
the class we would use a new notation of
defining methods the base he’ll have a
deposit we can accept an amount and then
the body of a function is basically
going to contain this logic it’s gonna
increment the balance by the amount that
you pass so that’s how you deposit money
into the account so now we can simply
call account our deposit let’s say 100
we’ll call for log account balance and
of course I misspelled the deposit no
fix that and you see it’s gonna be
incremented by 100 now there’s an
apposite function it’s not going to
suffer from the same issue as we had
before so this deposit function is
actually being defined on the prototype
and in fact if you wanted to prove that
you could basically do a console log of
the deposit function right or the
deposit string in the account prototype
and this returns true meaning that the
account prototype contains the deposit
function so like I said the deposit
function is being created on the
prototype it’s not being created as a
property on the constructor you could
still technically do that but like I
said really it’s a waste of memory and
there’s no reason to do that now the
other thing that you might consider when
dealing with objects in JavaScript is
getters and setters so one of the
problems as you can see here is that we
have direct access to the balance data
property on the account so this means
that we can actually use the account
balance property and initialize it to
any value that we want so we could
either assign it to negative values or
we could even assign and gibberish to it
and it’s not going to work because if we
console.log the balance of course it’s
going to be the new value that we
assigned to it so this is of course not
ideal and if you are familiar with
object-oriented paradigm in modern
languages well essentially one of the
concepts that it has is known as
encapsulation it’s essentially a
paradigm in which you want to make sure
that data properties of classes and
objects are hidden from the outside
world and you essentially only expose
some kind of an interface that allows
you to interact with those that are
properties in a safe way so in this case
one of the ways to deal with this would
be to use a simple convention that
basically uses the underscore so we
could instead of using the ballots we’ll
just assign underscore balance as the
property and then in this case of course
we’re not going to have access to the
balance but we can still create and
what’s the only getter or an accessor
which is basically a special type of
function that is just simply going to
return the balance of this account in
this case one of the ways to do this and
of course there’s multiple ways but one
of the ways is to use the object define
property method the first argument would
be the account prototype the second one
would be the name of the property in
this case this would be balance right
and the last one would be the actual
getter so in this case we can use a
special get keyword then we’re gonna use
the function and all its gonna do is
just gonna return this balance and in
fact it’s gonna return this underscore
balance because if you return balances
you’re basically gonna end up with an
infinite loop that it’s basically gonna
call together again and again in this
case you can see that we get the new
balance and of course this assignment
fails because we no longer have the
balance property now in order to work
with that we might need to create a
setter now in this case it makes sense
to call our setter balance now one way
to do this would be to use a method
called define properties but because we
already have the direct access to the
prototype it’s simpler to just simply
assign a complete new object to the
prototype and define everything on it so
we’re gonna move the deposit function
inside of that object so it’s gonna be a
property it’s gonna be called deposit
then we’re gonna have a getter which is
basically going to
the the balance function it’s just gonna
return the current balance and lastly
we’re gonna define a sitter which is
going to accept a new balance and then
so we don’t need any of this stuff I’m
gonna collage so instead of this setter
like I said if we want to protect
ourselves from being able to assign
negative values to the ballots we can
have an if condition that says if
balance is less than zero we could just
simply throw an exception and say
balance cannot be negative right and
otherwise we’re going to assign this
balance equals balance so in this case
as you would expect here this is still
going to work right because we’re not
checking for any shrinks but if you try
to assign let’s say a negative 500
you’re gonna get an exception because
balance cannot be negative now this is
quite complicated and again like I said
there’s multiple ways to go about it in
es6 there’s actually only one way to do
it and you would use this special get
keyword again so you can have your
balance this would be a simple getter it
would return this balance the only thing
here like I said before you gotta be
careful with the names so in this case
you’re actually gonna run into gonna run
into maximum stack size exceeded
exception because you’re calling here
you get it with the same name and
basically what the Gator does it calls
itself with the balance right so that’s
not going to work so one way to go about
it is to use this special underscore
notation basically the underscore
balance is still going to be accessible
you like you could still do a count but
dot underscore balance it’s gonna give
you access to the balance and you could
also in fact do a count dot underscore
balance and you get to assign any kind
of gibberish value to it but again by
using the underscore it’s or like a
notation to higher values even though
the actual there’s no public and they’re
still accessible like I said there’s no
actually there’s no notion of public
protected or private in JavaScript both
in es6 and es5
all the properties of an object are
public by default so this underscore
notation is just simply a convention
that allows you to
so like haven’t work around around that
issue so going back to our getter to
make this work we just need to add the
underscore to the balance and this
should work and then finally the setter
could also be named as balance and you
could pass the starting balance to it
and then you simply do this and of
course you could move the same logic as
we had before to the new cetera now to
illustrate a concept we can have our
counter balance and we get console.log
that so let’s go so love that and then
we can do account balance sure you
assign 1000 to it and then do
console.log account balance again no
exceptions so far first we get 700 even
get 1000 but if we tried a negative 1000
of course that’s going to fail with the
exception right there now lastly when it
comes to inheritance inheritance in
JavaScript works with prototypes so
let’s say in this class we had a new
class or new function we’re gonna call
it
premium account so a premium account
let’s say it’s a special type of an
account will you also have the balance
but let’s say you also have bonus points
right so the very first thing you need
to do is you still need to call the
original account right because we’re
gonna extend the account class and you
need to pass the best keyword which is
basically this object and also the
balance so that the balance will be
properly initialized last thing we can
also assign these bonus points to the
object just like so and then there’s two
important things that you would need to
do the very first one you need to call
the premium account prototype and you
need to assign an instance of the
accounts to that prototype and in fact
and this gives you what you could also
use object.create with the account but
in this case I would just stick to using
a simple and situation of the account
class and the second thing you would
need to do is you would need to assign
to the premium accounts class and once
you do that
we’re basically set and now we can
create instances of the premium account
so let’s say we have a premium account
it’s going to be an instance of the
premium account class what function
we’re gonna have a starting price of 500
let’s say we have a 100 bonus points and
we just want to console.log premium
account balance just to see the
underlying values and as well as premium
account that bonus points now in this
case as you would expect we get five
hundred and 100 but in this case we also
get access to all the gears and the
servers as well as the deposit function
so we could do premium account dot
deposit let’s say one hundred dollars
and after that one the console log the
premium account balance in this case
notice we’re using the balance getter to
get the value of the balance as opposed
to accessing the property directly so in
this case all the functions and all the
properties are inherited using the
prototype and the interesting thing is
if you want to go deep and actually see
what the prototype looks like you could
do console.log premium accounts dot
prototype and in this case it actually
returns undefined but if you did proto
this would make more sense they would
actually returns you an object that has
balance that has a constructor with a
premium account like we assigned right
there and it also has the poro object
with all the methods as I explained
before so how does inheritance work in
the ax six now in EO 6 the syntax is
actually much much simpler so you would
think you would again have a class right
in this case will be a premium account
class and what you want to do is you
want to extend the account class right
so you would still have your constructor
and you would pass your balance and
it’ll
to pass your bonus points into the
constructor now in order to call the
constructor of the parent class like we
did in the previous example on the left
right we did a count call in this case
in order to do that it’s much simpler
you just simply call the super keyword
and you pass the balance into it so it’s
basically gonna call the constructor of
the parent class with the balance so the
balance is going to be set in that
method and lastly we’re gonna do this
bonus points equals bonus points so
let’s see if that worked let’s create a
new premium account it’s gonna be a new
object of premium account class don’t
get a pass let’s say nine hundred and
one hundred four bonus points and then
we’re gonna do premium account balance
and that’s gonna be our getter we’re
gonna do a little comfortable oops we’re
gonna do a puzzle log of premium account
balance and then we’re gonna do let’s
say we’re gonna use the deposit method
just for the sake of it we’re gonna
deposit $100 and then last we’re gonna
do or console log of the balance so we
get nine hundred as you would expect and
we also get one thousand once we call
the deposit function so again in this
case again all the functions and
properties are inherited in the child
class and you also have your bonus
points right there so at this point you
can already extend the class by creating
new getters for the born spool for the
bonus points and so long but one thing
you could also do in es5 is you could
use what’s known at other languages as
static functions so static functions are
basically or methods those are basically
methods that you call off the class
without having to instantiate the class
as an object so in this case one of the
methods that would make sense would be
to register a bank account so we might
have a register function in order to
register a bank account you would need a
starting balance right so once we have
the balance we could simply return new
account balance so just creates in
instance of the account class I’m just
gonna kill the other examples that we
had I always try to do console.log
account the register and we’re gonna
pass 600 as a balance right it’s gonna
create an object for us and it’s gonna
have all the functions and all the
properties now you could still do the
same thing in es6 and in order to do
that you could use this static keyword
so you might have static register you’re
still gonna pass the balance and then
lastly the body of the function would
simply return you the new account
instance and it’s still going to work in
fact I’m gonna kill the older examples
and let’s do console.log account dot
create or actually we call it register
let’s fast nine hundred it’s gonna pass
it’s gonna give us an object with a
balance of nine hundred and again of
course you could still call all the
different methods and access all the
properties that the account class or
account object has now to wrap up this
video I’m just gonna mention a few
things about es6 classes so like I said
before es6 classes don’t actually
introduce a new concept in javascript
javascript still uses prototypes under
the hood so all of this syntax that we
have right here is actually being
translated into es 5 and actually in
order to prove that I’m gonna do a
simple trick here so let’s look for es6
[Music]
compilation online let’s see I’m looking
for the Babel website and I think it’s
right there so if I were to copy over
our account class right there let’s just
base it over here and let’s prettified
it also so as you can see here this is
basically the website I’m on is Babel
Gao what we did right there is we
basically added our account class and
Bob will essentially compiled a class
into the traditional es5 form and you
can see right here that we have our good
old function constructor that creates
the account we assign the balance and
then there’s a whole bunch of methods
here you can see the getters
our getter you can see our setter you
can also see their register
static function that we created so again
at the end of the day es6 classes get
compiled to es5 functional classes and
the other thing to keep in mind and one
of the tricks is that classes in es6
don’t actually have or don’t actually
allow you to create static properties if
you’re familiar with es5 prototypes
using prototypes you can not just only
create functions but you could also sign
properties to that prototype so let’s
say we could create a shared value or
shared property of minimal balance and
it sort of it makes sense right so my
minimum balance would be zero so in this
case every single object
that’s being created is going to share
that minimum balance value right or
property so look into a console log of
our what we could do new premium account
and I’m just gonna wrap it in
parenthesis and I’m gonna call minimum
balance off of it and let’s see what
value we get we get zero so no matter
how many instances you create they’re
all gonna share the same minimum balance
property now you can’t actually do that
in es6 at this point there is a proposal
that’s known as preset stage two which
sort of allows you to use the static
keyword in order to create static
properties like so but still it’s sort
of like a proposal it’s not been
integrated into the core language so we
can’t be sure if it’s going to become
part of the language in the future or
not so for now you can’t really define
static properties on classes and the
other thing to note is in es5 you could
not only instantiate classes using the
function keyword but you could actually
call the account as a function and still
it’s going to work it’s not going to
break well that’s not really the case
with classes you can’t simply just do a
count as a call because account is a
class so it’s not callable and
you’re gonna get a type error that
basically says that class cannot be
invoked without the new keyword so the
only way to invoke the class would be to
use the new keyword which is basically
what we did right here with a premium
account but with the case of es5 you
could still call the function because
we’re not dealing with classes here
we’re dealing with functions and then
the very very last thing I’m gonna
mention because I know it’s already
pretty long video but the one thing you
need to keep in mind is when you deal
with functions then we talked about
functions in previous videos and also
mention the notion of scope now when we
deal with scope scope is an interesting
thing in es5 or javascript in general
because in Java there’s a concept that’s
known as hoisting no hoisting like I
explained before it’s essentially
behavior of JavaScript in which
JavaScript compiler basically moves all
of your declarations be variables or
functions to the top so that basically
allows us to in this case create an
instance of the account even before the
account is created sort of so we could
do new accounts and pass the balance we
could do a console log the new account
object sorry I smile or the screwed up
but basically what I was trying to
explain is that if you have a function
no matter what kind of function if it’s
a constructor function if it’s just a
regular function it’s perfectly valid to
call that function
you know before it’s written in your
code and that’s because when the Charles
of code executed is the function sort of
like moves to the top of the scope and
not just functions like I mentioned in
the previous video about hoisting but
also variables so what functions is
possible to call a function prior to
when it appears in your code but of
course in es6 that’s not possible with
classes so you can’t let’s say have a
declaration or initialization or your
class before the class is actually
defined so it’s necessary to first write
the definition of your class and only
after that can you you know create
instances of that class and when it
comes to classes in es6 well you’ve seen
so far is basically class declarations
and that’s when you have the class
keyword and you have your the name of
your class and then you have the
rackets we split the body for class but
just like with functions you could also
assign a class to a variable just like
you would do with a function so you
might have something like that account
equals class and then you might have
your account keyword or not it’s
optional and then you have the body of
your class but the difference between
class expressions and class declarations
is that with class expressions you could
actually read a clearer class so it’s
just a little tweak just a little thing
to keep in mind that might help you down
the road
but other than that class expressions
and class declarations work pretty much
in the same way so just to reiterate the
very last thing I know this video is
pretty long but just to recap sure of
all the things that we covered we
covered the different ways to create
methods setters as well as setters and
getters and also static methods on
classes and es6 we’ve seen how
inheritance works with the extents
keyword and we also realized that
classes don’t actually introduce a new
object oriented model they basically
just provide you with a sugar syntax for
ps5 functional classes so they sort of
allow you for more flexibility you know
shorter code more concise code that also
resembles other object-oriented
languages as we mentioned Java and
c-sharp so that is basically it for
classes thanks a lot for checking out
this video and I’ll get back to you with a next one thanks a lot again
Please follow and like us: