Invisible link to canonical for Microformats

Classes

We're functions in JS now


Classes were introduced in JS with ES6. They function the same as object constructors and prototypes.

Classes : Java vs JavaScript

Unlike the classes in Java with special mechanisms…

public class player
{
    private String name;
    private String job;
    //other instance variables

    public player(String name, String job /*other parameters*/)
    {
        this.name = name;
        this.job = job;
    }

    public void playerInfo()
    {
        //definition goes here
    }
}

Classes in JS are just a function [almost everything in this beautiful language is a function for some reason].

class Player
{
    constructor(playerName, playerJob, /*other parameters*/)
    {
        this.playerName = playerName;
        this.playerJob = playerJob;
        //other properties
    }
    playerInfo()
    {
        //method definition goes here
    }
}

We can verify our previous claim of classes being a function with this :

alert(typeof Player); //function

class Player creates a function named Player, whose code is derived from the constructor method.

The other class methods such as playerInfo() are stored in the Player.prototype so that when an object is created and a method is called using it, it is obtained from the Player.prototype.

Then why not use an object constructor and be done with it?

There are a couple of reasons why classes were introduced by ES6. Here’s why :

A function created by class [defining a class] is labelled by a property called [[IsClassConstructor]]: true.

Its string representation is different from that of object constructors :

console.log(Player); //[class Player]
console.log(PlayerAlt); //[Function: PlayerAlt]

Class declaration can only be invoked using new.

And many more.

Creating objects

After defining a class like the above one, we create an object and use methods with it :

let pOne = new Player("Jean Antonique", "Ranger", /*other args*/);

pOne.playerInfo(); //prints player info

Getters and setters

Getters are methods that return a value of the object. Setters are methods that set a value of the object to something else.

class Player
{
    constructor(playerName, playerJob /*parameters*/)
    {
        this.playerName = playerName;
        this.playerJob = playerJob;
        //other properties
    }
    getName()
    {
        return this.playerName;
    }
    setName(newName)
    {
        this.playerName = newName;
    }
}

Class expression

Just like functions, classes can be defined in a variable, passed as argument, returned, etc.

let Player = class
{
    //definition
}

function makePlayerClass(details)
{
    return class
    {
        playerInfo(details)
        {
            console.log(details);
        }
    }
}

let player = makePlayerClass(details);
new player().playerInfo();

extends

extends is used to create a class which is the child of another pre-existing class. To put it shortly, it allows a class to extend a new class, just like an octopus extends its tentacles.

class playerInjuries extends Player
{
    //definition
}

Private properties

Now JS has a feature similar to private instance variables in Java.

class Player
{
    #playerInfectionPercentage = 10.00;

    #playerFullyInfected()
    {
        if (#playerInfectionPercentage==100.00)
        {
            #endGame("Infected");
        }
    }
}

Related