javascript prototypes

Prototypes are implemented using the prototype property, which is present on all JavaScript functions. When you create an object using a constructor function or the class syntax, the prototype property of the constructor or class becomes the prototype of the newly created object. Properties and methods defined on the prototype are shared among all objects created from the same constructor or class.

Prototypes enable you to define shared behaviors and properties for objects, promoting code reuse and efficient memory usage.
Here's an example to illustrate Javascript prototypes :

In this example, we define a Animal constructor function " function Animal(name) " and add a sayName method to its prototype. We then create an object using the constructor and invoke the sayName method on that object.

Edit Copy Hide

     // Constructor function
    function Animal(name) {
      this.name = name;
    }

    // Prototype method
    Animal.prototype.sayName = function() {
      console.log('My name is ' + this.name);
    };

    // Create an object
   var animal = new Animal('Leo');

    // Test the prototype method
    animal.sayName(); // Output: My name is Leo

1. We define a constructor function called Animal. The constructor takes a name parameter and assigns it to the name property of the newly created object using this.name = name; . This allows each Animal object to have its own unique name property.
2. We extend the Animal prototype by adding a sayName method to it. By adding properties or methods to the prototype, they become shared among all instances of Animal. In this case, the sayName method logs a message to the console, including the name property of the current Animal object.
3. We create a new animal object using the Animal constructor and passing 'Leo' as the name argument. The new keyword creates a new instance of Animal, with the name property set to 'Leo'.
4. Finally, we test the sayName method on the animal object by invoking animal.sayName(). This calls the sayName method defined on the Animal.prototype, which logs the message 'My name is Leo' to the console.

In this example, we have a Dog constructor function that inherits from the Animal constructor using Object.create. We also add a new method, bark, to the Dog prototype.

Edit Copy Hide

    // Constructor functions
    function Animal(name) {
      this.name = name;
    }

    function Dog(name, breed) {
      Animal.call(this, name);
      this.breed = breed;
    }

    // Set up the prototype chain
    Dog.prototype = Object.create(Animal.prototype);
    Dog.prototype.constructor = Dog;

    // Prototype method for Animal
    Animal.prototype.sayName = function() {
      console.log('My name is ' + this.name);
    };

    // Prototype method for Dog
    Dog.prototype.bark =  function() {
      console.log('Woof!');
    };

    // Create an object
    var dog = new Dog('labrador', 'dogname');

    // Test prototype methods
    dog.sayName(); // Output: My name is dogname
    dog.bark(); // Output: Woof!

1. We define two constructor functions : Animal and Dog. The Animal constructor sets the name property on the newly created object, while the Dog constructor extends Animal by calling it with the name parameter and sets the breed property.
2. To establish the prototype chain, we set Dog.prototype to a new object created with Object.create(Animal.prototype). This creates a new object that inherits from Animal.prototype, effectively linking the prototype chain between Dog and Animal. We also set the constructor property of Dog.prototype back to Dog to maintain proper constructor references.
3. We add a bark method to the Dog.prototype, which is specific to Dog objects.
4. Next, we create a dog object using the Dog constructor and passing the appropriate arguments.
5. Finally, we test the prototype methods. dog.sayName() successfully invokes the sayName method, which is actually defined on the Animal.prototype. The dog.bark() call correctly executes the bark method defined on the Dog.prototype.

Edit Copy Hide

    class Animal {
      constructor(name) {
        this.name = name;
      }

      sayName() {
        console.log('My name is ' + this.name);
      }
    }

    // Inherit from Animal class
    class Dog extends Animal {
      constructor(name, breed) {
        super(name);
        this.breed = breed;
      }

      bark() {
        console.log('Miaw!');
      }
    }

    // Create an object
    const dog = new Dog('cat', 'sweetcat');

    // Test class methods
    dog.sayName(); // Output: My name is cat
    dog.bark(); // Output: Miaw!

In this example, we use the ES6 class syntax to define the Animal and Dog classes. The Dog class extends the Animal class using the extends keyword. We also use the super keyword to call the parent class constructor.

Feel free to experiment with our JAVASCRIPT COMPILER

Run