DEV Community

Cover image for How Classes work in JavaScript
Sai gowtham
Sai gowtham

Posted on • Updated on • Originally published at reactgo.com

How Classes work in JavaScript

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
Enter fullscreen mode Exit fullscreen mode

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) //  { } 
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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

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

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 }
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

__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')
Enter fullscreen mode Exit fullscreen mode

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

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

Originally Published at reactgo.com
Follow me on twitter

Top comments (7)

Collapse
 
mario_tilli profile image
Mario Tilli

That's a good explanation! I would like to contribute to your post, in case someone wants class Student parameters marked as private.

class Student{


  constructor(n,a){
    var name;
    var age;
    name = n;
    age = a;
    this.getAge = function() {
       return age;
    }
    this.getName = function() {
       return name;
    }
  }
}

Collapse
 
maxart2501 profile image
Massimo Artizzu

Classes are the syntactic sugar

I'd say they mostly are, but they aren't just sugar. There are things you can't polyfill in ES5. Namely, you can't effectively extend native classes like Date or Error without class.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
zerquix18 profile image
I'm Luis! \^-^/

Fun fact: I've been using React with classes for like 6 months now and I didn't even know exactly how it all worked haha. Thanks a lot!

Collapse
 
artoodeeto profile image
aRtoo

wish i could book mack this like in medium. this is a good read.

Collapse
 
martyhimmel profile image
Martin Himmel

You can. Click the third button (blue one that looks sorta like a bookmark) on the bottom of the page. It'll save it to your Reading List.

Collapse
 
dreamemulator profile image
dreamEmulator

Thanks mate, nice explanation 👍