Table of Contents

    JavaScript Object Prototypes

    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!'
      
      
    • 3. Prototype Chain:

      • 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.

      4. Object.prototype:

      • 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 the Object constructor or object literals.

      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:

      • Date objects inherit from Date.prototype
      • Array objects inherit from Array.prototype
      • Person objects inherit from Person.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;
      };