JavaScript prototype,,😊

This article is about JavaScript prototypes which confused me for a long time. In this article, I will explain JavaScript prototypes by following the outline below:

1. What is JavaScript prototype
2. How does it work
3. __proto__ and prototype
4. Examples
5. What is the difference between using a prototype and no prototype
6. Performance issues

What is JavaScript Prototype

Unlike many other object-oriented languages, JavaScript uses prototypes to share funcitonality with other objects— what does this mean?

Prototypes are the mechanism by which JavaScript objects inherit features from one another. They share data and methods defined in a root prototype object.

More simple is that all JavaScript objects inherit properties and methods from a prototype object.

How does it work

In my view, everything in JavaScript is an object. Functions are an object. Strings, Boolean, and Number are objects (they are primitives wrapped in objects which provide functionality such asstring.length). Array is an object too. Only undefined is not an object.

Be patient to read all this article, then you will agree with me about this.

To provide inheritance, objects can have a prototype object which acts as a template object that it inherits methods and properties from.

The father of String is String.prototype, the father of Number isNumber.prototype, the father of Array is Array.prototype.

An object’s prototype may also have a prototype object, which it inherits methods and properties from. We called it prototype chain. That is why sometimes you noticed that different objects have properties and methods defined on other objects available to them in your project.

For instance, we work with string“abc@gmail.com” then you can use some functions such as toUpperCase,trim, or split because it is existing onString.prototype.

__proto__ and prototype

__proto__ is the actual object that is used in the lookup chain to resolve methods.

prototype is the object that is used to build __proto__ when you create an object with new.

More specifically, the properties and methods are defined on the prototypeproperty on the object’s constructor functions, not the object instances themselves.

Let see this example:

FuncPrototype.prototype is created internally once you declare the above function. The function increment will add to the FuncPrototype.prototypewhich are shared by FuncPrototypeinstances created using new FuncPrototype() .

Every instance created using new FuncPrototype() has a __proto__property which points to theFuncPrototype.prototype. This is the chain that is used to traverse to find a property of a particular object.

Example:

( new FuncPrototype ).__proto__ === FuncPrototype.prototype; // true
( new FuncPrototype ).prototype === undefined; //true

Note: __proto__ is not a standard way of accessing the prototype chain, the standard but similar approach is to useObject.getPrototypeOf(object_name).

Example

So from the console.log you can seename() and nationality .

What is the difference between using a prototype and no prototype

When you do not apply a prototype,every time you create a new instance of a person (example above), each property and method is assigned to that instance. That means that they will point to a different memory reference.

Using the prototype makes for faster object creation since that function does not have to be re-created each time a new object is created.

Performance problem

In this part, I will compare the performance when we create 1,000 instances by applying prototype and not using a prototype. Then call their function increment() to see how long it take.

😊