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

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

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

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

Hint

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

Practice

1. What does prototype inheritance allow in JavaScript?

easy

A. Arrays to store only numbers

B. Functions to run faster

C. Variables to be private

D. Objects to share properties and methods

Solution

1. Step 1: Understand prototype inheritance concept

   Prototype inheritance allows one object to use properties and methods from another object.

2. Step 2: Match concept to options

   Only Objects to share properties and methods correctly describes sharing properties and methods between objects.

3. Final Answer:

   Objects to share properties and methods -> Option D

4. Quick Check:

   Prototype inheritance = share properties and methods [OK]

Hint: Prototype inheritance means sharing properties/methods [OK]

Common Mistakes:

• Thinking it speeds up functions
• Confusing with variable privacy
• Assuming it limits array types

2. Which syntax correctly creates an object that inherits from another object parentObj?

easy

A. const child = parentObj.create();

B. const child = new Object(parentObj);

C. const child = Object.create(parentObj);

D. const child = Object.inherit(parentObj);

Solution

1. Step 1: Recall correct syntax for prototype inheritance

   Use Object.create(parentObj) to create a new object inheriting from parentObj.

2. Step 2: Check options for correct method

   Only const child = Object.create(parentObj); uses Object.create correctly; others are invalid or incorrect.

3. Final Answer:

   const child = Object.create(parentObj); -> Option C

4. Quick Check:

   Object.create() creates inherited object [OK]

Hint: Use Object.create(parent) to inherit prototype [OK]

Common Mistakes:

• Using new Object(parentObj) which doesn't inherit
• Using non-existent Object.inherit method
• Calling create on parentObj instead of Object

3. What is the output of this code?

function Parent() { this.name = 'Parent'; }
Parent.prototype.greet = function() { return 'Hello from ' + this.name; };

function Child() { Parent.call(this); this.name = 'Child'; }
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const c = new Child();
console.log(c.greet());

medium

A. 'Hello from Parent'

B. 'Hello from Child'

C. undefined

D. TypeError: c.greet is not a function

Solution

1. Step 1: Understand property assignment in Child constructor

   Child calls Parent constructor to set this.name, then overwrites it with 'Child'.

2. Step 2: Check prototype chain and method call

   Child's prototype inherits from Parent.prototype, so greet() is available and uses this.name which is 'Child'.

3. Final Answer:

   'Hello from Child' -> Option B

4. Quick Check:

   Child instance uses own name 'Child' in greet() [OK]

Hint: Child overwrites name, greet uses Child's name [OK]

Common Mistakes:

• Assuming greet uses Parent's name
• Forgetting to call Parent.call(this)
• Not resetting Child.prototype.constructor

4. Find the error in this code that tries to set up prototype inheritance:

function Animal() { this.alive = true; }
Animal.prototype.breathe = function() { return 'breathing'; };

function Dog() { Animal.call(this); this.bark = function() { return 'woof'; } }
Dog.prototype = Animal.prototype;

const d = new Dog();
console.log(d.breathe());

medium

A. Dog.prototype should be Object.create(Animal.prototype)

B. Animal.call(this) should be Dog.call(this)

C. Dog.prototype.bark should be defined outside constructor

D. No error, code works fine

Solution

1. Step 1: Identify prototype assignment mistake

   Assigning Dog.prototype = Animal.prototype links both constructors to same prototype object, causing shared mutations.

2. Step 2: Correct way to inherit prototype

   Use Dog.prototype = Object.create(Animal.prototype) to create a new object inheriting from Animal.prototype without sharing it directly.

3. Final Answer:

   Dog.prototype should be Object.create(Animal.prototype) -> Option A

4. Quick Check:

   Use Object.create for prototype inheritance [OK]

Hint: Use Object.create to avoid shared prototype object [OK]

Common Mistakes:

• Assigning prototype directly instead of using Object.create
• Confusing call() usage
• Defining methods inside constructor unnecessarily

5. You want to create a Car object that inherits from Vehicle and adds a drive method. Which code correctly sets this up and calls drive on a Car instance?

hard

A. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { Vehicle.call(this); }
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;
Car.prototype.drive = function() { return 'driving'; };

const myCar = new Car();
console.log(myCar.drive());

B. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { this.wheels = 4; }
Car.prototype = Vehicle.prototype;
Car.prototype.drive = function() { return 'driving'; };

const myCar = new Car();
console.log(myCar.drive());

C. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { Vehicle.call(this); }
Car.prototype.drive = function() { return 'driving'; };

const myCar = new Car();
console.log(myCar.drive());

D. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { Vehicle.call(this); }
Car.prototype = Object.create(Vehicle.prototype);

const myCar = new Car();
console.log(myCar.drive());

Solution

1. Step 1: Set up inheritance correctly

   Use Vehicle.call(this) inside Car constructor to copy properties, then set Car.prototype = Object.create(Vehicle.prototype) to inherit methods.

2. Step 2: Add drive method and create instance

   Define drive on Car.prototype, then create instance and call drive().

3. Final Answer:

   Code in option A correctly sets inheritance and calls drive() -> Option A

4. Quick Check:

   Call parent, use Object.create, add method, then call [OK]

Hint: Call parent, Object.create prototype, add method, then use instance [OK]

Common Mistakes:

• Assigning prototype directly instead of Object.create
• Not calling Vehicle.call(this) in Car
• Forgetting to set constructor property
• Defining methods before setting prototype