JavaScript Function Prototype

Prototype is a fundamental concept that every JavaScript developer must understand, and this article aims to explain JavaScript’s prototype in plain, detailed manner. I think you will get a clear idea of JavaScript’s prototype after reading this blog post.

All objects in JavaScript are descended from Object including Function; all objects inherit methods and properties from Object.prototype, although they may be overridden (except an Object with a null prototype, i.e. Object.create(null)). For example, other constructors’ prototypes override the constructor property and provide their own toString() methods. Changes to the Object prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.

1. Prototype Property :-

First, every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance. This prototype property is not enumerable; that is, it isn’t accessible in a for/in loop. But Firefox and most versions of Safari and Chrome have a proto “pseudo” property (an alternative syntax) that allows you to access an object’s prototype property. You will likely never use this proto pseudo property, but you should know that it exists and it is simply a way to access an object’s prototype property in some browsers.
The prototype property is used primarily for inheritance; you add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

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

Person.prototype.say = function(){
    console.log("Hi I am " + this.name + ", " + this.agr + " years old.");
}
Person.prototype.setAge = function(age){
    thid.age = agr;
}
Person.prototype.setName = function(name){
    this.name = name;
}

var p1 = new Person("Ranjit", 28);
p1.say(); // Hi I am Ranjit, 28 years old.

Code language: JavaScript (javascript)

prototype creates a shared context and it is shared by all the instances of the class. Any modification to prototype will have a direct impact on all instances. Here we have added three methods say(), setAge(), setName() to the Person.prototype. So all the instances of Person will able to access these methods.

2. Prototype Attribute :-

The prototype attribute is a characterstic of object, This characterstic tells us the object’s “Parent”. An object’s prototype attribute points to the object’s “parent”. The prototype attribute is normally referred to as the prototype object, and it is set automatically when you create a new object. In the example code above, p1‘s prototype is Person.prototype.

Note: All objects have attributes just like object properties have attributes. And the object attributes are prototype, class, and extensible attributes.

3. Augmenting Built-in Objects using prototype:-

The built-in objects such as the constructor functions Array, String, and even Object, and Function can be augmented through their prototypes, which means that you can, i.e. you can add new methods to the Array prototype and in this way make them available to all arrays. Let’s do this.

let’s add a method to inArray() to the Array which tells us whether a value/object is present in a array or not.

Array.prototype.inArray = function(value){
    return this.indexOf(value) === -1 ? false : true;
}
var array = ["orange", "apple", "banana"];
array.inArray("apple"); // will return ture
array.inArray("grape"); // will return false

Code language: JavaScript (javascript)