Stop Low Resolution Sign

Transcript

Tutorial Area

Transcript of the tutorial.

TOP
Tutorial
          All right then.

So currently when we create our new user objects, we're attaching properties to those user objects

and we can see those over here.

This is all working fine.

However, these objects don't have any methods associated with them yet.

Now it would be nice to give our different objects methods such as a login method or a log out method

so that every time we create a new user it has access to those methods.

So how do we do this?

Well, we don't define them inside the constructor this time.

This is just for attaching properties to the instance.

Instead, we define them after the constructor.

Now, first things first.

We don't comma separate these things we do in objects when we're comma separating different properties.

But inside a class we don't comma separate our different methods.

So all we need to do is write out the method.

So I'm going to call this login like so.

Now notice this is a regular function using shorthand notation, and we use regular functions because

arrow functions don't bind a value to the this keyword when they're called.

We've seen that in the past.

And if we used an arrow function here, this inside the function itself would refer to the window object.

Now, instead by using a regular shorthand function like this, the this keyword will be the object

instance.

That's the new object that we create when we say new user and that's what we want it to be, because

sometimes we want to access this to refer to the object itself inside these methods.

So what I'm going to do inside this method is just log a message to the console.

It's going to be a template string and I'm going to access this so we can get this dot username and

then say just logged in.

So now if I come down here and say user one dot login account and also user two dot login, save it

and let's see what this does and we can see Mario just logged in and Luigi just logged in because we're

getting the name and then this.

Okay, so let's do another function.

We'll say log out and this time we'll say console dot log again, a template string because I want to

access a variable.

This dot username just logged out.

Okay, so let's give this a whirl.

I'm now going to change this to log out and this to log out, save it and preview and we can see Mario

just logged out and Luigi just logged out.

So this is all working and we're defining the functions now just once inside our class.

But every time we create a new user like this, those new user objects are going to have access to those

functions or those methods.

So now we're essentially encapsulating everything it means to be a user inside this class.

Now you can see down here, we also logged out the users to the console.

And what I want to do is just expand one of these and we see the properties, but we also see this proto

property right here.

Now don't worry too much about what this means at the moment.

I am going to talk about this in a few videos time, but if we expand this, we can see now the different

methods attached to this user object.

And the same goes for this one up here.

They both have access to the login and the log out methods.

So right now we have our methods defined and we can use those methods.

Now let's talk a little bit about method chaining, because right now if we wanted to run two consecutive

methods on a single user object, we'd have to run them in separate statements.

For example, if we wanted to take user one and we wanted to run the login method, then the log out

method one after another.

What we'd have to do is take user one and then say log in.

And then on a separate statement we'd say user one dot log out.

Now it would be nice instead if we could chain these together so we could say user one dot log in,

dot log out so that we can do this on one line in a single statement rather than having to go on to

a second line in a new statement.

Now, right now, this wouldn't work.

And the reason this wouldn't work is because this login method right here, which we run first, is

not returning any kind of value.

Now, when a method doesn't explicitly return a value, automatically JavaScript assigns the return

value to be undefined.

So right here, when we call this, we'll log in it to the console, this message, but we're still

returning undefined.

So because this is now undefined, when we return, something we're trying to call the log out method

on undefined, which is obviously not going to work.

So I'm going to show you how we can combat this so we can chain things together.

But the first thing we want to do is just create a new method.

And I'm going.

To call this ink score.

So increase score.

And inside here, what I want to do is increase the score of this user by one and maybe log out a message

as well.

Now, before we do that, I'm going to assign a property score to each new user when we create one and

set that to be zero to begin with, so that every time we create a new user, they're getting a score

property and it's going to be zero to begin with.

Now inside Ink Score, I want to take this dot score so the current instance, so whatever user we use

it on, it's taking their score and then I want to increase it by one.

So I'll say plus equals one or I could use plus plus doesn't really matter.

But anyway, we're taking that score and increasing it by one.

Then I'm going to say console dot log template string and I want to output this dot user name has a

score of and then output this dot score.

So let's give this a whirl.

I'm going to come down here and say user one dot inc score.

So we should see now Mario has a score of one because we've just added 1 to 0.

So let's save this and have a look over here and we can see Mario has a score of one.

If we call it again, then it should be two.

So let's give this a whirl.

Mario has a score of two because we're increasing each time around.

So it would be nice, like I said, to be able to chain these together.

So if I wanted to do several, I could say Inc score, dot inc, score, dot inc score, etcetera.

And obviously this won't work at the minute.

If I tried to do this, we'll get an error because we cannot read the property inc score of undefined

because remember this is still returning a value of undefined because we don't explicitly return a value.

So then we need to return a value in order for this to work.

But what value do we return?

Well, what we want to do is return the value user.

One or user two or whatever the user is that we're calling the method on, because at the end of the

day, if we return that value, then we can use a method on that because that's what the methods are

attached to, the individual user instances.

So we're returning the object instance.

And remember to do that, all we need to do is say return this because this refers to the object instance.

So that's all we need to do and I'm going to do that for the other ones as well.

I'm going to return this and then up here, return this like so.

So now every time we call one of these methods, we're returning the object instance itself.

And since now we return the object instance, we can call another method on it.

Straight away like this, we can chain them together.

So now what I'm going to do is say user one dot log in, then dot inc score and then dot inc score again.

And then finally I'll say dot log out like so.

Okay, save that and see if this works.

And now we can see just logged in, score of one score of two just logged out.

So this works now.

This method chaining now works because we're explicitly returning the instance at the end of each one

of these methods.

Now, you don't always have to do this if you don't want your methods to be chainable, you don't always

have to return this.

You could return a different value.

Instead, if you want to say something like calculate, score or do something and return an actual value,

you could do that.

But if you want to chain them together, then you can return this.