Prototype inheritance in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an object that inherits from another object using __proto__.

Javascript

const parent = { greet() { return 'Hello'; } };
const child = { __proto__: [1] };
console.log(child.greet());

Drag options to blanks, or click blank then click option'

Aparent

Bchild

CObject

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Setting __proto__ to the child itself causes no inheritance.

Using an empty object {} as prototype does not inherit parent's methods.

The __proto__ property sets the prototype of the object. Setting it to parent makes child inherit from parent.

2fill in blank

medium

Complete the code to check if child inherits the greet method from parent.

Javascript

const parent = { greet() { return 'Hi'; } };
const child = { __proto__: parent };
console.log('[1]' in child);

Drag options to blanks, or click blank then click option'

A'parent'

B'child'

C'greet'

D'hello'

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of property names as strings.

Checking for 'parent' or 'child' which are not property names.

The in operator checks if a property exists in the object or its prototype chain. Here, 'greet' is the method inherited by child.

3fill in blank

hard

Fix the error in the code to properly set the prototype of child to parent using Object.setPrototypeOf.

Javascript

const parent = { speak() { return 'Hey'; } };
const child = {};
Object.setPrototypeOf(child, [1]);
console.log(child.speak());

Drag options to blanks, or click blank then click option'

Aparent

Bchild

C{}

DObject

Attempts:

3 left

💡 Hint

Common Mistakes

Passing child as the prototype causes no inheritance.

Passing an empty object {} does not link to parent.

Object.setPrototypeOf sets the prototype of the first argument to the second. Here, child should inherit from parent.

4fill in blank

hard

Fill both blanks to create a prototype chain where child inherits from parent and parent inherits from grandparent.

Javascript

const grandparent = { say() { return 'Hello from grandparent'; } };
const parent = { __proto__: [1] };
const child = { __proto__: [2] };
console.log(child.say());

Drag options to blanks, or click blank then click option'

Agrandparent

Bchild

Cparent

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the prototype assignments breaks the chain.

Using empty objects {} breaks inheritance.

Setting parent.__proto__ to grandparent and child.__proto__ to parent creates a chain where child inherits from parent, which inherits from grandparent.

5fill in blank

hard

Fill all three blanks to create a function constructor Person, add a method to its prototype, and create an instance that uses that method.

Javascript

function [1](name) {
  this.name = name;
}
[2].prototype.sayName = function() {
  return `My name is ${this.name}`;
};
const person = new [3]('Alice');
console.log(person.sayName());

Drag options to blanks, or click blank then click option'

APerson

DHuman

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for constructor and prototype causes errors.

Adding methods directly to the instance instead of prototype.

The function constructor is named Person. We add sayName to Person.prototype. Then we create an instance with new Person('Alice') which inherits the method.

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