what are prototypes in JavaScript

In JavaScript, prototypes are a core concept that underpin inheritance and the way objects share properties and methods. Understanding prototypes is crucial for working with object-oriented code in JavaScript.

What is a Prototype?

Every JavaScript object has a property called prototype. This is a reference to another object that contains attributes and methods, which the original object can use as if they were its own. This relationship forms a "prototype chain," allowing objects to inherit features from their prototypes.

Prototype Chain

When you try to access a property or method of an object, JavaScript first looks at the object's own properties. If it doesn’t find the property there, it looks at the properties of the object’s prototype, then the prototype’s prototype, and so on, up the chain until it finds the property or reaches the end of the prototype chain (usually the object prototype of the built-in `Object` constructor, which is the prototype ancestor of all objects).

How Prototypes Work

Here’s an example to illustrate how prototypes work:

function Person(firstName, lastName) {

  this.firstName = firstName;

  this.lastName = lastName;

}

Person.prototype.fullName = function() {

  return `${this.firstName} ${this.lastName}`;

};

const person1 = new Person('John', 'Doe');

console.log(person1.fullName());  // Outputs: John Doe

In this example:

• `Person` is a function, and functions in JavaScript automatically have a `prototype` property. This property is an object where you can attach methods and properties you want to be inherited.

• `person1` is created as an instance of `Person` and inherits from `Person.prototype. This means person1` can access the `fullName` method even though it's defined on the prototype, not directly on the instance.

Why Use Prototypes?

Prototypes are used primarily for two reasons:

1. **Memory Efficiency**: If you have many instances of an object and they share methods via prototypes, then these methods are stored only once in memory (on the prototype), rather than each instance having its own copy of the methods. This can make a significant difference in the amount of memory used, especially with large applications.

2. **Dynamic Property/Method Addition**: Properties or methods added to the prototype are dynamically available to all objects inheriting from that prototype. This is useful for adding features to objects on the fly.

Prototypal Inheritance

JavaScript’s inheritance is different from classical inheritance as seen in languages like Java or C#. Instead of classes, JavaScript uses "prototypal inheritance." Objects inherit directly from other objects through their prototypes.

Here's how you might use prototypal inheritance:

function Employee(firstName, lastName, position) {

  Person.call(this, firstName, lastName);  // call super constructor.

  this.position = position;

}

// Inherit from Person

Employee.prototype = Object.create(Person.prototype);

Employee.prototype.constructor = Employee;

Employee.prototype.describe = function() {

  return `${this.fullName()} - ${this.position}`;

};

const employee1 = new Employee('Jane', 'Doe', 'Developer');

console.log(employee1.describe());  // Outputs: Jane Doe - Developer

In this extended example, `Employee` inherits from `Person` by setting `Employee.prototype` to a new object that inherits from `Person.prototype. We also reset the constructor property on Employee.prototype` because it is overwritten by Object.create.

Conclusion

Understanding JavaScript's prototype-based system is essential for mastering JavaScript’s object-oriented programming features. It provides a powerful and flexible mechanism for inheritance and can influence how you structure applications for both functionality and performance efficiency.