Prototype chain in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the prototype chain in JavaScript?

The prototype chain is a series of linked objects used to look up properties and methods. When you try to access a property on an object, JavaScript checks the object first. If it doesn't find it, it looks up the prototype chain until it finds the property or reaches the end.

beginner

How does JavaScript find a property on an object using the prototype chain?

JavaScript first checks the object itself. If the property is not there, it checks the object's prototype. This continues up the chain until the property is found or the chain ends at null.

intermediate

What is the role of Object.prototype in the prototype chain?

Object.prototype is the last object in the prototype chain. It provides common methods like toString() and hasOwnProperty(). Its prototype is null, which ends the chain.

intermediate

Explain how the prototype chain enables inheritance in JavaScript.

Inheritance happens because objects can access properties and methods from their prototype. If a property is not found on the object, JavaScript looks up the prototype chain, allowing objects to share behavior without copying code.

beginner

What happens if a property is not found anywhere in the prototype chain?

If the property is not found on the object or any object in its prototype chain, JavaScript returns undefined.

What does JavaScript check first when accessing a property on an object?

A The object itself

B The object's prototype

C Object.prototype

D The global object

JavaScript first checks the object itself before looking up the prototype chain.

What is the prototype of Object.prototype?

A null

B Object.prototype

C undefined

D The global object

Object.prototype's prototype is null, which ends the prototype chain.

If a property is not found on an object or its prototype chain, what is returned?

A null

B undefined

C false

D An error is thrown

JavaScript returns undefined when a property is not found anywhere in the prototype chain.

Which of these is true about the prototype chain?

A It is a feature of the JavaScript compiler

B It copies all properties from the prototype to the object

C It only works with arrays

D It allows objects to inherit properties and methods

The prototype chain allows objects to inherit properties and methods by linking to their prototypes.

How can you access an object's prototype in JavaScript?

A Using object.constructor

B Using object.prototype

C Using __proto__ or Object.getPrototypeOf()

D Using object.prototypeChain

You can access an object's prototype using __proto__ or the Object.getPrototypeOf() method.

Describe the prototype chain and how JavaScript uses it to find properties.

Think about how JavaScript checks the object and then moves up to prototypes.

Explain how inheritance works in JavaScript using the prototype chain.

Focus on how objects get behavior from their prototypes.

Practice

1. What does the prototype chain in JavaScript help with?

easy

A. Sharing properties and methods between objects

B. Creating new variables automatically

C. Running code faster

D. Stopping code execution

Solution

1. Step 1: Understand prototype chain purpose

   The prototype chain allows objects to share properties and methods by linking them.

2. Step 2: Identify correct description

   Sharing properties and methods matches the prototype chain's role, unlike other options.

3. Final Answer:

   Sharing properties and methods between objects -> Option A

4. Quick Check:

   Prototype chain = Sharing properties and methods [OK]

Hint: Prototype chain shares properties/methods between objects [OK]

Common Mistakes:

• Thinking it creates variables
• Assuming it speeds up code
• Believing it stops code

2. Which of the following is the correct way to create an object with a specific prototype in JavaScript?

easy

A. let obj = prototypeObj.create();

B. let obj = Object.create(prototypeObj);

C. let obj = new Object(prototypeObj);

D. let obj = Object.prototype(prototypeObj);

Solution

1. Step 1: Recall Object.create syntax

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

2. Step 2: Check other options

   Other options use incorrect syntax or methods that don't exist.

3. Final Answer:

   let obj = Object.create(prototypeObj); -> Option B

4. Quick Check:

   Object.create() creates object with prototype [OK]

Hint: Use Object.create(prototype) to set prototype correctly [OK]

Common Mistakes:

• Using new Object() with prototype argument
• Calling create() on prototype object
• Trying to call Object.prototype as a function

3. What will be the output of this code?

const parent = { greet() { return 'Hello'; } };
const child = Object.create(parent);
console.log(child.greet());

medium

A. undefined

B. null

C. TypeError

D. 'Hello'

Solution

1. Step 1: Understand prototype lookup

   child has no greet method, so JavaScript looks up to parent where greet exists.

2. Step 2: Call greet method from parent

   Calling child.greet() runs parent.greet(), returning 'Hello'.

3. Final Answer:

   'Hello' -> Option D

4. Quick Check:

   Prototype lookup finds greet() = 'Hello' [OK]

Hint: If property missing, JS checks prototype chain [OK]

Common Mistakes:

• Expecting undefined because child lacks greet
• Thinking it causes error
• Assuming null is returned

4. Find the error in this code snippet:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.eats = false;
console.log(rabbit.eats);
console.log(animal.eats);

medium

A. No error; output is as expected

B. Object.create should not be used here

C. rabbit.eats does not override animal.eats

D. animal.eats is changed to false

Solution

1. Step 1: Understand property shadowing

   Setting rabbit.eats creates a new property on rabbit, shadowing animal.eats.

2. Step 2: Check outputs

   rabbit.eats logs false; animal.eats remains true. This is expected behavior.

3. Final Answer:

   No error; output is as expected -> Option A

4. Quick Check:

   Property shadowing works correctly [OK]

Hint: Setting property on child shadows parent's property [OK]

Common Mistakes:

• Thinking parent's property changes
• Believing Object.create is wrong here
• Expecting error from property override

5. You want to create a chain where child inherits from parent, and parent inherits from grandparent. Which code correctly sets this prototype chain?

hard

A. const grandparent = {};
const parent = Object.create(child);
const child = Object.create(parent);

B. const grandparent = {};
const parent = {};
const child = Object.create(parent);
child.__proto__ = grandparent;

C. const grandparent = {};
const parent = Object.create(grandparent);
const child = Object.create(parent);

D. const grandparent = {};
const parent = Object.create(grandparent);
const child = Object.create(grandparent);

Solution

1. Step 1: Set parent prototype to grandparent

   Using Object.create(grandparent) for parent sets grandparent as prototype.

2. Step 2: Set child prototype to parent

   Using Object.create(parent) for child sets parent as prototype, completing chain.

3. Step 3: Check other options

   B incorrectly overrides child's prototype to grandparent using __proto__, skipping parent; C creates a circular reference (child not defined when creating parent); D sets child directly to grandparent, skipping parent.

4. Final Answer:

   const grandparent = {}; const parent = Object.create(grandparent); const child = Object.create(parent); -> Option C

5. Quick Check:

   Prototype chain: child -> parent -> grandparent [OK]

Hint: Use Object.create in order from top to bottom [OK]

Common Mistakes:

• Setting child prototype to grandparent directly
• Reversing prototype chain order
• Using __proto__ instead of Object.create