JS Course

Classes and objects

Go back

In JavaScript, classes are defining the default properties of an object, but you can dynamically add properties (either for one object, or every object of the class). This can make debugging complex, so be careful (ex: use inheritance instead of dynamic properties πŸ˜‰).

Let's say you got an instance (=object of a class) of a HTMLImageElement (<img src="a_source">) in the variable img, you can

  • set/get the properties like "alt, src, ..." with img.alt
  • use methods (like img.getAttribute('src') that is the same as img.src)

You can get the variable class and prototype with variable.__proto__ (class, attributes, methods).

Note: Just in case if you didn't know, but a class is something defining properties (ex: name, age, etc.) and methods (functions, such as getAge or isMarried) for a Person. You are creating an object/instance, when you are giving values to the attributes (such as name=John Doe etc.).


Creating a class

Everything is quite familiar with what you are doing in Java/PHP, but you can only have one constructor (same as PHP).

class Person {

    // How can we create new objects of this class?
    // answer: we are calling this method
    constructor(name="John Doe") {
        // declaring attributes
        this.name = name;
    }
    
    // you may declare functions, ...
    isMarried(){
        return "I don't know πŸ˜‚";
    }
}

Creating Objects

An object is an instance of the class.

// creating new objects
let john = new Person();
let jane = new Person("Jane Doe")
console.log(john.name) // "John Doe"
console.log(jane.name) // "Jane Doe"
console.log(john.isMarried()); // "I don't know πŸ˜‚"

Changing the prototype

This is an example of adding an attribute "new_property" to every object of the class Person

// we are changing the prototype,
// adding a new attribute to the class
jane.__proto__.married = false;
jane.married // 5
john.married // 5
// adding a new property only to one variable
jane.age = "?";
jane.age // "?"
john.age // undefined

What's the use of this? Well, for images on your website, you are not the one handling them, so you can't inherit HTMLImageElement and add a new property. But what if you are making a Memory and you want to keep track of the images that are already paired? You can dynamically add an attribute to the image 😎.


Dynamic classes

You can also create a class on the fly, and giving the values right away. The syntax for objects is the same as in JSON.

let calistro = {
     name: "Calistro",
     work : function() {
          alert("I'm already working 😭");
     }
};

console.log(calistro.name) // "Calistro"
user.work(); // open alert

Inheritance

Everything is the same as in Java/PHP/..., look on the WEB, but here is some code

class MarriedPerson extends Person {
    constructor(name="John Doe") {
        // create Person
        super(name);
    }

    // change the behavior
    isMarried(){
        return "Yes!";
    }
}
new Person().isMarried()
// "I don't know πŸ˜‚"
new MarriedPerson().isMarried()
// "Yes!"