All language subtitles for 005 Understanding Classes_en

We learned about imports and exports. Another core feature of next generation javascript are classes

if you're coming from some other programming language, you might already know classes.

Classes are essentially blueprints for objects.

In our case here for javascript objects. A class is created with the class keyword and a class can have

both properties and methods.

Methods are simply functions attached to classes where properties are variables attached to classes.

You could say we'll use both in this course and then we'll obviously always explain what we're doing here.

When we add such a property or method a class is instantiated like this with the new keyword.

And this might of course look familiar to you if you worked a bit with javascript.

You might notice from constructor functions and indeed classes are kind of a more convenient way of

creating constructor functions so you create javascript objects with classes as blueprints.

That's the idea and classes also support inheritance.

Which means you have another class which you inherit from taking all its properties and methods and

potentially adding new properties and methods.

That also might look familiar to you.

You might notice from prototypes.

Let's have a look at classes in action.

Let's create a new class here.

I'll name it person just like this.

Then you have curly braces to mark the class body.

And now there we can start using properties now in its simplest form a property is added by adding a

constructor that is a default function method.

You can add to any class which will be executed whenever you instantiate the class and the method is

created just with the name of the method parentheses and then curly braces.

And then there we can now set up properties with the this keyword and we could write this name equals max

for example.

We can now also add a method.

PrintMyName and there we could simply output this.name referring to the name property we created.

Now we can use this class to store an instance in a constant with new person and then we can execute

person.

PrintMyName.

If we now hit run we see Max.

This is how easy we can use a class.

Now I said that classes can also inherit.

So what we can do is we can create another class human, and there we might also add a constructor to

set this.gender equal to male or female of course if you want, what you feel, whatever you want and you could

at printGender and then output console log.

this.gender.

And now if person extends then that's a keyword word again extends human.

Now we inherit this property and this method printGender and we can use both on the person as well

so we can also call a person.printGender like that.

However before we run to successfully we're actually let's try it.

We'll get an error that we must call the super constructor in the derived class and that's important.

If you are extending another class and you are implementing the constructor which you don't have to.

But if you are then you have to add super this special super method in the constructor.

It's a keyword and it simply executes the parent constructor to which you of course have to to correct

to initialize the parent class.

So now you hit clear and run you'll see Max and male and obviously you could now go into your person

class and still set gender there to female which is not 100 percent correct here but that's just to show case

that this works.

Now you see we print female even though we're still calling printGender here.

But it is extended by person so these are classes and classes are used by React to create its components.

At least this is one of the two ways of creating components.

This is how you will see me use it in this course and it's important to understand that classes are

just blueprints for javascript objects and are very comparable to constructor functions where inheritance

is comparable to prototypes.