Call Function with Custom Context - Problem

In JavaScript, every function can be called with a specific context (the this value) using methods like call(), apply(), or bind(). Your task is to create a polyfill for the call() method by implementing callPolyfill.

The callPolyfill method should:

  • Accept an object obj as the first parameter (this becomes the this context)
  • Accept any number of additional arguments to pass to the function
  • Execute the function with the specified context and arguments
  • Important: You cannot use the built-in Function.call method

Example:

function tax(price, taxRate) {
  const totalCost = price * (1 + taxRate);
  console.log(`The cost of ${this.item} is ${totalCost}`);
}

Calling tax(10, 0.1) logs "The cost of undefined is 11" because this.item is undefined.

But tax.callPolyfill({item: "salad"}, 10, 0.1) should log "The cost of salad is 11" with the proper context!

Input & Output

example_1.js — Basic Function Call
$ Input: function greet(greeting) { return `${greeting}, ${this.name}!`; } greet.callPolyfill({name: "Alice"}, "Hello")
› Output: "Hello, Alice!"
💡 Note: The function is called with {name: "Alice"} as the context, so this.name becomes "Alice"
example_2.js — Math Calculation
$ Input: function tax(price, taxRate) { return price * (1 + taxRate) + ` for ${this.item}`; } tax.callPolyfill({item: "book"}, 20, 0.08)
› Output: "21.6 for book"
💡 Note: The tax calculation uses the provided context to access this.item = "book"
example_3.js — No Arguments
$ Input: function getInfo() { return `${this.name} is ${this.age} years old`; } getInfo.callPolyfill({name: "Bob", age: 25})
› Output: "Bob is 25 years old"
💡 Note: Function called with no additional arguments, only context object

Constraints

  • context can be any object or null/undefined
  • The function can have 0 to 100 parameters
  • Function can return any valid JavaScript value
  • Cannot use built-in Function.call, Function.apply, or Function.bind
  • Must handle edge cases like null context appropriately

Visualization

Tap to expand
callPolyfill Implementation ProcessStep 1: SetupTarget Object:{item: "salad"}Add temporary property:obj[Symbol] = functionobj[Symbol] = taxStep 2: ExecuteFunction call:obj[Symbol](10, 0.1)'this' context:this = objthis.item = "salad"Step 3: CleanupRemove property:delete obj[Symbol]Return result:"The cost ofsalad is 11"Code BreakdownFunction.prototype.callPolyfill = function(context, ...args) {const obj = context || globalThis; // Handle null contextconst fnSymbol = Symbol('fn'); // Unique property nameobj[fnSymbol] = this; // Assign function to objectconst result = obj[fnSymbol](...args); // Call with contextdelete obj[fnSymbol]; // Cleanupreturn result;};
Understanding the Visualization
1
Preparation
Create a unique property name and assign function to target object
2
Execution
Call function through object property - 'this' naturally becomes the object
3
Cleanup
Remove temporary property and return the result
Key Takeaway
🎯 Key Insight: By temporarily making the function a property of the target object, we leverage JavaScript's natural method invocation behavior where `obj.method()` automatically sets `this` to `obj`.

Related Problems

Asked in
Google 28 Microsoft 22 Meta 18 Amazon 15
28.4K Views
Medium Frequency
~12 min Avg. Time
892 Likes
Ln 1, Col 1
Smart Actions
💡 Explanation
AI Ready
💡 Suggestion Tab to accept Esc to dismiss
// Output will appear here after running code
Code Editor Closed
Click the red button to reopen