Using OOP techniques in ES5: A Guide

Marcel Szimonisz
Jun 26, 2023
5 minutes read

Using OOP techniques in ES5: A Guide

In this blog I will be exploring object-oriented programming (OOP) and Adobe Campaign Classic in ES5. As you may already know, Adobe Campaign Classic relies on ES5, the version of JavaScript specifically used by the platform.

In ES5, there are a few limitations in terms of what you cannot do compared to newer versions of JavaScript (ES6 and beyond) when it comes to object-oriented programming (OOP). Here are a few aspects that may be limited in ES5:

Class Syntax: ES5 does not have native support for the class syntax introduced in ES6. Instead, constructor functions and prototypes are commonly used to define objects and their behaviors.
Inheritance with class: ES5 does not have the extends keyword for class inheritance. Instead, prototype-based inheritance is used, which involves manually linking objects through their prototype chains.
Private Members: ES5 lacks built-in support for defining truly private members within objects. While you can emulate privacy using closures and naming conventions (like prefixing with an underscore), they are not enforced or restricted by the language itself.
Getters and Setters: ES5 does not have explicit getter and setter syntax like get and set in ES6. Instead, you need to define getter and setter methods manually within the object’s prototype.
Arrow Functions: Arrow functions, introduced in ES6, have a more concise syntax and lexical this binding. In ES5, regular functions are used, which may require extra precautions for proper this context handling.
Iterators and Generators: ES5 does not have built-in support for iterators and generators, which are useful for iterating over collections or creating custom iterable objects.

When exploring OOP examples in ES5 while browsing the internet, I have come across numerous implementations. Since ES5 lacks native support for the class syntax introduced in ES6, constructor functions and prototypes are widely utilized to define objects and their behaviors.

Based on the examples I’ve observed, I have developed my own implementation that addresses a crucial aspect that was missing in those solutions: private methods. Let me share my implementation with you

var MyClass = function () {
  // Public properties
  this.a = 'some public property value';
  this.b = 'another public property value';

  // Private property
  var c = 'private property';

  // Private method
  var privateMethod = function() {
    logInfo('This is a private method.');
    logInfo('Accessing a:', this.a);
    logInfo('Accessing b:', this.b);
    logInfo('Accessing c:', c); // Print the private property c
    // Add your private method implementation here
  };

  // Public method
  this.publicMethod = function() {
    logInfo('This is a public method.');
    privateMethod.call(this);
  };
};

//extend MyClass
MyClass.prototype.function = extensionFunction (){
	logInfo("YAY, i'm something like extension method")
}

var a = new MyClass();
a.publicMethod();
a.extensionFunction();

The MyClass constructor function is defined. When invoked with the new keyword, it creates instances of MyClass objects.
Inside the constructor function, public properties a and b are defined and assigned values. These properties are accessible from outside the object and can be accessed and modified.
The variable c is declared within the constructor function, but without using this. This makes it a private property because it is not exposed as a property of the object. It is only accessible within the constructor function itself.
The privateMethod function is defined within the constructor function. It is a private method because it is only accessible within the constructor function and cannot be accessed directly from outside the object.
The publicMethod function is assigned to the object’s prototype. It is a public method that can be accessed from outside the object. Inside publicMethod, the private method privateMethod is invoked using call(this) to ensure it is executed in the context of the current object.
Extension of original class functionality with use of Prototype methods.
An instance of MyClass is created using the new keyword and assigned to the variable a.
Finally, the publicMethod of the a object is called using a.publicMethod().

06/26/2023 10:28:34 AM	js	This is a public method.
06/26/2023 10:28:34 AM	js	This is a private method.
06/26/2023 10:28:34 AM	js	Accessing a: some public property value
06/26/2023 10:28:34 AM	js	Accessing b: another public property value
06/26/2023 10:28:34 AM	js	Accessing c: private property
06/26/2023 10:28:34 AM	js	YAY, i'm something like extension method

You might have noticed that to call a private method I use predefined JavaScript method – .call(). This method in JavaScript is used to invoke a function and explicitly specify the value of this within that function. It allows you to control the context in which the function is executed.

The .call() method takes two or more arguments:

The first argument specifies the value to be set as this within the function.
The subsequent arguments (optional) represent the arguments to be passed to the function.

In the context of the code you provided (privateMethod.call(this)), .call(this) is used to invoke the privateMethod function with the value of this set to the current object.

When .call(this) is used, it ensures that the privateMethod function is executed in the context of the current object (this). This allows privateMethod to access and manipulate the properties and methods of the object.