Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes
Babel 1
  • Overview
  • Transcript

3.1 Classes

ES6 introduces the class syntax, which allows us to write classes with classical inheritance and a much cleaner syntax than when using prototypes. In this lesson we'll write a couple of simple classes that make use of inheritance.

1.Introduction
1 lesson, 02:53

Free Lesson
1.1
Introduction
02:53

2.Getting Started
2 lessons, 14:42

Free Lesson
2.1
Babel on the Client
08:43

2.2
Babel on the Server
05:59

3.Experimenting With ES6
3 lessons, 18:09

3.1
Classes
04:40

3.2
Generators
05:34

3.3
Other Cool Stuff
07:55

4.Conclusion
1 lesson, 04:28

4.1
Conclusion
04:28


3.1 Classes

Hi, my name is Jason Green, and welcome to this short course on full stack ES6 with Babel. In this lesson we're going to take a look at one of the biggest changes in ES6, which is to do with classes and inheritance. Now practically since the beginning of time JavaScript developers have simulated classical inheritance using the prototype object. With ES6, this is syntactically a lot easier and clearer now. Under the hood, ES6 still creates prototype chains, even when you use the class keyword. So while it is syntactical sugar, at the end of the day, this is all being compiled and interpreted by C, which is obviously a object-oriented classic inheritance model anyway. So, let's set up our gulp task and run node server. I've got our project from last lesson, but I've just removed that so the account util so that we don't get flooded with numbers in our console here. So in this lesson I'm going to create a new file and I'm going to save it as Polygon. So we can use the class keyword to define a new JavaScript class, Polygon. When you use the class keyword, you can create a constructor function. And we're going to give this constructor two arguments, width and height. Inside the constructor, we can refer to this, to set the name, the width, and the height. Then we can also give the class a method, console.log('Hi, my name is') this.name. So we can save that polygon file. This is our new polygon class. And we can create a new file called square j We can use our note style requires to require the ./Polygon class in our Square class so that we can extend it. Class Square extends Polygon. This is how we create an inheritance chain. You can see it's a lot syntactically nicer than dealing with prototypes. I will say it's still definitely important to understand how JavaScript uses prototypes and prototype chains. So when we define a square, we don't need a width and height. We just need a length. We can call the super of this function, so the inherited constructor, and passing length for both values. And we can also employ another ES6 feature and give length default value of 10, so that we don't have to parse an argument. And then we can set this .name equals to square. So that's overwriting some of the functionality of the polygon. We can define getters like so, so this area is going to be essentially a computed value. And when you hit square.area, it's going to run this get function and so that's our square class. If we go back to our main JS file. We can import the square class, create a new square, and parse in a specific value. Or, we can create another square without parsing any value, and the default value will be used. That's console.log(s1.area, s2.area). Then we'll console.log(s1.sayName). That's the inherited function from the polygon class. If you look at our gulp task you can see it's been building away happily so there should be no problems. But of course there is. It says here super expression must either be null or a function, not an object. So I need to actually export them in the module exports object. So we'll export polygon and we'll export square. Okay so we should expect to create two square objects. Print out their respective areas and with the second one we'll just get it to say it's name. So when I hit refresh you can see it's printed out 25 and 100. And it says, hi, my name is Square. And it's printed out an extra line there, undefined. Because I forgot that same name is actually already console logging. So by calling console log, here, it's going to essentially console log the return of undefined. So there we have it. So that's all for ES6 classes, check back in for the next lesson, where we'll be looking at the yield key word, and generator functions. Chao.

Back to the top