Classes

Classes are template for creating objects. They are "special functions" and have two components:

• Class Expression
• Class Declaration

Let's learn about some facts related to a Class.

1. Class declarations are not hoisted

Function declarations are hoisted but class declarations are not. The class has to be declared first and accessed later, otherwise will throw a Reference Error.

var shape = new Shape(); //Reference Error 

class Shape{}

2. Class body always 'use strict' syntax

All the code written in a class construct is subject to strict mode syntax for increased performance.

3. Class can be used as an expression

Class expressions may or may not have a binding identifier. They allow you to redfine classes without errors. The typeof classes generated using class expression always returns function. The classes can be defined inside another expression, passed, returned or assigned; when used as a class expression.

4. Class methods are non-enumerable

Once you define a class, the enumerable flag is set to false for all methods in the prototype. This helps when we execute for...in over an object, class methods are usually not needed.

5. Classes can be created dynamically i.e. at runtime

function webAtoms(input) {
return class {
greet() {
console.log("Hello " + input); 
}
};
}

var message = webAtoms("WebAtoms"); //Create a new class
new message().greet(); //Hello WebAtoms

6. 'Class fields' allows to add data property to a class

Class fields synatx allows to add any data property to a class. The property created using class fields is not set on on class prototype, but on the individual object.

class Software{
name = "WebAtoms";
type = "FrameWork"
}

var software = new Software();
console.log("Hello " + software.name + " " + software.type); //Hello WebAtoms Framework
console.log("Software Prototype: ", Software.prototype.name) //undefined

Output

Hello WebAtoms FrameWork
Software Prototype:  undefined

We can also use complex expression and function calls for a class field.

7. Class may include getter/setter or compound properties

The syntax is similar to object literals.

class GetSetDemo {
get data() {
return "I am getter property";
}
set data(message) {
console.log(message + " I am a setter property")
}

}

var getSetDemo = new GetSetDemo();
getSetDemo.data = "Hi,";
console.log(getSetDemo.data);

Output

Hi, I am a setter property
I am getter property

8. Class expression identifier is visible only to class

The identifier i.e. name with which a class expression is identified is visible within the expression only. You cannot access it from the outside.

const Demo = class Test{
getIdentifier() {
return Test.name;
}
};

var instance = new Demo();
console.log(instance.getIdentifier()); //Test
console.log(Test.name); //Reference Error

Output

Test
Uncaught ReferenceError: Test is not defined

9. Base Class can be provided dynamically

Like, you can create classes at run-time; base class can also be provided at run-time.

Final Notes

• eval or arguments are reserved keywords and cannot be used as class names
• constructor name cannot be used for a generator method or getter/setter method
• prototype methods cannot be used as constructor; results in TypeError