Under the hood, ES6 classes are not something that is radically new: They mainly provide more convenient syntax to create old-school constructor functions. That’s the main reason why everyone calls it as syntactic sugar.
ES6 classes provide a clean and concise way to write object-oriented JavaScript.
“Instantiating” a class in JavaScript does create a new object, but not one that is independent of its parent class.Rather, it creates an object that is linked to a prototype. Changes to that prototype propagate to the new object, even after instantiation.
You create classes with the class keyword, followed by an identifier, and finally, a code block, called the class body.These are called class declarations. Class declarations that don’t use the extends keyword are called base classes.
Classes can only contain method definitions, not data properties.
A distinctive feature of classes is the function called constructor. This is where you initialize your object’s properties. You don’t have to define a constructor function. If you choose not to, the engine will insert an empty one for you.
When defining methods, you use shorthand method definitions;
Unlike when creating objects, you do not separate method definitions in class bodies with commas.
Static methods are methods on the constructor function itself, which are not available on instances of the class. You define them by using the static keyword.
Any method that isn’t a constructor or a static method is prototype method.
The name comes from the fact that we used to achieve this functionality by attaching functions to the .prototype of functions-as-constructors.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class Book { constructor(name) { this.name = name; } getName() { return this.name; } setName(name) { this.name = name; } static IncrementbooksCount(count) { return count + 1; } } let n = new Book("Test"); console.log(n.getName());//Test n.setName("Updated Test"); console.log(n.getName());//Updated Test console.log(n.IncrementbooksCount(10)); //n.IncrementbooksCount is not a function console.log(Book.IncrementbooksCount(10));//11 |
Assigning a class to a variable is called a class expression,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //Unnamed classes let Books = class { constructor() { this.name = name; } } console.log(Books.name); //Books //Named Classes let Books1 = class customBooks { constructor() { this.name = name; } } console.log(Books1.name); //customBooks |
Sub-classes are declared with the class keyword, followed by an identifier, and then the extends keyword, followed by an arbitrary expression.
If your derived class needs to refer to the class it extends, it can do so with the super keyword. Using the extends keyword to extend a class is a great example of where the simplicity of the class syntax shines.
A derived class can’t contain an empty constructor. Even if all the constructor does is call super(), you’ll still have to do so explicitly. It can, however, contain no constructor.
You must call super in the constructor of a derived class before you use “this”. Using super, you can access methods and properties available on the parent class.
1 2 3 4 5 6 7 8 | class HarryPorter extends Book { constructor(name,price){ super(name); this.price = price; } } let H = new HarryPorter("Harry", "$120.00"); console.log(H.getName());//Harry |
Hoisting in Javascript
An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it, otherwise code will throw a “ReferenceError”.
New Keyword Protection! in ES6 Classes
constructor functions work pretty well but one instance where you can run into trouble though is if the function is invoked without the new keyword. When this happens instead of creating a new object the function behaves like a regular function and adds the properties to the global object–in browsers this would be window.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function Dog (name) { this.name = name; } // missing new keyword var fido = Dog('Fido'); console.log(fido); // undefined :( console.log(window.name); // 'Fido' //One nice feature of ES6 classes is the constructor function will only be invoked when using the new keyword. class Dog { constructor (name) { this.name = name; } } var fido = Dog('Fido'); // Class constructor Dog cannot be invoked without ‘new' |
Now something that you need to bear in mind is that this syntax is (mostly) just a beautified version of the prototype. It really simplifies the development process by making things easier for people with background in other languages to understand.
As i would always recommend, If you’re a beginner MDN is the best place to learn web development.
Happy coding……:)