Prototype inheritance in Javascript - Mini Project: Build & Apply

Understanding Prototype Inheritance in JavaScript

📖 Scenario: Imagine you are creating a simple system to manage different types of vehicles. Each vehicle has some common features, but specific types of vehicles have their own special features. You will use JavaScript's prototype inheritance to share common features and add unique ones.

🎯 Goal: You will build a prototype inheritance example where a base Vehicle prototype has common properties and methods, and a Car prototype inherits from Vehicle and adds its own method.

📋 What You'll Learn

Create a Vehicle constructor function with a property type set to 'vehicle'.

Add a method describe to Vehicle.prototype that returns 'This is a vehicle'.

Create a Car constructor function that inherits from Vehicle.

Add a method drive to Car.prototype that returns 'Driving a car'.

Create an instance of Car and demonstrate calling both describe and drive methods.

💡 Why This Matters

🌍 Real World

Prototype inheritance is a core concept in JavaScript used to share features between objects efficiently, such as in UI components, game objects, or data models.

💼 Career

Understanding prototype inheritance helps in debugging, extending libraries, and writing efficient JavaScript code in many web development and software engineering roles.

1

Create the Vehicle constructor and prototype method

Create a constructor function called Vehicle that sets a property type to the string 'vehicle'. Then add a method called describe to Vehicle.prototype that returns the string 'This is a vehicle'.

Javascript

# Your code here

Need a hint?

Remember, constructor functions start with a capital letter. Use this.type = 'vehicle' inside the constructor. Add methods to Vehicle.prototype.

2

Create the Car constructor and set up inheritance

Create a constructor function called Car. Inside it, call Vehicle.call(this) to inherit properties. Then set Car.prototype to inherit from Vehicle.prototype using Object.create. Finally, set Car.prototype.constructor back to Car.

Javascript

function Vehicle() {
  this.type = 'vehicle';
}

Vehicle.prototype.describe = function() {
  return 'This is a vehicle';
};

# Your code here

Need a hint?

Use Vehicle.call(this) inside Car to inherit properties. Use Object.create to inherit methods.

3

Add a drive method to Car prototype

Add a method called drive to Car.prototype that returns the string 'Driving a car'.

Javascript

function Vehicle() {
  this.type = 'vehicle';
}

Vehicle.prototype.describe = function() {
  return 'This is a vehicle';
};

function Car() {
  Vehicle.call(this);
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

# Your code here

Need a hint?

Add the drive method to Car.prototype just like you added describe to Vehicle.prototype.

4

Create a Car instance and call methods

Create a variable called myCar and set it to a new instance of Car. Then use console.log to print the result of calling myCar.describe() and myCar.drive().

Javascript

function Vehicle() {
  this.type = 'vehicle';
}

Vehicle.prototype.describe = function() {
  return 'This is a vehicle';
};

function Car() {
  Vehicle.call(this);
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.drive = function() {
  return 'Driving a car';
};

# Your code here

Need a hint?

Create myCar with new Car(). Use console.log to show the outputs of describe() and drive().