JavaScript(JS) Prototype

JavaScript Prototype

In JavaScript, every object has a prototype property, which refers to another object that is used as a fallback source of properties and methods. When you access a property or method on an object and that property or method doesn't exist on the object itself, JavaScript will look for it in the object's prototype object.

You can think of the prototype object as a blueprint for creating new objects of a particular type. When you create an object using a constructor function or the class syntax, the prototype object of that constructor or class is automatically assigned to the prototype property of the newly created object.

Here's an example of using the prototype property to add a new method to an object:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return `${this.firstName} ${this.lastName}`;
};

const john = new Person("John", "Doe");
console.log(john.getFullName()); // Output: "John Doe"

In this example, we have a Person constructor function that creates new Person objects with firstName and lastName properties. We then add a new method called getFullName to the Person.prototype object, which concatenates the firstName and lastName properties to return the person's full name.

When we create a new Person object using the new Person("John", "Doe") syntax, the object's prototype property is automatically set to the Person.prototype object. This means that we can access the getFullName method on the john object, even though it was not defined directly on the john object itself.

Using the prototype property to add methods to objects can be a powerful way to share behavior between objects of the same type. By defining methods on the prototype object rather than on individual object instances, you can save memory and make your code more efficient.

Prototype Inheritance

Prototype inheritance is a way of creating new objects that inherit properties and methods from existing objects, using the prototype property. When you create a new object, you can specify the prototype of that object to be an existing object, which will cause the new object to inherit all of the properties and methods of the existing object.

Here's an example of using prototype inheritance in JavaScript:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return `${this.firstName} ${this.lastName}`;
};

function Student(firstName, lastName, grade) {
  Person.call(this, firstName, lastName);
  this.grade = grade;
}

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

const john = new Student("John", "Doe", "A");
console.log(john.getFullName()); // Output: "John Doe"

In this example, we have a Person constructor function that creates new Person objects with firstName and lastName properties, as well as a getFullName method. We then create a Student constructor function that creates new Student objects with a grade property, and uses Person.call(this, firstName, lastName) to call the Person constructor to set the firstName and lastName properties.

We then set the Student.prototype object to be a new object that inherits from the Person.prototype object, using the Object.create method. This means that all Student objects created using the new Student syntax will automatically inherit the getFullName method from the Person.prototype object.

Finally, we create a new john object using the new Student("John", "Doe", "A") syntax, and call the getFullName method on it using the john.getFullName() syntax. Since john is a Student object, but Student.prototype inherits from Person.prototype, the getFullName method is available on the john object, and returns the full name "John Doe".

Prototype inheritance can be a powerful way to create new objects that share behavior with existing objects, while also allowing for customization and specialization. However, it can also be complex and can lead to unexpected behavior if not used carefully, so be sure to read up on the topic thoroughly before using it in your own code.

JavaScript Prototype Chaining

Prototype chaining is the mechanism by which JavaScript allows objects to inherit properties and methods from other objects in their prototype chain. Every object in JavaScript has a prototype, which is a reference to another object that the current object inherits properties and methods from.

When an object tries to access a property or method that doesn't exist on itself, JavaScript looks for that property or method in the object's prototype. If it doesn't find it there, it looks in the prototype of the prototype, and so on, until it either finds the property or method, or reaches the end of the prototype chain.

Here's an example to illustrate prototype chaining:

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

Animal.prototype.makeSound = function() {
  console.log('The animal makes a sound');
};

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

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.makeSound = function() {
  console.log('The dog barks');
};

let myDog = new Dog('Fido', 'Labrador');

console.log(myDog.name); // Output: "Fido"
myDog.makeSound(); // Output: "The dog barks"

In this example, we have an Animal constructor function that creates new animal objects with a name property and a makeSound method. We also have a Dog constructor function that creates new dog objects with a breed property, and uses Animal.call(this, name) to call the Animal constructor to set the name property.

We then set the Dog.prototype object to be a new object that inherits from the Animal.prototype object, using the Object.create method. This means that all Dog objects created using the new Dog syntax will automatically inherit the makeSound method from the Animal.prototype object.

Finally, we create a new myDog object using the new Dog("Fido", "Labrador") syntax, and call the makeSound method on it using the myDog.makeSound() syntax. Since myDog is a Dog object, but Dog.prototype inherits from Animal.prototype, the makeSound method is available on the myDog object, and returns the string "The dog barks".

In summary, prototype chaining is a powerful mechanism that allows objects in JavaScript to inherit properties and methods from other objects in their prototype chain. This enables code reuse and can lead to more efficient and modular code. However, it can also be complex and can lead to unexpected behavior if not used carefully, so be sure to read up on the topic thoroughly before using it in your own code.