In this article, we will be going to cover the topic what is proto and prototypes, their syntax, examples, and what are differences exist between both, and how they differ and how they differ in different aspects.
Proto and prototype both are objects that help in whether creating an array, object, or function and provide access to those specific methods or objects directly without taking memory and even it will give access to its constructor and all the array methods like push, pop, etc.
Proto: It is an actual object that provides a way to inherit properties from JavaScript with the help of an object which is created with new. Every object with behavior associated has internal property [[prototype]].
Syntax:
Object.__proto__ = value
Example:
Javascript
function Student(name,age) { this.name = name; this.age = age;}var stu1 = new Student("John", 50);// Object have proto property stu1// Also if apply strict equal to check // if both point at the same // location then it will return true.Student.prototype === stu1._proto_ |
Output:
object have proto property
object and function refer to the same prototype
Prototype: It is a special object which means it holds shared attributes and behaviors of instances. It is a way to inherit properties from javascript as it is available in every function declaration.
Syntax:
objectTypeName.prototype.SharedPropertyName=value;
Example:
Javascript
// Constructor functionfunction Student(name, age) { this.name = name; this.age = age;}// Objectsvar stu1 = new Student("gfg1", 25);var stu2 = new Student("gfg2", 42);// PrototypeStudent.prototype.getName = function() { return this.name; }// Function have property prototype// Student// Function call using objectstu1.getName();// Constructor functionfunction Student(name, age) { this.name = name; this.age = age;}// Objectsvar stu1 = new Student("gfg1", 25);var stu2 = new Student("gfg2", 42);// PrototypeStudent.prototype.getName = function() { return this.name; }// Function have property prototype// Student// function call using objectstu1.getName();// Access prototypeStudent.prototype |
Output:
function have property prototype
function call using object
access prototype property
Difference between proto and prototype:
|
Prototype |
proto |
| Prototypes is a simple way to share behavior and data between multiple objects access using .prototype | proto is also a way to share behavior and data between multiple objects access using __proto__ |
| All the object constructors (function) have prototype properties. | All the objects have proto property. |
|
The prototype gives access to the prototype of function using function. Syntax: (function.prototype) |
proto gives access to the prototype of the function using the object. Syntax: (object.__proto__) |
| It is mostly used to resolve issues of memory wastage when creating an object in constructor mode then each object has separate behavior. | It is used in the lookup chain to resolve methods, constructors, etc. |
| It is the property of the class. | It is the property of the instance of that class. |
| The prototype property is set to function when it is declared. All the functions have a prototype property. | proto property that is set to an object when it is created using a new keyword. All objects behavior newly created have proto properties. |
| It is introduced in EcmaScript 6. | It is introduced in ECMAScript 5. |
| It is also called it as .prototype | It is also called dunder proto. |
| It is mostly used in javaScript. | It is rarely used in JavaScript. |
