JS call apply bind
In this page:
functionName.call(thisValue, arg1, arg2);
functionName.apply(thisValue, [arg1, arg2]);
const bound = functionName.bind(thisValue);call()
call() runs a function immediately and lets you set its this value. Arguments are passed one by one.
This makes call() convenient when you already know the exact number of arguments a function needs and want to invoke it with a specific this value right away.
उदाहरण: call()
// Define the function `greet` taking `greeting`
// Define the function `greet` taking `greeting`
function greet(greeting) {
// Print `greeting + ", " + this.name` to the console
// Print `greeting + ", " + this.name` to the console
console.log(greeting + ", " + this.name);
}
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Call `greet.call(user, "Hello")`
// Call `greet.call(user, "Hello")`
greet.call(user, "Hello");apply()
apply() is like call(), but it receives function arguments in an array. apply() is especially useful when you have arguments already collected in an array (or array-like object) and don't want to spread them out manually.
उदाहरण: apply()
// Define the function `greet` taking `greeting`
// Define the function `greet` taking `greeting`
function greet(greeting) {
// Print `greeting + ", " + this.name` to the console
// Print `greeting + ", " + this.name` to the console
console.log(greeting + ", " + this.name);
}
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Call `greet.apply(user, ["Hi"])`
// Call `greet.apply(user, ["Hi"])`
greet.apply(user, ["Hi"]);bind()
bind() creates a new function with a fixed this value.
The new function can be called later. bind() is commonly used to lock in this for a callback that will be invoked later by other code, such as an event handler that needs to reference a specific object instance.
उदाहरण: bind()
// Define the function `greet` with no parameters
// Define the function `greet` with no parameters
function greet() {
// Print `"Hello, " + this.name` to the console
// Print `"Hello, " + this.name` to the console
console.log("Hello, " + this.name);
}
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Declare the constant `boundGreet`, set to `greet.bind(user)`
// Declare the constant `boundGreet`, set to `greet.bind(user)`
const boundGreet = greet.bind(user);
// Call `boundGreet()`
// Call `boundGreet()`
boundGreet();Main Difference
call() and apply() run now. bind() returns a new function for later use. Because apply() accepts an array, it also works well with variable-length argument lists where you don't know in advance how many values you're passing.
उदाहरण: Main Difference
function sum(a, b) { return a + b; }
console.log(sum.call(null, 1, 2)); // runs now
console.log(sum.apply(null, [1, 2])); // runs now, args in array
const later = sum.bind(null, 1, 2);
console.log(later()); // runs laterPractice
Use call when arguments are separate, apply when arguments are in an array, and bind when you want a reusable function.
A typical pattern is const boundFn = obj.method.bind(obj) so boundFn can be passed around freely without losing its connection to obj.
उदाहरण: Practice
// Declare the constant `obj`, set to `{ value: 42 }`
// Declare the constant `obj`, set to `{ value: 42 }`
const obj = { value: 42 };
// Define the function `show` with no parameters
// Define the function `show` with no parameters
function show() { console.log(this.value); }
// Declare the constant `boundFn`, set to `show.bind(obj)`
// Declare the constant `boundFn`, set to `show.bind(obj)`
const boundFn = show.bind(obj);
// Call `boundFn()`
// Call `boundFn()`
boundFn();Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: