Prototypes, call, apply, and bind

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is a Prototype? Why do we use Prototypes? What are call() , apply() , and bind() ? The difference between them Real-world examples Part 1: Prototype What is a Prototype? A prototype is an object that allows other objects to inherit properties and methods . Simple Definition: A prototype is like a template from which objects can share common methods. Real-Life Example 🚗 Imagine a car factory. Every car has: Engine Brake Start button Instead of giving each car its own copy of the start() function, all cars share one start() method. This shared method is stored in the prototype . Without Prototype function Car ( name ) { this . name = name ; this . start = function () { console . log( this . name + " Started" ); }; } const car1 = new Car ( "BMW" ); const car2 = new Car ( "Audi" ); ❌ Every object gets a separate copy of start() . Memory is wasted. With Prototype function Car ( name ) { this . name = name ; } Car . prototype . start = function () { console . log( this . name + " Started" ); }; const car1 = new Car ( "BMW" ); const car2 = new Car ( "Audi" ); car1 . start(); car2 . start(); Output BMW Started Audi Started ✅ Only one start() method exists and both objects share it. Prototype Chain car1 │ ▼ Car.prototype │ ▼ Object.prototype │ ▼ null When JavaScript cannot find a property, it searches up the prototype chain . Part 2: call() What is call() ? call() invokes a function immediately and lets you choose what this refers to. Syntax function. call ( thisArg , arg1 , arg2 ); Example const person = { name: "Ajay" }; function greet ( city ) { console . log( `Hello ${ this . name} from ${ city } ` ); } greet . call( person , "Delhi" ); Output Hello Ajay from Delhi Part 3: apply() apply() works like call() , but arguments are passed as an array . Syntax function. apply ( thisArg , [ arg1 , arg2 ]); Example const person = { name: "Ajay" }; function greet ( city , country ) { console . log( `Hello ${ this . name} from ${ city } , ${ country } ` ); } greet . apply( person , [ "Delhi" , "India" ]); Output Hello Ajay from Delhi, India Part 4: bind() bind() does not execute the function immediately . Instead, it returns a new function with this permanently set. Syntax const newFunction = function. bind( thisArg ); Example const person = { name: "Ajay" }; function greet () { console . log( `Hello ${ this . name} ` ); } const sayHello = greet . bind( person ); sayHello (); Output Hello Ajay Real-Life Example 📞 Imagine calling someone. call() Call now. greet . call( person ); 📞 Calls immediately. apply() Call now, but send arguments in a list. greet . apply( person , [ "Delhi" ]); 📞 Calls immediately. bind() Save the phone number. Call later. const fn = greet . bind( person ); fn (); 📞 Calls only when you execute fn() . Difference Table Feature call() apply() bind() Executes immediately ✅ ✅ ❌ Returns new function ❌ ❌ ✅ Arguments Separate values Array Separate values when calling the bound function Changes this ✅ ✅ ✅ Interview Example const person = { name: "Ajay" }; function greet ( age ) { console . log( this . name, age ); } greet . call( person , 30 ); greet . apply( person , [ 30 ]); const fn = greet . bind( person ); fn ( 30 ); Output Ajay 30 Ajay 30 Ajay 30 Prototype vs call() , apply() , bind() Prototype call() / apply() / bind() Used for inheritance Used to control the value of this Shares methods between objects Borrows methods or fixes this Saves memory Helps reuse functions Key Points Prototype ✅ Used for inheritance. ✅ Methods are shared between objects. ✅ Saves memory. call() ✅ Calls the function immediately. ✅ Arguments are passed one by one. apply() ✅ Calls the function immediately. ✅ Arguments are passed as an array. bind() ✅ Returns a new function. ✅ Executes later when called. ✅ Permanently binds the value of this . 🧠 Easy Formula Prototype → Share methods between objects call() → Call now + arguments separately apply() → Call now + arguments in an array bind() → Bind now, call later Remember: Prototype is about sharing behavior between objects. call() , apply() , and bind() are about controlling the this keyword .