JavaScript: Objects & Classes

For basic Javascript type “object” (i.e. name/value pairs) see this.

Javascript object properties can be set to a function (=> object methods)

let myObj = {
  prop1: "initial value",
  method1: function(val){            // syntax 1
    this.prop1 = this.prop1 + val;
  },
  method2(val){                      // syntax 2
    this.prop1 = this.prop1 + val;
  }
}

console.log(myObj.prop1);            //  initial value
myObj.method1(" added1");
myObj.method2(" added2");
console.log(myObj.prop1);            //  initial value added1 added2

Creation functions can be coded to return new objects (i.e. class instances).

Function createMyObj(initVal){
	return {
		prop1: initVal,
		method1 …
	}
}

Prototype

Each object has an “internal slot”/property, [[prototype]], used to point to a ‘parent’ object. That object in turn has its own “internal slot”. This creates a hierarchy of prototype objects. If a property/method is requested on an object and not found, its prototype is checked. If it is not found there, the prototype of that object is checked and so on up the hierarchy.

By default the prototype is set to the “Object” prototype on creation (can also be explicitly created: Object.create(myPrototype)). It can be reset to another object – that places the new object into a prototype hierarchy:

Object.setPrototypeOf(newObj, prototypeObj);
Object.getPrototypeOf(myObj);

This can be placed in a creation function to place new objects in the prototype hierarchy and thus to give them default properties and behaviour.

Constructors

An alternative to creation functions are ‘constructors’. One meaning for the term in JavaScript are functions with, by convention, the same name as the object type.

function MyClass(parm1, parm2){
	this.parm1 = parm1;
	this.parm2 = parm2;
}

let myObj = new MyClass(“1”, “2”);

The prototype of this new object myObj is defaulted to be the prototype of the MyClass function. This means that all objects created from the constructor function have the same prototype. That is ‘inherit’ the same properties and methods.

MyClass.prototype.property1 = “testing”

console.log(myObj.property1);  // → testing

Class Syntax

class MyClass{
	constructor(parm1, parm2){
		this.parm1 = parm1;
		this.parm2 = parm2;
	}
	method1(in1){
		parm1 = parm1 + in1;
	}
}

let myObj = new MyClass(“1”, “2”);

Under the hood this is much the same as the raw object approach above. A constructor function (only one!) with prototype for methods.

Can use get and set to generate “artificial” properties. Within a class definition

class MyClass{
  ... as above ...

      get fakeProp(){
        return this.parm1 + “:” + this.parm2;
      }

      set fakeProp(inValue){
        console.log(inValue);
      }
}  // end of class

let myObj = new MyClass(“1”, “2”);

console.log(myObj.fakeProp); // → 1:2
myObj.fakeProp = “testing”; // logged: testing

Can include static methods. Must include the class name when calling

class MyClass{
  ... as above ...

      static method2(inValue){
        return inValue + “ processed”;
      }

}  // end of class

MyClass.method2(“Test”)  // -> Test processed

Inheritance via the extends keyword

class MyExtended extends MyClass{
	constructor(parm1, parm2){
                   // call to super(...) included automatically if no constructor
		super(parm1, parm2);
	}
	method2(in1){
		parm2 = parm2 + in1;
	}
}

let myObj2 = new MyExtended(“A”, “B”);
MyExtended.method1(“ extend”);   //from superclass myClass
console.log(myObj2.parm1); // → A extend
MyExtended.method2(“ extend”);
console.log(myObj2.parm2); // → B extend