Prototype inheritance in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is prototype inheritance in JavaScript?

Prototype inheritance is a way objects in JavaScript can share properties and methods through a linked prototype object. When you access a property, JavaScript looks for it on the object, and if not found, it checks the prototype chain.

beginner

How do you set the prototype of an object in JavaScript?

You can set the prototype of an object using Object.create(proto) to create a new object with proto as its prototype, or by using Object.setPrototypeOf(obj, proto).

intermediate

What is the role of constructor in prototype inheritance?

The constructor property points back to the function that created the object. It helps identify the type of the object and is useful when creating new instances.

beginner

Explain the prototype chain in simple terms.

The prototype chain is like a family tree for objects. If an object doesn’t have a property, JavaScript looks up to its prototype, then that prototype’s prototype, and so on, until it finds the property or reaches the end.

beginner

How does JavaScript find a method when you call it on an object?

JavaScript first looks for the method on the object itself. If it’s not there, it looks up the prototype chain until it finds the method or reaches the end (null).

Which of the following is true about prototype inheritance in JavaScript?

A Objects inherit properties directly from other objects via the prototype chain.

B JavaScript uses class-based inheritance only.

C Prototype inheritance copies properties from one object to another.

D Prototype inheritance is not supported in JavaScript.

JavaScript uses prototype-based inheritance where objects inherit properties through a linked prototype chain.

How can you create a new object that inherits from another object parentObj?

A var child = Object.assign({}, parentObj);

B var child = new Object(parentObj);

C var child = parentObj();

D var child = Object.create(parentObj);

Object.create(parentObj) creates a new object with parentObj as its prototype.

What does the constructor property of an object refer to?

A The object's parent in the prototype chain.

B The function that created the object.

C The prototype object.

D The object's own properties.

The constructor property points to the function that created the object.

If a property is not found on an object, where does JavaScript look next?

A In the object's constructor.

B In the global variables.

C In the object's prototype.

D It throws an error immediately.

JavaScript looks up the prototype chain to find the property.

What will Object.getPrototypeOf(obj) return?

A The prototype object of <code>obj</code>.

B The constructor function of <code>obj</code>.

C The properties of <code>obj</code>.

D The global object.

Object.getPrototypeOf(obj) returns the prototype linked to obj.

Describe how prototype inheritance works in JavaScript and why it is useful.

Think about how objects share features without copying.

Explain how to create an object that inherits from another object and how to access inherited properties.

Consider how JavaScript finds properties when you use dot notation.

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