Faangprep Logo
Log inStart free
JavaScript/Execution Contexts, Closures, and Object Prototypes/Prototypes & Inheritance

Prototypes & Inheritance

Medium100% Free~20 mins#prototypes#prototype-chain#inheritance#shadowing#hasOwnProperty#delete#v8
Key Learning Objectives
✓

Understand the ECMAScript [[Prototype]] link and prototype chain traversal.

✓

Master property shadowing and how writing to an instance creates own properties.

✓

Learn why the delete operator only removes own properties and never prototype properties.

✓

Distinguish between Object.prototype.hasOwnProperty() and the 'in' operator.

The Interview Problem

What is logged to the console when the following code executes, and how does property deletion interact with shadowed prototype properties?

1function Device(brand) {
2  this.brand = brand;
3}
4

5Device.prototype.category = 'electronics';
6Device.prototype.battery = 100;
7

8const phone = new Device('Acme');
9

10phone.battery = 85;
11

12const res1 = phone.battery;
13delete phone.battery;
14const res2 = phone.battery;
15delete phone.category;
16const res3 = phone.category;
17const res4 = phone.hasOwnProperty('battery');
18const res5 = 'battery' in phone;
19

20console.log(res1, res2, res3, res4, res5);
Predict Console Output
Interactive Challenge

Select the option that matches what standard ECMAScript prints to the console:

85 100 electronics false true

85 undefined undefined false false

85 100 undefined true true

85 85 electronics false true

V8 Engine Execution Trace
Step 1 of 10 (Line 1)

Device constructor function is declared. V8 engine initializes Device.prototype as an empty object with a constructor property pointing back to Device.

Call Stack (Top = Active)
Global Execution Context
Lexical Scope / Bindings
Device:FunctionRef#Device
Console Stream
> [empty]

Deep Technical Breakdown

The Prototype Chain Lookup Algorithm in V8

When accessing a property obj.prop:

  1. The V8 engine checks the own properties (the object's internal shape / hidden class and property storage).
  2. If found, that value is returned immediately.
  3. If not found, V8 checks obj.[[Prototype]] (accessible via Object.getPrototypeOf(obj) or __proto__).
  4. If found on the prototype, that value is returned.
  5. If not found, the search continues recursively up the chain until it reaches Object.prototype.[[Prototype]], which is null. If still not found, undefined is returned.

Property Shadowing vs Prototype Mutation

  • Assignment creates own properties: Writing phone.battery = 85 does NOT mutate Device.prototype. It creates a new own property on phone with the value 85. This is known as property shadowing.
  • Delete unmasks the prototype: Running delete phone.battery removes the own property. Subsequent reads fall through to Device.prototype.battery (100).
  • Delete never mutates prototypes: Running delete phone.category attempts to delete an own property category from phone. Since phone does not own category, the operation is a harmless no-op and returns true, leaving Device.prototype.category completely untouched.
  • Inspection differences: phone.hasOwnProperty('battery') returns false (only own properties are considered), whereas 'battery' in phone returns true (the entire prototype chain is inspected).
Common Traps & Mistakes

Thinking `delete instance.prop` will delete a property on the prototype. To delete a prototype property, you must explicitly call `delete Constructor.prototype.prop`.

Confusing `__proto__` with `.prototype`. `.prototype` is an own property on constructor functions used as the blueprint for instances; `[[Prototype]]` (or `__proto__`) is the actual link on instances.

Mutating shared objects on prototypes: if `Device.prototype.settings = {}`, all instances share the exact same object reference in heap memory, causing shared mutation bugs.

FAANG Follow-Up Probes
Probe #1

How does `Object.create(proto)` differ from `new Constructor()` in setting up prototype delegation?

Probe #2

What is Prototype Pollution, how does it occur with recursive object merges, and how do you protect against it using `Object.create(null)` or `Map`?

Probe #3

How does modern ES6 `class extends` desugar into prototype inheritance, `super()`, and `Object.setPrototypeOf()` under the hood?

Prev: this, call, apply & bindNext: Property Flags & Descriptors