Prototype in JavaScript

Prototype is an important concept of JavaScript. Prototype is a property that points the object. It is used for inheriting property from one object to another.

Before class-based structure, this prototype is used for assigning properties to a specific object and passing properties from parent to children object. Because prototype is based on functions.

As I said earlier, prototype points the object. Every object has a constructor. When we declare an object, some built-in properties are inherited to the declared object from prototype, such as toString, valueOf, name, constructor etc. These built-in properties are inherited from Object.prototype.

function A(){
}
console.log(A.prototype)

In the example above, a function is declared. Now when I called the prototype property of the function, it returns an empty object. The function A has no custom property assigned to it. So, it returns an empty object.

Using Prototypes to Assign Properties

Normally, we can set properties like this,

function Person(name){
this.name=name
this.intro=function(){
return `this is ${this.name}`
}
}

In this code, we created a function named Person, which takes an argument named name. Then we assigned two properties. One is name, a variable and a method named intro.

We need to create object to use this function because it has properties. That’s why we used this keyword before the properties. Because it makes the properties belong to the object. Also, a function of an object is a method.

We can use prototypes to define properties,

Person.prototype.sayName = function(){
return `the name is ${this.name}`
}

Here, we used the prototype property of Person to assign a method sayName().

Now we can create instances of Person like this,

const p1= new Person(“Raphael”)

And we can use the properties like this,

console.log(p1.intro()) // this is Raphael
console.log(p1.sayName()) // the name is Raphael

Prototypical Inheritance and Prototype Chain

Before class feature, this prototype property is used for inheritance. Using prototype we can create prototypical inheritance. And this happened in these two lines of code.

console.log(p1.hasOwnProperty(‘name’)) //true
console.log(p1.hasOwnProperty(‘sayName’)) //false

When we assign properties inside Person property normally (without using prototype), every object of the Person will have those properties. In this case, the object p1 will have the properties name and intro. The hasOwnProperty() method checks whether a property is available in a specific object. In this case, it will look for the name property in p1 object. It is there, then it will return true.

The sayName() property only belongs to the Person object. Every object refers to its constructor to define its properties. The prototype property assigns a property to an object’s constructor. Which means only that object will hold the property, not its instances.

So, that’s why p1.hasOwnProperty(“sayname”) returns false.

But there is a twist.

When we write p1.sayName(), it returns an output.

Here, p1 uses the Person’s very own sayName() property to show the output. Here p1 is considered as a child of Person, according to JavaScript as we created the instance p1 using Person object. Thus p1 inherits the property of Person.

There is something called prototype chain. This is used for looking at properties to an object. If not found, it will look at the its parents.

This is thing that has for p1. It did not any property of sayName() for p1. Then it looked its parent which is Person, and then executed the sayName() for p1.

This is how inheritance worked, before the arrival of classes in JavaScript.

And it still works.

Conclusion

Prototype is used to assign properties to the object constructor. This constructor is used to create instances, which are basically children, based on JavaScript syntax. Prototype chain is used to assign properties from parent to child. And this is the main ideas of prototype.