Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

7.5 Classes

Classes in JavaScript are a syntactic sugar that makes it easier to use JavaScript’s prototype-based inheritance. In this lesson, we’ll focus on the way to create objects and deal with inheritance.

Key terms:

  • class
  • super

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


7.5 Classes

Hi folks, in this lesson we're going to take a look at classes in JavaScript. As we've learned already, JavaScript's inheritance model is based on an object's prototype, and as such is known as prototypal inheritance. With the introduction of classes, quite recently in JavaScript, in ES 2015 Nothing has actually changed. JavaScript still uses prototypal inheritance. Classes are just a syntactic sugar laid on top of the prototypal inheritance model that just makes working with objects JavaScript a bit easier and a bit nicer to write. So, when we were creating our person constructor function earlier one in the course, what we were doing basically is creating a person class and using that constructor to create instances with that classes. Classes just make it a bit easier and nicer to create these kinds of classes. Let's take a look. So classes are defined using the class keyword. So this is a class declaration. And it looks very similar to a function declaration, except there are no parentheses following the class name. One important point to note however is that while function declarations are hoisted to the top of their scope, class declarations are not hoisted. So an arrow will be thrown if a class is used before it gets declared, unlike a function. Another similarity with functions is that we can have class declarations, or class expressions. And just like functions, class expressions can be unnamed, or named. So the body of the class is added between the curly brackets. Setting the constructor for a class is done using the special constructor property. In this case the constructor accepts a name and this name is set as a property of any instance. Objects created using this class. We can also define methods that all instances of the class will inherit. So in this case we've added a method called shout name. So any employee objects that we create using this employee class. Will automatically inherit this shout name method from the classes prototype. This all happens behind the scenes. We don't have to do anything like updating the prototype ourselves manually. JavaScript just takes care of it for us. So let's now use this class and create a new instance. And let's just take a look at the output in the browser. We can see that the bulk object is shouting its name property. We can also add static methods which are available through the object type rather than through instances of the object. To do this, we just prefix the method name with the static keyword. So this static method can't be called on instances, but it can be called via the class itself. Okay, so you can still see that the string has been reversed. Subclassing is also very simple using another new keyword, the extends keyword. So we can extend the employee class with a new boss class. So let's go back and add a new method to the original employee class. And we'll just call this method work. Now, if we want to override this method in a class that extends the employee class, that's actually really, really easy. All we need to do is provide a method of the same name in the extending class and customize the behavior of the method however we want. Let's go ahead and create the new instance of our boss class. And now let's invoke the work method of each of our objects And we can see that the overriding has worked in exactly the way that we would expect overriding a class method to work. Sometimes when we are extending a class, we might want to invoke a method on the base class from inside the extending class, or the subclass. We have access to the base class from within a subclass via the super keyword. So let's say that when a boss works, they also shout their name. Now, the boss class doesn't have its own shoutName method but, it can still invoke it from the base class. So this example is a little bit contrived. And it's just to show you how we can invoke the method of a base class from within a subclass. It's not something we actually need to do, it's just an example to show you how to do it, and that it is possible. Okay, there we go. So if you do need to invoke a method of the base class from a subclass, it's very easy using the super key route. So in this lesson we looked at a relatively new way of defining classes. Which came to JavaScript as part of ES 2015. We saw that we can define classes using class declarations or class expressions. And that we do that using the class keyword. We learned how to create a constructive for the class with the special constructor property and how to add either instance or static methods to the class. We also saw how to create a sub-class which extends a base class using the extends key word. And we saw how to call methods of the base class. From the subclass using the super keyword. In the next lesson we're going to look at one of the greatest features ever added to JavaScript, ES Modules. Thanks for watching.

Back to the top