Prototype Object in Javascript

• In JavaScript, every object is built based on a prototype object, which serves as a blueprint for creating new objects. A prototype object is an object that is used as a template for creating other objects. When you create an object in JavaScript, it is created with a prototype object, which defines its properties and methods.

• The prototype object is a regular JavaScript object, and it has its own properties and methods. However, when you create a new object based on a prototype object, the new object inherits all the properties and methods of the prototype object. You can think of the prototype object as a parent object, and the new object as a child object that inherits all the properties and methods of its parent.

• In the world of Javascript programming, inheritance can be accomplished through the use of prototype objects. Every object in Javascript is linked to another object, which forms a chain of prototypes. The prototype of an object serves as a blueprint for creating new objects that inherit its properties and methods. Additionally, in Javascript, variables, classes, functions, and literals are all considered objects, which means that they have properties and methods that can be inherited as well. Inheritance allows child classes to inherit all the properties and methods of their parent class, which means that the child can access and utilize them as needed. This feature of Javascript makes it possible to create complex object-oriented programs that are easy to maintain and scale.

• In Javascript, the getPrototypeOf method is a built-in method that returns the prototype of a given object. This method is available on all objects, including custom objects that have been created using constructor functions or object literals.

• The getPrototypeOf method takes a single argument, which is the object whose prototype you want to retrieve. It returns the prototype of the object as another object. If the object does not have a prototype, it returns null.

    var Obj1 = {}; // object literals

    var Obj2 = new Object(); // object consctructor

    Object.getPrototypeOf(Obj1) // 'Obj1' associated with 'Object.prototype'

    Object.getPrototypeOf(Obj2) // 'Obj2' associated with 'Object.prototype'

    Object.getPrototypeOf(Object.prototype) // 'Object.prototype' associated with 'null'

    if (Object.getPrototypeOf(Obj1) === Object.prototype) {

        console.log(true)

    } else {

        console.log(false);

    }

    if (Object.getPrototypeOf(Obj2) === Object.prototype) {

        console.log(true)

    } else {

        console.log(false);

    }

    if (Object.getPrototypeOf(Obj1) === Object.getPrototypeOf(Obj2)) {

        console.log(true)

    } else {

        console.log(false);

    }

    if (Object.getPrototypeOf(Object.prototype) === null) {

        console.log(true)

    } else {

        console.log(false);

    }

true

true

true

true

• Diagrammatic representation:

• Another example to prove this diagram.

   var Obj1 = {}; // object literals

    var Obj2 = new Object(); // object consctructor

    Object.prototype.name = "Gagan"

    Object.getPrototypeOf(Obj1).age = 25

    console.log(Obj1.name) // Gagan

    console.log(Obj2.age) // 25

• The getPrototypeOf method is a useful tool for working with prototype-based inheritance in Javascript. It allows you to retrieve and manipulate prototypes dynamically, which makes it easy to create complex object-oriented programs that are easy to maintain and extend.

• You can create a prototype object by defining a function and then adding properties and methods to its prototype property. For example, you could create a prototype object for a Car object like this:

    function Car(make, model, year) {

        this.make = make;

        this.model = model;

        this.year = year;

    }

    Car.prototype.start = function () {

        console.log("Starting the " + this.year + " " + this.make + " " + this.model);

    }

• In this example, we define a Car constructor function and add a start method to its prototype object. When we create a new Car object using the constructor function, the new object will inherit the start method from its prototype object.

    var myCar = new Car("Honda", "Civic", 2022);

    myCar.start(); // Output: Starting the 2022 Honda Civic

• In this example, myCar is a new object created based on the Car prototype object. When we call the start method on myCar, it will execute the method defined in the prototype object, and print the output to the console.

• When you create an object using the new keyword and a constructor function such as Array, Boolean, or String, JavaScript creates a new object with a prototype object that points to the constructor function's prototype property.

• For example, let's consider the following code snippet:

    var arr = new Array();

• When this code is executed, a new Array object is created and its prototype object is set to Array.prototype. The Array.prototype object contains properties and methods that are inherited by all instances of the Array object.

• If we were to diagram this, it would look like:

    arr --> Array.prototype

• This means that any changes made to the Array.prototype object will affect all instances of the Array object created using the new keyword.

• For instance, let's say we add a new method to the Array.prototype object:

    Array.prototype.firstElement = function () {

        return this[0];

    };

• Now, if we call the firstElement() method on our arr object:

    console.log(arr.firstElement()); // Output: undefined

• We will get undefined, because our arr object is currently empty. However, the firstElement() method is now available to all instances of the Array object created using the new keyword.

• Diagrammatic Representation:

    var arr = new Array()

    Object.getPrototypeOf(arr) // 'arr' associated with 'Array.prototype'

    Object.getPrototypeOf(Array.prototype) // 'Array.prototype' associated with 'Object.prototype'

    Object.getPrototypeOf(Object.prototype) // 'Object.prototype' associated with 'null'

    if (Object.getPrototypeOf(arr) === Array.prototype) {

        console.log(true)

    } else {

        console.log(false);

    }

    if (Object.getPrototypeOf(Array.prototype) === Object.prototype) {

        console.log(true)

    } else {

        console.log(false);

    }

    if (Object.getPrototypeOf(Object.prototype) === null) {

        console.log(true)

    } else {

        console.log(false);

    }

true

true

true

• In summary, when you create an object using the new keyword and a constructor function, the object's prototype object is set to the constructor function's prototype property. This means that any changes made to the constructor function's prototype object will affect all instances of the object created using the new keyword.