JavaScript Object Prototypes
Table of Content:
In JavaScript, object prototypes play a crucial role in the language's prototype-based inheritance system. A prototype is an object from which other objects inherit properties and methods. Every object in JavaScript has a prototype, and these prototypes are linked together to form a prototype chain.
1. Prototypes in JavaScript:
-
Definition: A prototype in JavaScript is an object that is associated with another object and serves as a fallback for properties and methods that are not directly found on that object.
-
Object Creation: When an object is created, it is linked to a prototype. If a property or method is not found on the object itself, JavaScript looks up the prototype chain to find it.
2. Object Prototypes:
-
Prototype Property: Every object in JavaScript has a special property called
__proto__
(or[[Prototype]]
), which points to its prototype.var myObject = {}; console.log(myObject.__proto__); // Output: [Object: null prototype] {} Object.create(): The
Object.create()
method is used to create a new object with the specified prototype. It provides a cleaner way to set up prototypal inheritance.var personPrototype = { greet: function() { console.log('Hello!'); } }; var person = Object.create(personPrototype); person.greet(); // Output: 'Hello!' -
Definition: The prototype chain is a series of linked objects where each object serves as the prototype for the next one. It is traversed when properties or methods are accessed on an object.
-
Inheritance: If an object doesn't have a particular property or method, JavaScript looks up the prototype chain until it finds the first object in the chain that contains the desired property or method.
-
Ultimate Prototype: The
Object.prototype
is the ultimate prototype in the JavaScript environment. It provides basic methods and properties that are inherited by all objects. -
Base for Most Objects:
Object.prototype
serves as the prototype for many objects, including those created using theObject
constructor or object literals. Date
objects inherit fromDate.prototype
Array
objects inherit fromArray.prototype
Person
objects inherit fromPerson.prototype
3. Prototype Chain:
4. Object.prototype
:
Conclusion:
Understanding JavaScript object prototypes is essential for grasping how inheritance works in the language. Prototypes allow for the sharing of properties and methods across objects, promoting code reuse and a more efficient use of memory. The prototype chain enables a dynamic and flexible system of object-oriented programming in JavaScript.
Prototype Inheritance
All JavaScript objects inherit properties and methods from a prototype:
The Object.prototype
is on the top of the prototype inheritance chain:
Date
objects, Array
objects, and Person
objects inherit from Object.prototype
.
Adding Properties and Methods to Objects
Sometimes you want to add new properties (or methods) to all existing objects of a given type.
Sometimes you want to add new properties (or methods) to an object constructor.
codespan">prototype property allows you to add new properties to object constructors:Using the prototype Property
The JavaScript prototype
property allows you to add new properties to object constructors:
function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.nationality = "English";
The JavaScript prototype
property also allows you to add new methods to objects constructors:
function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.name = function() { return this.firstName + " " + this.lastName; };