Javascript Class And Objects

JavaScript class is the blueprint for creating objects. It can be created using class keyword followed by class name and then curly bracket {} while Javascript objects can be created using class and a new keyword.

General Syntax

      class Person{
}

Try it now

Source Code

          
            class Person{
personInfo() {
  document.write('I am a designer and developer' );
 }	
}
var obj = new Person();
obj. personInfo();

Try it now

Javascript Class Constructor

The javascript constructor method is used to create and initialize an object instance of that class.

In other words, the javascript constructor function creates an instance of a class that is known as an objectnew keyword.

General Syntax

      class ClassName {
  constructor() { ... }
}

Try it now

Source Code

          
            class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

Try it now

Code Explanation

The example above creates a class named "Person".

The class has two initial properties: "name" and "age".

A JavaScript class is not an object. It is the template or blueprint of an object that is used to create more than one object from the class i.e object blueprint.

Remember some of the important points:

It is automatically called when the object is initialized.
It is mainly used to initialized object properties.
If you do not initialize the constructor then javascript creates by default the constructor.

What happens When Constructor Is Called?

A new empty object is created.
Keep in mind that, this keyword always refers to a newly created object and it becomes the current instance object.
In the end, the newly created object will be returned to the constructor returned value.

Javascript Class Object

Javascript objects can be created using class and with the help of a new keyword.

General Syntax

      let objectName =  new  className();

Try it now

Source Code

          
            class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let person1 = new Person("Smith", 25);
let person2 = new Person("John Doe", 30);

Try it now

Class Methods

Class methods are similar to object methods. Let us see the general syntax for creating the class method.

General Syntax

      class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Try it now

Source Code

          
            class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  personInfo() {
    document.write("I am static method");
  }
}
var person1 = new Person("smith", 25);
person1.personInfo();

Try it now

Code Explanation

Remember These Point:

A static keyword is used just before the method name or property name to create a static method or static property.
We can call the static method as well as a static property directly using class.
You can declare more than one static method inside the class but if this method will be similar then the javascript engine will call the last static method.
Use this keyword to call a static method within another static method.
You can not call a static method from a nonstatic method using this keyword. To call a static method, you have to use the class name or as the property of the constructor like this.constructor.methodName().

Javascript Class And Objects

General Syntax

Javascript Class Constructor

General Syntax

What happens When Constructor Is Called?

Javascript Class Object

General Syntax

Class Methods

General Syntax

Remember These Point:

Web Tutorials