Class, Instance and Reference

Introduction

Let us imagine that I decided to open a shop where I sell cars and I invited you to come to my shop and see what I have. On coming to my shop, you see a notice at the front door
OZOR CARs

• Colour: Blacks only
• Make: Innoson Motors
• Year of manufacture: 2020 and above
• Features: mileage update, display fuel consumption, accident history

If I tell you there are 5 cars in my shop, what are you expecting each of them to have? Blacks, only Innoson motors, 2020 model and above. This means that you will never find a red car, nor a Toyota brand of car in my shop. Why? Because there is a template that determines what is sold in my shop.

In this article, you will learn

• What a class is
• How to create a class
• Class declaration and expression
• Reference and instance

What is a class

A Class is like that template at the door of my shop telling you what to expect from each of the cars you will find in my shop. Each of the cars in my shop are object and are example (instance) of the class template at the door of my shop. Each object can vary in one way or the other but they must have the features in the template (that is they must inherit this feature from the template, class).

How to create a class

To create a class in JavaScript we use the keyword “class”. Let us define the class car

 class  Cars {
        ….    
      }

This is called class declaration. Another way we can declare a class is

Const Cars = class{
   …..
  }

In this second example, we store the class inside a variable.
We can also decide to export this class either as default or as named export

 export default class Cars{ 
                              …….
                            }

Or

Export class Cars {
                   ………..
               }

An object is an example (or copy or instance) of a class. A class is not an object in itself but a template from which we can produce many objects. So we use the “new” keyword to instantiate(produce) an object from the template which is a class. A class usually contains a constructor function which helps us to set the initial value for the field. For example

  Class Cars{
           Constructor(name){
                   this.name = name
                      }
               }

The “this” keyword points to the newly created instance(copy which is an object)
The newly created instance now will be

               Const car = new Car{
                               “Innoson Ikenga”
                             }

Classes are special functions, just as we have function expression and function declaration, we can have class expression and class declaration.
An example of a class declaration is

Class Rectangle{
                Constructor(height, width){
                 this.height = height;
                 this.width = width;
                }
           }

An example of a class expression is

Const Rectangle   = class {
                     Constructor(height, width){
                                 this,height  = height;
                                 this.width  = width;
                           }
                       }

The latter example is an anonymous class expression. We can have a named class expression as given below

Const Rectangle  = class Rectangle2 {
                     Constructor(height, width){
                                 this.height = height;
                                this.width = width;
                                     }
                                 }

Unlike function declaration, class declaration cannot be called or used before its declaration and initialization. This is because it has a temporal dead zone just like let and const. The body of a class is inside the curly bracket and it is in this bracket that we can define the members of this class such as its method and constructor. A class uses the strict mode even when the “use strict” is not indicated. The constructor is a method used to create and initialize an object created within a class. There can only be one constructor in a class.
We can characterize the elements of a class in 3 ways

a. It's kind: is it a getter, setter, method or field
b. Its location: is it static or instance
c. Its visibility: is it publicly visible or privately visible?

Reference

Let us take a look at this
var obj = new Car()
What can we derive from this expression?
The keyword “new” is used to create a copy of a class called Car (Car is the name of the template here) and is stored in memory. So the new copy newCar() is an instance (more like an example of the original template Car) of an object in memory. It too is stored in memory.
When we declare a variable like obj and point it to the newly created object, newCar(), what we are doing is that we are attaching an address (a reference) to the variable. This can be likened to assigning an address to a house.
The reference( or address) allows us to access the instance (copy of the class which is an object). As such, we can have many references to the same instance. For example

var x = “Hello World”
                var y = x

both x and y are two different references to the same instance
In Conclusion, we can say that
a.