Advanced Object Patterns

Prototype Manipulation

Read and change an object's inheritance chain on the fly!

Find videos you like?

Save to resource drawer for future reference!

What is Prototype Manipulation?

Think of it as changing your family tree! Every object in JavaScript has a hidden link to another object (its prototype) - like a parent. With Object.getPrototypeOf() you can see who the parent is, and with Object.setPrototypeOf() you can change the parent at runtime!

⚠️ Use with Caution!

While powerful, changing prototypes at runtime is slow and can hurt performance. Prefer Object.create() to set prototype during creation instead!

🔗Key Methods

🔍

Object.getPrototypeOf()

Read the prototype - see what object inherits from

const proto = Object.getPrototypeOf(obj);

✏️

Object.setPrototypeOf()

Change the prototype - make object inherit from something else

Object.setPrototypeOf(obj, newProto);

Alternative: proto (Deprecated)

You might see obj.__proto__ in old code. It's the old way to access prototypes. Don't use it!Use the standard Object.getPrototypeOf() instead.

❌ Old Way (Avoid)

obj.__proto__

✅ Modern Way

Object.getPrototypeOf(obj)

Example 1: Reading Prototypes

Inspect the prototype chain of objects

javascript

code

DarkEditable

// Regular object literal
const user = { name: 'Alice' };

// Get its prototype
const userProto = Object.getPrototypeOf(user);

console.log(userProto === Object.prototype);  // true
// Regular objects inherit from Object.prototype!

console.log(userProto);
// { constructor: f, toString: f, hasOwnProperty: f, ... }

// Array example
const numbers = [1, 2, 3];
const arrayProto = Object.getPrototypeOf(numbers);

console.log(arrayProto === Array.prototype);  // true
// Arrays inherit from Array.prototype!

console.log(arrayProto);
// { push: f, pop: f, map: f, filter: f, ... }

// Check the prototype chain
const proto1 = Object.getPrototypeOf(numbers);     // Array.prototype
const proto2 = Object.getPrototypeOf(proto1);      // Object.prototype
const proto3 = Object.getPrototypeOf(proto2);      // null (end of chain!)

console.log(proto1 === Array.prototype);    // true
console.log(proto2 === Object.prototype);   // true
console.log(proto3);                        // null

// Custom object with Object.create
const animal = {
  type: 'Unknown',
  makeSound() {
    console.log('Some sound');
  }
};

const dog = Object.create(animal);
dog.name = 'Buddy';

const dogProto = Object.getPrototypeOf(dog);
console.log(dogProto === animal);  // true
// dog inherits from animal!

Console Output

Click "Run Code" to see output here...

Example 2: Changing Prototypes (Use Carefully!)

Dynamically change what an object inherits from

javascript

code

DarkEditable

// Create some parent objects
const flyingAbility = {
  canFly: true,
  fly() {
    console.log(`${this.name} is flying! 🦅`);
  }
};

const swimmingAbility = {
  canSwim: true,
  swim() {
    console.log(`${this.name} is swimming! 🏊`);
  }
};

// Create a basic animal
const duck = {
  name: 'Donald'
};

console.log(duck.canFly);   // undefined
console.log(duck.canSwim);  // undefined

// Give it flying ability!
Object.setPrototypeOf(duck, flyingAbility);

duck.fly();  // "Donald is flying! 🦅"
console.log(duck.canFly);   // true
console.log(duck.canSwim);  // undefined

// Change its ability to swimming!
Object.setPrototypeOf(duck, swimmingAbility);

duck.swim();  // "Donald is swimming! 🏊"
console.log(duck.canFly);   // undefined (lost flying!)
console.log(duck.canSwim);  // true

// ⚠️ Performance warning!
// Changing prototypes is SLOW - JavaScript engines have to
// reorganize internal structures. Avoid in production code!

// Better approach: Set prototype during creation
const eagle = Object.create(flyingAbility);
eagle.name = 'Eddie';
eagle.fly();  // "Eddie is flying! 🦅"
// Much faster! ✅

Console Output

Click "Run Code" to see output here...

📊Prototype Chain Visualization

How the Chain Works

myObject

→

Looks for property here first

[[Prototype]]

→

Not found? Check parent

Object.prototype

→

Still not found? Check grandparent

null

→

End of chain! Return undefined

⚡Performance & Best Practices

✅ DO: Use Object.create()

Set the prototype when creating the object - fast and clean!

const obj = Object.create(protoObj);

❌ DON'T: Use setPrototypeOf() in Loops

Changing prototypes repeatedly is extremely slow! JavaScript engines can't optimize it.

// BAD - Very slow!
for (let obj of objects) {
  Object.setPrototypeOf(obj, newProto);
}

💡 TIP: getPrototypeOf() is Safe

Reading prototypes with getPrototypeOf() has no performance penalty. Use it freely for debugging and inspection!

Key Takeaways

🔍

Read Prototypes

Use Object.getPrototypeOf() to inspect

✏️

Change Prototypes

Use Object.setPrototypeOf() sparingly

⚡

Performance

Prefer Object.create() over changing prototypes

🔗

Prototype Chain

Objects inherit from parent until reaching null

Previous Topic

Property Descriptors

Configurable, enumerable, writable, and value descriptors.

Next Topic

Set

Unique value collections with Set data structure.

Ask a Question

Have a question about Prototype Manipulation? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.