JavaScript/Object-based programming

Object-oriented programming (OOP) is a software design paradigm that first arose in the 1960s and gained popularity in the 1990s. It strives for modularization, reusability, encapsulation and hiding of state (data) and behavior (functions), design in a hierarchy of generalization, inheritance, and more.

It allows the components to be as modular as possible. In particular, when a new object type is created, it is expected that it should work without problems when placed in a different environment or new programming project. The benefits of this approach are a shorter development time and easier debugging because you're re-using program code that has already been proven. This 'black box' approach means that data goes into the object and other data comes out of the object, but what goes on inside isn't something you need to concern yourself with.

Over time different techniques have been developed to implement OOP. The most popular ones are the class-based and the prototype-based approach.

Class-based OOP
Classes are a blueprint that defines all aspects - state as well as behavior - of a group of structurally identical objects. The blueprint is called the class, and the objects instances of that class. Popular members of the C-family languages, especially Java, C++, and C#, implement OOP with this class-based approach.

Prototype-based OOP
In the prototype-based approach, every object stores its state and behavior. In addition, it has a prototype (or  if it is on top of the hierarchy). Such a prototype is a pointer to another, more general object. All properties of the referenced object are also available in the referencing object. Classes explicitly don't exist in the prototype-based approach.

OOP in JavaScript "Two jackets for one body"
One of JavaScript's cornerstones is the provision of objects in accordance with the rules of the prototype-based OOP. Objects consist of properties that are key/value pairs holding data as well as methods. One of those properties is always the prototype property '__proto__'. It points to the 'parent' object and, by this, realizes the relationship.

┌─────────────────────┐         ┌─────────────────────┐ │        child        │    ┌──>  │       parent        │ ├─────────────────────┤   |     ├─────────────────────┤ │  name: Joel         │    |     │  .... : ... │ ├─────────────────────┤   |     ├─────────────────────┤ │  __proto__: parent  │  ──┘     │  __proto__: ...     │  ──> ... ──> null └─────────────────────┘         └─────────────────────┘

If a requested property is missed on any object, the JavaScript engine searches it in the 'parent' object, 'grandparent' object, and so on. This is called the prototype chain.

All of that applies to user-defined objects and system-defined objects like  or   in the same way.

Since EcmaScript 2015 (ES6), the syntax offers keywords like  or , which are used in class-based approaches. Even though such keywords have been introduced, the fundaments of JavaScript haven't changed: Those keywords lead to prototypes in the same way as before. They are syntactical sugar and get compiled to the conventional prototype technique.

In summary, the syntax of JavaScript offers two ways to express object-oriented features like inheritance in the source code: the 'classical' and the 'class' style. Despite the different syntax, the implementation techniques differ only slightly.

The classical syntax
Since its first days, JavaScript has defined the parent/child relation of objects with the 'prototype' mechanism. If not explicitly notated in the source code, this happens automatically. The classical syntax exposes it quite well.

To define a parent/child relation of two objects explicitly, you should use the method  to set the prototype of an object to a dedicated other object. After the method has run, all properties - inclusive functions - of the parent object are known to the child.

The 'adult' object contains the 'familyName' and a function 'showFamily'. In the first step, they are not known in the object 'child'. After  was running, they are known because the 'child's prototype no longer points to the default 'Object' but to 'adult'.

The next script demonstrates the prototype chain. It starts with the user-defined variables  and. is an array with three elements. The assignment operation in line 6 sets  to the same array. A loop shows the prototype of  and assigns the next higher level of the prototype chain to it. The loop finishes when the top level of the hierarchy is reached. In this case, the prototype is.

As you know, properties are key/value pairs. Hence it is possible to directly use the value of the 'prototype' property to identify and manipulate prototypes. Interestingly the key's name isn't 'prototype' but '__proto__'. This is shown in line 11. Nevertheless, we recommend ignoring this technique and using API methods for prototype manipulations, such as,  , and   instead.

The 'class' syntax
The script defines two classes, Adult and Child with some internal properties, one of them being a method. The keyword  combines the two classes hierarchically. Afterward, in line 21, an instance is created with the keyword.

The property  and the method   are defined in the Adult class. But they are also known in the Child class.

Please note again that this class-based inheritance in JavaScript is implemented on top of the prototype-based classical approach.