QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads JavaScript “class” Keyword

JavaScript “class” Keyword

This post is a part 7 of ECMAScript 6 Complete Tutorial post series.

ECMAScript 6 introduced “class” keyword to define classes in JavaScript. Earlier to ES6, we had to use constructor function.

Here is an example code on how to define classes and then how to create objects of those class types i.e., instances of classes.

class Student
{
    //constructor of the class
    constructor(name, age)
    {
        //"this" points to the current object
        this.name = name;

        this._age = age;
    }

    //member function
    getName()
    {
        return this.name;
    }

    setName(name)
    {
        this.name = name;
    }

    //getters and setters make a function accessible like a variable. They are used as wrappers around other variables.
    set age(value)
    {
        this._age = value;
    }

    get age()
    {
        return this._age;
    }
}

//class person inherits student class
class Person extends Student
{
    constructor(name, age, citizen)
    {
        //this points to the person class
        this.citizen = citizen;

        //call constructor of super class. "super" is an pointer to the super class object
        super(name, age);
    }

    getCitizen()
    {
        return this.citizen;
    }

    //overriding
    getName()
    {
        //we are calling the super class getName function
        return super.getName();
    }
}

//instance of student class
var stud = new Student("Narayan", 21);

//instance of person class
var p = new Person("Narayan Prusty", 21, "India");

stud.age = 12; //executes setter
console.log(stud.age); //executes getter
Feb 15, 2015Narayan Prusty
Integrate Google Analytics in Intel XDK APPHow to take Date Input in HTML
Comments: 5
  1. Lakis Euthimiou
    7 years ago

    super(name, age); should be called before using this.citizen = citizen; otherwise you’ll get an error.

    ReplyCancel
    • Amir Saleem
      5 years ago

      Yes of course, the correct way is:

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

      ReplyCancel
  2. Tejender
    7 years ago

    Because in Getter, instead of setting this.model, you are again calling it. Code should be:

    set model(model){
    console.log(‘Setter is Called’);
    //this.model;
    this.model=model;
    }

    ReplyCancel
  3. Md. Hasib Hasan Tarafder
    7 years ago

    Hi Narayon,

    Can u please take a look the following code snippet.

    class laptop{
    get model(){
    console.log('Getter is Called');
    }

    set model(model){
    console.log('Setter is Called');
    this.model;
    }
    }

    let l = new laptop();

    l.model='MAC BOOK PRO';
    console.log(l.model);

    it results the following..

    Setter is Called
    Getter is Called
    Getter is Called

    Can u please tell me why “Getter is Called” is printed two times

    ReplyCancel
    • Michu
      7 years ago

      Because you call this.model; in the setter, which calls the getter immediately. Then you call the getter again, in console.log.

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 5 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • JavaScript “let” Keyword
  • JavaScript Limit Function Call Rate
  • JavaScript “yield” Keyword and “function*()” Syntax
  • JavaScript “const” Keyword
  • Difference between Set and WeakSet in JavaScript
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license