Javascript Object Prototypes

JavaScript object prototypes are a way to share properties and methods among objects.

Prototypes allow objects to inherit properties and methods from a common prototype object, which helps to reduce memory usage and improve performance by avoiding duplicate definitions of properties and methods in each object instance.

Here's an example of how prototypes work in JavaScript:

// Define a constructor function
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

// Add a method to the prototype of the Person constructor
Person.prototype.sayHello = function () {
  console.log(
    "Hello, my name is " + this.name + " and I'm " + this.age + " years old."
  );
};

// Create objects using the Person constructor
var person1 = new Person("John", 25, "male");
var person2 = new Person("Jane", 30, "female");

// Access the method on the objects
person1.sayHello(); // Output: "Hello, my name is John and I'm 25 years old."
person2.sayHello(); // Output: "Hello, my name is Jane and I'm 30 years old."

In the above example:

A method sayHello is added to the prototype of the Person constructor using Person.prototype.sayHello = function() {...}.
This method is now shared among all objects created by the Person constructor, and you can access it on any object created by the Person constructor.
This helps to avoid duplicating the method in each object instance and saves memory.

Prototypes in JavaScript are dynamic, meaning you can add, modify, or delete properties and methods on the prototype object at any time, and those changes will be reflected in all objects that inherit from that prototype.

Adding Properties and Methods to Objects

You can add properties and methods to objects using the prototype property. The prototype property is an object that is associated with a constructor function, and any properties or methods added to the prototype object will be shared by all objects created by that constructor.

Here's an example of how you can add properties and methods to objects using the prototype property:

// Define a constructor function
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

// Add a property to the prototype of the Person constructor
Person.prototype.country = "USA";

// Add a method to the prototype of the Person constructor
Person.prototype.sayHello = function () {
  console.log(
    "Hello, my name is " + this.name + " and I'm " + this.age + " years old."
  );
};

// Create objects using the Person constructor
var person1 = new Person("John", 25, "male");
var person2 = new Person("Jane", 30, "female");

// Access the properties and methods on the objects
console.log(person1.name); // Output: "John"
console.log(person2.gender); // Output: "female"
person1.sayHello(); // Output: "Hello, my name is John and I'm 25 years old."
person2.sayHello(); // Output: "Hello, my name is Jane and I'm 30 years old."
console.log(person1.country); // Output: "USA"
console.log(person2.country); // Output: "USA"

In the above example:

A property country is added to the prototype of the Person constructor using Person.prototype.country = "USA".
This property is now shared among all objects created by the Person constructor, and you can access it on any object created by the Person constructor.

Similarly, a method sayHello is added to the prototype of the Person constructor using Person.prototype.sayHello = function() {...}. This method is also shared among all objects created by the Person constructor, and you can access it on any object created by the Person constructor.

Adding Properties and Methods to Objects​

Adding Properties and Methods to Objects