JeffLearnsReact – Classes

Classes are templates that create objects. Class names are usually CapitalCase class Dog { constructor(name) { this.name = name; this.behavior = 0; } } The CLASS calls the CONSTRUCTOR method every time it creates a new INSTANCE of the class. An INSTANCE is an OBJECT that contains the property names and methods of a class, […]

Classes are templates that create objects.
Class names are usually CapitalCase

  class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  }
}

The CLASS calls the CONSTRUCTOR method every time it creates a new INSTANCE of the class.

An INSTANCE is an OBJECT that contains the property names and methods of a class, but with unique property values

In CLASSES you do not add commas between METHODS

  class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  }

  get name() {
    return this.name;
  }
}

Calling METHODS on CLASSES:
The syntax for calling methods and getters on an instance is the same as calling them on an object — append the instance with a period, then the property or method name. For methods, you must also include opening and closing parentheses.

  let nikko = new Dog('Nikko'); // Create dog named Nikko
nikko.incrementBehavior(); // Add 1 to nikko instance's behavior
let bradford = new Dog('Bradford'); // Create dog name Bradford
console.log(nikko.behavior); // Logs 1 to the console
console.log(bradford.behavior); // Logs 0 to the console

Inheritance

When multiple CLASSES share the same PROPERTIES you can use INHERITANCE to simplify (DRY) code.

With inheritance, you can create a parent class (also known as a superclass) with properties and methods that multiple child classes (also known as subclasses) share. The child classes inherit the properties and methods from their parent class.

If we want to create classes for Dogs and Cats, start with a PARENT CLASS of Animal.

  class Animal {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }

  get behavior() {
    return this._behavior;
  }   

  incrementBehavior() {
    this._behavior++;
  }
}

To create a CLASS for Cats, we EXTEND the Animal PARENT CLASS

  class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);
    this._usesLitter = usesLitter;
  }
}

// The extends keyword makes the methods of the animal class available inside the cat class.

// The constructor, called when you create a new Cat object, accepts two arguments, name and usesLitter.

// The super keyword calls the constructor of the parent class. In this case, super(name) passes the name argument of the Cat class to the constructor of the Animal class. When the Animal constructor runs, it sets this._name = name; for new Cat instances.

// _usesLitter is a new property that is unique to the Cat class, so we set it in the Cat constructor.

// NOTE: you must always call the super method before you can use the this keyword — if you do not, JavaScript will throw a reference error. 


Create a new Cat

  const bryceCat = new Cat('Bryce', false); 
console.log(bryceCat._name); // output: Bryce

// NOTE: normally you'll use an INHERITED GETTER instead of the _name underscore

When we call EXTENDS in a CLASS declaration, all of the PARENT METHODS are available to the CHILD CLASS.

In addition to the inherited features, CHILD CLASSES can contain their own PROPERTIES, GETTERS, SETTERS, and METHODS.

STATIC METHODS

Sometimes you will want a CLASS to have METHODS that aren’t available in individual INSTANCES, but that you can call directly from the CLASS.

Take the Date CLASS, for example — you can both create Date INSTANCES to represent whatever date you want, and call STATIC METHODS, like Date.now() which returns the current date, directly from the CLASS. The .now() METHOD is STATIC, so you can call it directly from the CLASS, but not from an instance of the CLASS.

SUMMARY

CLASSES are templates for OBJECTS.

Javascript calls a CONSTRUCTOR METHOD when we create a new INSTANCE of a CLASS.

INHERITANCE is when we create a PARENT CLASS with PROPERTIES and METHODS that we can EXTEND to CHILD CLASSES.

We use the EXTENDS keyword to create a SUBCLASS.

The ‘super’ keyword calls the constructor() of a PARENT CLASS.

STATIC METHODS are called on the CLASS, but not on INSTANCES of the CLASS.

Powered by WPeMatico