Suggest an editImprove this articleRefine the answer for “Call, apply and bind methods in JavaScript”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**call**, **apply**, and **bind** are `Function.prototype` methods for explicitly setting `this` in any function call. ```javascript greet.call(user, 'Hi', '!'); // runs now, args separate greet.apply(user, ['Hi', '!']); // runs now, args as array const fn = greet.bind(user, 'Hi'); // returns new function, runs later fn('!'); // "Hi, Alice!" ``` **Key:** `call` and `apply` execute immediately; `bind` returns a reusable function with `this` locked in.Shown above the full answer for quick recall.Answer (EN)Image**call**, **apply**, and **bind** are methods on `Function.prototype` that let you set `this` explicitly for any function call, regardless of how that function was defined or where it lives. ## Theory ### TL;DR - Analogy: handing a function a specific object as its "owner" for that call - `call` and `apply` run the function immediately; `bind` returns a new function with `this` locked in - The only difference between `call` and `apply` is argument format: separate values vs. an array - Decision rule: need to run now? Use `call` or `apply`. Need a reusable function with fixed context? Use `bind` - `bind` can also pre-fill arguments for later calls (partial application) ### Quick example ```javascript const user = { name: 'Alice' }; function greet(greeting, punctuation) { console.log(`${greeting}, ${this.name}${punctuation}`); } greet.call(user, 'Hi', '!'); // "Hi, Alice!" greet.apply(user, ['Hello', '.']); // "Hello, Alice." const boundGreet = greet.bind(user, 'Hey'); boundGreet('!'); // "Hey, Alice!" ``` `call` and `apply` fire immediately with the given `this`. `bind` returns a new function you call later, with `this` already set. ### Key difference `call` and `apply` invoke the function right away with a fixed `this`. The only distinction is how you pass arguments: `call` takes them one by one, `apply` takes an array. `bind` does neither of those immediately. It creates a new function object with `this` permanently set and optional pre-filled arguments, which you call whenever you need. ### When to use - Borrowing a method from one object for use on another: `call` or `apply` - Spreading a dynamic array as function arguments (e.g., from `arguments`): `apply` - Passing a method as a callback and keeping `this` intact: `bind` - Pre-filling arguments for specialized versions of a function: `bind` - Fixing `this` loss in `setTimeout`, event listeners, or React class methods: `bind` ### Comparison table | | `call` | `apply` | `bind` | |---|---|---|---| | Executes immediately | Yes | Yes | No | | Returns new function | No | No | Yes | | Argument format | Separate values | Array | Separate values (pre-filled) | | Partial application | No | No | Yes | | Works with `new` | Yes | Yes | No (TypeError) | | Typical use case | Borrow method once | Pass array as args | Reusable bound callback | ### How it works internally When you call `fn.call(obj, arg)`, the engine sets `[[ThisValue]]` in the current call frame to `obj` before running `fn`. `apply` does the same but first unpacks the array into positional arguments. `bind` creates a new `BoundFunction` exotic object with a fixed `[[BoundThis]]` slot and a `[[BoundArgs]]` array. When you invoke the bound function later, the engine prepends those bound args, restores the fixed `this`, and delegates to the original. Bound functions have no `[[Construct]]` behavior, so passing one to `new` throws a `TypeError`. ### Common mistakes **1. Expecting `bind` to run the function immediately** ```javascript const obj = { x: 10 }; function log() { console.log(this.x); } log.bind(obj); // nothing happens - returns a function, does not call it ``` `bind` returns a new function. Call it separately: `const bound = log.bind(obj); bound();` **2. Passing a non-array to `apply`** ```javascript function add(a, b) { return a + b; } add.apply(null, 1, 2); // TypeError: CreateListFromArrayLike called on non-object ``` `apply` needs an array as its second argument. Fix: `add.apply(null, [1, 2])` or switch to `add.call(null, 1, 2)`. **3. Chaining `bind` and expecting to override context** ```javascript function show() { console.log(this.name); } const a = show.bind({ name: 'Alice' }); const b = a.bind({ name: 'Bob' }); b(); // "Alice" - the first bind wins, always ``` Once `this` is locked by `bind`, no subsequent `bind` can change it. The `[[BoundThis]]` slot is set once and stays. **4. Using a bound function as a constructor** ```javascript function Counter(start) { this.count = start; } const BoundCounter = Counter.bind(null, 10); new BoundCounter(); // TypeError ``` Bound functions have no `[[Construct]]` support. Use a factory function if you need partial application with `new`. **5. `bind(null)` behaving differently in strict mode** ```javascript 'use strict'; function fn() { console.log(this); } fn.bind(null)(); // null (not the global object) ``` In sloppy mode, `null` becomes the global object. In strict mode it stays `null`. Know which mode your code runs in before relying on this behavior. I've seen the bind-in-constructor pattern in React class components across dozens of codebases. The moment someone forgets it and their event handler crashes with `Cannot read property of undefined`, it clicks immediately why `bind` exists at all. ### Real-world usage - React class components: `this.handleClick = this.handleClick.bind(this)` in the constructor to preserve `this` when passing the method as a prop - Express: `app.use(handler.bind(dbContext))` to inject a database connection into every route handler - DOM events: `element.addEventListener('click', handler.bind(component))` so `this` stays the component, not the DOM element - Partial application: `const double = multiply.bind(null, 2)` to create specialized functions from general ones - `Math.max.apply(null, numbersArray)` - the classic pre-spread pattern still found in legacy code ### Follow-up questions **Q:** What happens when you pass a primitive as `thisArg` to `call`? **A:** In sloppy mode the primitive auto-boxes into its wrapper object (e.g., `5` becomes `Number {5}`). In strict mode it stays as the primitive. Avoid it in practice and use objects. **Q:** Does chaining `.bind` and `.call` together let you override context? **A:** No. `fn.bind(obj).call(otherObj)` still uses `obj` as `this`, not `otherObj`. `bind` wins. The locked `this` cannot be overridden by `call`, `apply`, or another `bind`. **Q:** How would you write a `bind` polyfill? **A:** Capture the original function and `boundThis` in a closure, then return a new function that calls the original via `.apply(boundThis, boundArgs.concat(newArgs))`. A strict polyfill also checks `instanceof` to throw when someone tries `new` on the result. **Q:** Why does passing `call`, `apply`, or `bind` to an arrow function have no effect on `this`? **A:** Arrow functions capture `this` lexically at definition time. They have no own `[[ThisValue]]`. Any `thisArg` you pass is ignored for `this`, though the arguments still get through normally. **Q:** Can `apply` replace the spread operator when passing arrays as arguments? **A:** Yes. `fn.apply(null, arr)` and `fn(...arr)` are functionally equivalent. Spread is cleaner in modern code, but `apply` still appears in legacy codebases and polyfill interview questions. ## Examples ### Basic: method borrowing ```javascript const dog = { sound: 'woof' }; const cat = { sound: 'meow' }; function makeNoise(times) { for (let i = 0; i < times; i++) { console.log(this.sound); } } makeNoise.call(dog, 2); // "woof" "woof" makeNoise.call(cat, 1); // "meow" ``` One function, two objects as `this`. No code duplication. This is the core use case for `call`. ### Intermediate: React class component with bind ```javascript class Button extends React.Component { constructor(props) { super(props); // bind here so this.props works when the DOM event fires this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Clicked:', this.props.label); } render() { return <button onClick={this.handleClick}>{this.props.label}</button>; } } ``` Without `bind`, passing `this.handleClick` as a prop detaches it from the instance. When the DOM event fires, `this` is `undefined` in strict mode. Binding in the constructor fixes it once and it holds across all renders. ### Advanced: partial application via bind ```javascript function fetchData(baseURL, endpoint, id) { console.log(`GET ${baseURL}${endpoint}/${id}`); } // lock in the base URL for all API calls const apiCall = fetchData.bind(null, 'https://api.example.com'); // lock in the endpoint for user-specific calls const getUser = apiCall.bind(null, '/users'); getUser(42); // "GET https://api.example.com/users/42" getUser(99); // "GET https://api.example.com/users/99" ``` Each `bind` pre-fills more arguments. `this` is `null` here because `fetchData` does not use it. The result is a chain of specialized functions built from one generic one, with no wrapper boilerplate.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.