Understanding Javascript Prototypes: What They Are and How to Use Them

Prototypes are a fundamental part of Javascript, and they play a significant role in how Javascript handles object inheritance. In this tutorial, we will discuss what prototypes are, how they work, and how to use them in your code.

What are Javascript Prototypes?

In Javascript, every object has a prototype. A prototype is simply a blueprint for the object, defining the properties and methods that the object should have. When you create a new object, Javascript automatically sets its prototype to the prototype of the object’s constructor function.

How Javascript Prototypes Work

When you try to access a property or method on an object, Javascript first checks if the object itself has that property or method. If it doesn’t, Javascript looks at the object’s prototype and checks if the prototype has the property or method. If the prototype doesn’t have it either, Javascript looks at the prototype’s prototype, and so on, until it finds the property or method, or it reaches the end of the prototype chain.

This is known as prototype chaining, and it is how Javascript handles object inheritance.

Creating Objects with Prototypes

You can create objects with prototypes in several ways. One way is to use the object literal notation and specify the object’s prototype using the Object.create() method.

const car = {
  color: 'blue',
  drive() {
    console.log('Driving...');
  }
};

const myCar = Object.create(car);
myCar.color = 'red';

console.log(myCar.color); // Output: red
myCar.drive(); // Output: Driving...

In the code above, we first create an object car with a color property and a drive() method. Then we create a new object myCar using Object.create(car). This sets the prototype of myCar to car. We then change the color property of myCar to 'red'. When we log myCar.color, we get 'red'. We also call myCar.drive() which executes the drive() method defined in the car prototype.

Another way to create objects with prototypes is to use constructor functions and the new keyword.

function Car(color) {
  this.color = color;
}

Car.prototype.drive = function() {
  console.log('Driving...');
};

const myCar = new Car('red');

console.log(myCar.color); // Output: red
myCar.drive(); // Output: Driving...

In the code above, we define a constructor function Car that takes a color parameter and assigns it to the color property of the object created by the constructor. We then add a drive() method to the Car.prototype. We create a new myCar object using the new keyword and passing 'red' as the color parameter. We can then access the color property of myCar and call the drive() method.

Adding Methods to Prototype

We can add methods to a prototype in the same way as we add properties. Let’s add a getName method to the Person prototype:

Person.prototype.getName = function() {
  return this.name;
};

Now we can call this method on any Person object:

const person1 = new Person("John", 30);
console.log(person1.getName()); // Output: John

Inheritance with Prototypes

Prototypes also allow us to create inheritance relationships between objects. In this example, we will create a Student object that inherits from the Person object:

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

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

In the code above, we first call the Person constructor function with the this keyword set to the Student object. This allows us to set the name and age properties of the Person object within the Student object.

We then create a new Student.prototype object that inherits from the Person.prototype object. Finally, we set the constructor property of the Student.prototype object to point to the Student constructor function.

Now we can create a Student object and call the getName method inherited from the Person prototype:

const student1 = new Student("Sarah", 25, "Computer Science");
console.log(student1.getName()); // Output: Sarah
console.log(student1.major); // Output: Computer Science

Conclusion

In JavaScript, prototypes are used for implementing inheritance, creating objects with shared properties, and improving performance by reducing memory usage. Understanding prototypes is crucial for any JavaScript developer.

In this tutorial, we learned what prototypes are, how they are used in JavaScript, and how to create and modify prototypes. We also explored inheritance with prototypes, which allows us to create new objects that inherit properties and methods from existing objects.

I hope this tutorial was helpful in understanding JavaScript prototypes. If you have any questions or feedback, feel free to leave a comment below.