📞 Function.prototype.call() Polyfill

The call() method invokes a function with a specified this context and arguments. Essential for borrowing methods and controlling execution context.

The method in JavaScript allows us to invoke a function with a specified context and arguments. Let's implement a polyfill for it. -- 1️⃣ Understanding Native behavior: Here, makes inside refer to . -- 2️⃣ Polyfill for We need to: Attach the function to the (context). Invoke the function with arguments. Remove the temporary function reference. -- 3️⃣ Testing the Polyfill -- 4️⃣ Key Features of Our Polyfill ✅ Handles any function ✅ Supports multiple arguments ✅ Avoids polluting original object using ✅ Works in any execution environment () Dry Run of Polyfill Let’s take an example and go step by step to understand how our polyfill works. -- 📌 Example -- 📌 Step-by-Step Execution Step 1: Call inside refers to (the function being invoked). is (). . -- Step 2: Function Definition Breakdown Inside : -- 📌 Step 3: Execution Flow 1️⃣ Validate is , which is a function ✅. No error is thrown. -- 2️⃣ Set , since it was provided (). -- 3️⃣ Attach Function Temporarily creates a unique property key (e.g., ) to avoid overwriting existing properties . now has a new temporary property: So looks like this: -- 4️⃣ Invoke Function Equivalent to: Since inside is now , it prints: -- 5️⃣ Cleanup Removes the temporary function from to keep the object clean. is now back to: -- 📌 Final Execution Summary Action is called 2️⃣ is created and assigned to 4️⃣ Temporary function property is deleted | ✅ Works just like the native method! -- <!-quiz-start --Q1: What does do? [ ] Creates a new function with bound context [x] Immediately invokes a function with specified and arguments [ ] Returns the arguments as an array [ ] Delays function execution Q2: Why is necessary in the polyfill? [ ] To improve performance [ ] To prevent memory leaks [x] To clean up the temporary function property from the context object [ ] It's not necessary, just a convention Q3: What happens if is or in ? [ ] An error is thrown [ ] The function doesn't execute [x] defaults to the global object (globalThis) [ ] becomes null inside the function <!-quiz-end --

📞 Function.prototype.call() Polyfill

jspolyfillsmedium

The call method in JavaScript allows us to invoke a function with a specified this context and arguments. Let's implement a polyfill for it.

1️⃣ Understanding `Function.prototype.call`

Native behavior:

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: "Alice" };
greet.call(person); // Output: Hello, my name is Alice

Here, call(person) makes this inside greet refer to person.

2️⃣ Polyfill for `call`

We need to:

Attach the function to the thisArg (context).
Invoke the function with arguments.
Remove the temporary function reference.

Function.prototype.myCall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("myCall can only be used on functions");
  }

  context = context || globalThis; // Default to global object (window in browsers, global in Node)
  
  const fnKey = Symbol(); // Unique key to avoid property collisions
  context[fnKey] = this; // Assign function to context
  
  const result = context[fnKey](...args); // Invoke function
  
  delete context[fnKey]; // Cleanup temporary function
  
  return result;
};

3️⃣ Testing the Polyfill

function greet(age) {
  console.log(`Hello, my name is ${this.name} and I am ${age} years old.`);
}

const person = { name: "Bob" };

greet.myCall(person, 30);
// Output: Hello, my name is Bob and I am 30 years old.

4️⃣ Key Features of Our Polyfill

✅ Handles any function

✅ Supports multiple arguments

✅ Avoids polluting original object using Symbol

✅ Works in any execution environment (globalThis)

Dry Run of `myCall` Polyfill

Let’s take an example and go step by step to understand how our polyfill works.

📌 Example

function greet(age) {
  console.log(`Hello, my name is ${this.name} and I am ${age} years old.`);
}

const person = { name: "Bob" };

greet.myCall(person, 30);

📌 Step-by-Step Execution

Step 1: Call `myCall`

greet.myCall(person, 30);

this inside myCall refers to greet (the function being invoked).
context is person ({ name: "Bob" }).
args = [30].

Step 2: Function Definition Breakdown

Inside myCall:

Function.prototype.myCall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("myCall can only be used on functions");
  }

  context = context || globalThis; // Default to global object (window in browsers, global in Node)
  
  const fnKey = Symbol(); // Unique key to avoid property collisions
  context[fnKey] = this; // Assign function to context
  
  const result = context[fnKey](...args); // Invoke function
  
  delete context[fnKey]; // Cleanup temporary function
  
  return result;
};

📌 Step 3: Execution Flow

1️⃣ Validate `this`

if (typeof this !== "function") {
  throw new TypeError("myCall can only be used on functions");
}

this is greet, which is a function ✅.
No error is thrown.

2️⃣ Set `context`

context = context || globalThis;

context = person, since it was provided ({ name: "Bob" }).

3️⃣ Attach Function Temporarily

const fnKey = Symbol();
context[fnKey] = this;

Symbol() creates a unique property key (e.g., Symbol(fnKey)) to avoid overwriting existing properties .

person now has a new temporary property:

person[Symbol(fnKey)] = greet;

So person looks like this:

{
  name: "Bob",
  [Symbol(fnKey)]: function greet(age) { ... }
}

4️⃣ Invoke Function

const result = context[fnKey](...args);

Equivalent to:
```
person ;
```

Since this inside greet is now person, it prints:

Hello, my name is Bob and I am 30 years old.

5️⃣ Cleanup

delete context[fnKey];

Removes the temporary function from person to keep the object clean.
person is now back to:
```
{ name: "Bob" }
```

📌 Final Execution Summary

Step	Action
1️⃣	`greet.myCall(person, 30)`is called
2️⃣	`context = person`
3️⃣	`Symbol(fnKey)`is created and assigned to `person[Symbol(fnKey)] = greet`
4️⃣	`person` is invoked, printing `"Hello, my name is Bob and I am 30 years old."`
5️⃣	Temporary function property is deleted

✅ Works just like the native call method!

Quick Quiz

Test your understanding with 3 quick questions

Q1What does `call()` do?

Q2Why is `delete context[fnKey]` necessary in the polyfill?

Q3What happens if `context` is `null` or `undefined` in `call()`?

📞 Function.prototype.call() Polyfill

The call() method invokes a function with a specified this context and arguments. Essential for borrowing methods and controlling execution context.

Function.prototype.myCall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("myCall can only be used on functions");
  }

  context = context || globalThis; // Default to global object (window in browsers, global in Node)
  
  const fnKey = Symbol(); // Unique key to avoid property collisions
  context[fnKey] = this; // Assign function to context
  
  const result = context[fnKey](...args); // Invoke function
  
  delete context[fnKey]; // Cleanup temporary function
  
  return result;
};

function greet(age) {
  console.log(`Hello, my name is ${this.name} and I am ${age} years old.`);
}

const person = { name: "Bob" };

greet.myCall(person, 30);
// Output: Hello, my name is Bob and I am 30 years old.

Function.prototype.myCall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("myCall can only be used on functions");
  }

  context = context || globalThis; // Default to global object (window in browsers, global in Node)
  
  const fnKey = Symbol(); // Unique key to avoid property collisions
  context[fnKey] = this; // Assign function to context
  
  const result = context[fnKey](...args); // Invoke function
  
  delete context[fnKey]; // Cleanup temporary function
  
  return result;
};

Step

Action

1️⃣

greet.myCall(person, 30)is called

2️⃣

context = person

3️⃣

Symbol(fnKey)is created and assigned to person[Symbol(fnKey)] = greet

4️⃣

person is invoked, printing "Hello, my name is Bob and I am 30 years old."

5️⃣

Temporary function property is deleted

📞 Function.prototype.call() Polyfill

1️⃣ Understanding Function.prototype.call

2️⃣ Polyfill for call

3️⃣ Testing the Polyfill

4️⃣ Key Features of Our Polyfill

Dry Run of myCall Polyfill

📌 Example

📌 Step-by-Step Execution

Step 1: Call myCall

Step 2: Function Definition Breakdown

📌 Step 3: Execution Flow

1️⃣ Validate this

2️⃣ Set context

3️⃣ Attach Function Temporarily

4️⃣ Invoke Function

5️⃣ Cleanup

📌 Final Execution Summary

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

📞 Function.prototype.call() Polyfill

1️⃣ Understanding Function.prototype.call

2️⃣ Polyfill for call

3️⃣ Testing the Polyfill

4️⃣ Key Features of Our Polyfill

Dry Run of myCall Polyfill

📌 Example

📌 Step-by-Step Execution

Step 1: Call myCall

Step 2: Function Definition Breakdown

📌 Step 3: Execution Flow

1️⃣ Validate this

2️⃣ Set context

3️⃣ Attach Function Temporarily

4️⃣ Invoke Function

5️⃣ Cleanup

📌 Final Execution Summary

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

1️⃣ Understanding `Function.prototype.call`

2️⃣ Polyfill for `call`

Dry Run of `myCall` Polyfill

Step 1: Call `myCall`

1️⃣ Validate `this`

2️⃣ Set `context`

1️⃣ Understanding `Function.prototype.call`

2️⃣ Polyfill for `call`

Dry Run of `myCall` Polyfill

Step 1: Call `myCall`

1️⃣ Validate `this`

2️⃣ Set `context`