JavaScript

Prototypes

Co-created the Self programming language with Randall Smith.

function Person() {
}

const p = new Person()

Object.getPrototypeOf(p)
Object.getPrototypeOf(Person)
Object.getPrototypeOf(Object)
Object.getPrototypeOf(Function.prototype)
Object.getPrototypeOf(Object.prototype)
Object.getPrototypeOf(Function)

What's the output?

JavaScript is a prototypal language

Classes are not present
Not traditionally Object Oriented
Everything is public*
Objects inherits from another objects

*There is a new feature in the latest JS version where properties can be private.

What is a Prototype?

Every object is born referencing to a prototype object(parent) by a secret property [[Prototype]] or __proto__.

There are two prototypes in JS

Prototype Object on Functions
Object prototypes (aka prototypes of objects)

Even when you don't specify the prototype, a default prototype is set for every object.

const obj = {};

console.log(obj.toString) 
// [Function: toString]

A prototype is a working object instance.

Prototype-based programming is a style of object-oriented programming in which behaviour reuse (aka inheritance) is performed via a process of reusing existing objects via delegation that serve as prototypes.
This model can also be known as prototypal, prototype-oriented, classless, or instance-based programming.
Delegation is the language feature that supports prototype-based programming.

Prototype-based programming

Prototype Chains

The prototype relationship between two objects is about inheritance.
An object specifies its prototype via the internal property [[Prototype]]
Every object has this property, but it can be null.
The chain of objects connected by the [[Prototype]] property is called the prototype chain.

Reading a property

(Rough) Algorithm —

Let CurrentObject = obj. Let CurrentKeyName = middleName.
If CurrentObject has CurrentKeyName, return associated value.
Else, let CurrentObject = parent of CurrentObject.
Check for CurrentKeyName again in CurrentObject. If found, return value.
If CurrentObject has no parent and does not have CurrentKeyName, return undefined.

Goal: Read middleName from the object obj. (Note that middleName does not exist in obj )

Create, Update, Delete a property

When you do changes to a property of an object, it always affect the current object only.
- If the property doesn’t exist, property is added to the object.
It won’t look up to the prototype chain.

Accessing the Prototype

Object.getPrototypeOf

const prototype1 = {};
const object1 = Object.create(prototype1);

Object.getPrototypeOf(object1) === prototype1;
// expected output: true

Reflect.getPrototypeOf(target)

This method is almost the same method as Object.getPrototypeOf

__proto__

Object#isPrototypeOf()

parent.isPrototypeOf(obj)

obj.__proto__

Modifying existing prototypes

Object.setPrototypeOf()

Object.setPrototypeOf(obj, prototype)

The Object.setPrototypeOf() method sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null.

__proto__

const shape = {};
const circle = {}

// Set the object prototype.
// DEPRECATED. This is for example purposes only. 
// DO NOT DO THIS in real code.
shape.__proto__ = circle;

Creating an object with a new prototype

var proto = {
    describe: function () {
        return 'name: '+this.name;
    }
};

var obj = Object.create(proto);
obj.name = 'obj';

obj.describe();

Whenever you access a property via obj, JavaScript starts the search for it in that object and continues with its prototype, the prototype’s prototype, and so on.

a property in an object overrides a property with the same key in a “later” object: the former property is found first.

Object.create

Constructor Functions

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37


function C2() {
  this.a = 37;
  return {a: 38};
}

o = new C2();
console.log(o.a); // 38

When a function is executed with the new keyword, it does the following steps:

A new empty object is created and assigned to this.
The prototype of the this object is changed <FnName>.prototype
The function body executes. Usually it modifies this, adds new properties to it.
The value of this is returned.
- You can override the return value by returning another object

function Person(name, age) {
  this.age = age;
  this.name = name;
}

function Person(name, age) {
  // this = {}
  this.age = age;
  this.name = name;
}

function Person(name, age) {
  // this = {}
  // Object.setPrototypeOf(this, Person.prototype)
  this.age = age;
  this.name = name;
}

function Person(name, age) {
  // this = {}
  // Object.setPrototypeOf(this, Person.prototype)
  this.age = age;
  this.name = name;
  /*
  let userHasWrittenReturn = false;

  if (userHasWrittenReturn) {
    let returnValue be user's return value;
    if (returnValue is object) {
      return returnValue;
    }
    return this;
  }
  return this;
  */
}

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = new Person('A', 25);
const p2 = new Person('B', 32);

A constructor function should be called with new

new.target (pseudo property)

use strict

instanceof

In constructors and functions invoked using the new operator, new.target returns a reference to the constructor or function.
In normal function calls, new.target is undefined.

  if (!(this instanceof Person)) {
    throw new Error('should be called with new');
  }

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.

Use ES6 classes

Psuedoclassical Inheritance

The Pseudoclassical pattern tries to replicate inheritance in a way that is familiar to those who come from a Java or C like background.
By using Pseudoclassical inheritance, we attempt to recreate classic programming language’s behavior by using class wide inheritance and where objects are instances of those classes.

A pattern that uses a constructor function and the new operator, combined with a prototype added to the constructor is said to be Pseudoclassical.

Invoke a constructor function.
Point a child’s prototype to the parent’s prototype for inheritance to occur.

ES6 Classes

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

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

ES6 classes are "special functions".
They can be thought of as syntactic sugar to constructor functions.*

Distinguishing .prototype and [[Prototype]]

[[Prototype]] is an internal property present on all objects.
- It is a special property.
- It's value may either be another object's reference or null.
.prototype is an object
- It is present only on functions (defined using the `function` keyword)
- It contains (generally) values and methods shared by all objects of that "class"
- It is not special in the sense of [[Prototype]]

Prototypal Inheritance

function makePerson(name, age) {
  return {
    name,
    age
  }
}

const p1 = makePerson('A', 25);
const p2 = makePerson('B', 32);

Prototypal Inheritance

function makePerson(name, age) {
  return {
    name,
    age,
    nameInUpper() {
      return this.name.toUpperCase();
    },
  };
}

const p1 = makePerson('a', 25);
const p2 = makePerson('b', 32);

p1.nameInUpper();

Prototypal Inheritance

function nameInUpper() {
  return this.name.toUpperCase();
}

function makePerson(name, age) {
  return {
    name,
    age,
  };
}

const p1 = makePerson('a', 25);
const p2 = makePerson('b', 32);

console.log(nameInUpper.call(p1));

Prototypal Inheritance

const PersonSharedMethods = {
  nameInUpper() {
    return this.name.toUpperCase();
  },
};

function makePerson(name, age) {
  return {
    name,
    age,
    nameInUpper: PersonSharedMethods.nameInUpper,
  };
}

const p1 = makePerson('a', 25);
const p2 = makePerson('b', 32);

p1.nameInUpper();

Prototypal Inheritance

function makePerson(name, age) {
  const newPerson = Object.create(makePerson.sharedMethods);
  newPerson.name = name;
  newPerson.age = age;
  return newPerson;
}

makePerson.sharedMethods = {
  nameInUpper() {
    return this.name.toUpperCase();
  },
};

const p1 = makePerson('a', 25);
const p2 = makePerson('b', 32);

console.log(p1.nameInUpper());

Prototypal Inheritance

function makePerson(name, age) {
  const newPerson = Object.create(makePerson.prototype);
  newPerson.name = name;
  newPerson.age = age;
  return newPerson;
}

makePerson.prototype = {
  nameInUpper() {
    return this.name.toUpperCase();
  },
};

const p1 = makePerson('a', 25);
const p2 = makePerson('b', 32);

console.log(p1.nameInUpper());

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = new Person('A', 25);
const p2 = new Person('B', 32);

Two important rules

An object (by default) always inherits from it's creator function (or class ) `.prototype` object.

For {}, the creator is Object function. Hence, it inherits from Object.prototype
For [], the creator is the Array function. Hence, it inherits from Array.prototype
For a Person instance p, the creator function is Person function. Hence, it inherits from Person.prototype.

Object.prototype's prototype is null.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.ageInBinary = function() {
  return this.age.toString(2);
}

const p1 = new Person('A', 25);
const p2 = new Person('B', 32);

function Person() {
}

const p = new Person()

Object.getPrototypeOf(p)
Object.getPrototypeOf(Person)
Object.getPrototypeOf(Object)
Object.getPrototypeOf(Function.prototype)
Object.getPrototypeOf(Object.prototype)
Object.getPrototypeOf(Function)

Person.prototype

Function.prototype

Function.prototype

Object.prototype

null

Function.prototype

Inheritance and Subclassing

In prototype-based languages, inheritance is the mechanism of basing an object or class upon another object.

Classes in ES5

function Person(name) {
  this.name = name;
}

Person.prototype.printName = function () {
  console.log(this.name);
};

function Employee(name, id) {
  Person.call(this, name); //! acting as super() call
  this.id = id;
}

Object.setPrototypeOf(Employee.prototype, Person.prototype);

Employee.prototype.printId = function () {
  console.log(this.id);
};

const e = new Employee('arfat', 42);
e.printId();

e.printName();

Classes in ES6

ES6 classes are not something that is radically new: They mainly provide more convenient syntax to create old-school constructor functions.

class Person {
    constructor(name) {
        this.name = name;
    }
    toString() {
        return `Person named ${this.name}`;
    }
    static logNames(persons) {
        for (const person of persons) {
            console.log(person.name);
        }
    }
}

class Employee extends Person {
    constructor(name, title) {
        super(name);
        this.title = title;
    }
    toString() {
        return `${super.toString()} (${this.title})`;
    }
}


const jane = new Employee('Jane', 'CTO');
console.log(jane.toString());

No separator (, or ;)

Subclassing

The extends clause lets you create a subclass of an existing constructor (which may or may not have been defined via a class)

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y); // (A)
        this.color = color;
    }
    toString() {
        return super.toString() + ' in ' + this.color; // (B)
    }
}

There are two ways of using super:
- A class constructor uses it like a function call (super(···)), in order to make a super constructor call (line A).
- Method definitions (in object literals or classes, with or without static) use it like property references (super.prop) or method calls (super.method(···)), in order to refer to super properties (line B).

The prototype of a subclass is the superclass

> Object.getPrototypeOf(ColorPoint) === Point
true

In a derived class, you must call super() before you can use this:

class Foo {}

class Bar extends Foo {
    constructor(num) {
        const tmp = num * 2; // OK
        this.num = num; // ReferenceError
        super();
        this.num = num; // OK
    }
}

Overriding the result of a constructor

class Foo {
    constructor() {
        return Object.create(null);
    }
}
console.log(new Foo() instanceof Foo); // false

JavaScript

What's the output?

JavaScript is a prototypal language

Prototype-based programming

Prototype Chains

Reading a property

Accessing the Prototype

Modifying existing prototypes

Creating an object with a new prototype

ES6 Classes

Inheritance and Subclassing

Classes in ES5

Classes in ES6

Subclassing

Prototypal Inheritance

More from Arfat Salman