What is Prototype ?

Prototype in JavaScript is an object from which other objects can inherit the properties and methods.

for example

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};

Object.getPrototypeOf(myObject); // Greetings from Madrid

Output

As said prototype is an object from which other object inherits the properties. So, when we created the object myObject using template literal, we want to know what is the prototype of this myObject , meaning what kind of properties it has inherited from its so called prototype.

Now, as one can see, that all these are some properties that are inherited by the myObject that we have created. Question might be something like this:

We only created an object by the name of myobject then why or from where these properties are coming ?

The answer is prototype

A Little Story

Once upon a time, JavaScript created a most basic form of object having these properties

it then declared that any object created from now forth will inherit these properties. So, the time passed and people like us created an object myObject having the property as city and method as greet . After creating myObject , the object asked us “I do have city and greet as my own properties and methods but what about these properties (as mentioned above) , where did I inherited these from?”

The answer was given by MDN Docs: myObject you have inherited these features (properties and methods) from the prototype. The first and the most basic prototype. Even if there are as any as objects they all will still have these type of properties already inherited. So, for this reason the myObject is having these types of properties.

Explanation

So, prototype is an object from where other objects inherits the properties and methods. The above image, shows the most basic prototype and this most basic prototype doesn’t have any prototype. Thus, on accessing its own prototype it will give you null.

Can we Create our own prototype

Yes, we can really create our own prototype and set it to any object. Follow below to know how exactly it is done.

• By using constructor

  In JavaScript, all functions have a property named prototype. When you call a function as a constructor, this property is set as the prototype of the newly constructed object (by convention, in the property named __proto__).

  So if we set the prototype of a constructor, we can ensure that all objects created with that constructor are given that prototype:

const myPrototype = {
    workoutRoutine: true,
    workoutAction: function (){
        console.log("GYM")
    }
}

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

Object.assign(Person.prototype, myPrototype);
/** ============ Now Every object made with the Person will automatically have workoutRoutine property
and workoutAction method =============== **/
const alex = new Person("Alex");
console.log(alex.workoutRoutine)
alex.workoutAction()

NOTE:-

Object.assign(target, source) , as you can see accepts two parameters : target to where you want to assign the prototype and source is the prototype that you want to assign.

Here we create:

• an object myPrototype, which has a workoutRoutine property and workoutAction() method

• a Person() constructor function which initializes the name of the person to create.

We then put the methods defined in myPrototype onto the Person function's prototype property using Object.assign.

After this code, objects created using Person() will get Person.prototype as their prototype, which automatically contains the workoutRoutine property and workoutAction().

• By Using Object.create()

  The Object.create() method creates a new object and allows you to specify an object that will be used as the new object's prototype.

    const myPrototype = {
        workoutRoutine: true,
        workoutAction: function (){
            console.log("GYM")
        }
    }
    const iamAlex = Object.create(myPrototype);
    console.log(iamAlex.workoutRoutine);
    console.log(iamAlex.workoutAction());
  

  once the object iamAlex is being created with myPrototype as its prototype, we can call the methods like workoutAction() and can access workoutRoutine property