Author -  Sai gowtham

Learn JavaScript classes in depth

Classes are the syntactic sugar in the javascript unlike the other programming languages javascript doesn’t contain proper classes.

Classes use the prototype-based inheritance by using constructors.

What is a constructor?

A constructor is a function object which is used to create and initializes the objects.

constructor

Let’s discuss now by using examples.

function Student(){

}
const student = Student();

console.log(student) // undefined

If we invoke a function with the new keyword it will return the empty object instead of undefined.

function Student(){

}

const student1 = new Student();

console.log(student1) //  { }

classes

How to add properties into that returned empty object?

function Student(name,age){

  this.name = name
  this.age = age
}

const student1 = new Student('king',20);

// { name : 'king',age:20 }

The new object is created by the constructor and assigned to the this keyword so that we can add new properties to that object by using this.propertyname.

At last, the constructor returns this object like below image.

super JavaScript

Classes

Classes are also a special type of functions using prototype-based inheritance.

to declare the class we need to use class keyword.

class Student{

constructor(name,age){
  this.name = name
  this.age = age
}

}

const student1 = new Student('king',20)

// { name : 'king',age:20 }

Methods in classes

class Student{

 constructor(name,age){
  this.name = name
  this.age = age
}

 getAge(){
   return this.age;
 }

}

const student1 = new Student('king',20);

student1.getAge();

The methods we declare inside the Student class are added to its prototype and it assigns the methods to the this.__proto__ property. so that at the time of accessing the getAge method javascript engine first look on its object, if it fails to find then it will look up at the __proto__ property.

check out the below image you will get the clarity.

prototype proto

Extends in classes

Extends keyword helps us to access the properties and methods present in the other class or parent class.

super

If we extend the class from the parent class we need to invoke the parent class before using the child class there is a super method provided by the javascript, it does the invocation for us.

class Csestudent extends  Student{

    constructor(name,age,course){
      super(name,age);
     this.course = course
    }

   getCourse(){
      return this.course
   }
}

const student = new Csestudent('king',20,'JavaScript')

In below image, i have shown how javascript engine process the code.

execution context classes

Let me explain what happens when we invoke a Csestudent class javascript engine first adds the Csestudent to the call stack once it sees the super method it invokes the parent class which is a Student and it returns the object with two properties at final we are adding course property to that object.

The final student object might look like these.

But the methods we declared in the Student class are present in the this.__proto__.__proto__

References

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY