JavaScript Function Binding
Last Updated :
12 Jul, 2025
In JavaScript, function binding refers to the process of associating a function with a specific context (this value). The bind() method creates a new function that, when called, has its 'this' keyword set to the provided value.
- this Binding: Functions in JavaScript are executed in a context. By default, 'this' refers to the global object or is undefined in strict mode.
- Permanent Binding: When a function is bound to a specific object using bind(), it will always use that object as the context when invoked, no matter how it is called.
- Partial Application: Function binding can also allow you to pre-fill arguments, creating a partially applied function.
JavaScript
const person = {
name: 'GFG',
greet: function() {
console.log('Hello, ' + this.name);
}
};
const greet = person.greet;
greet();
When greet is called directly (without being bound to the person object), the value of this is not person anymore. Instead, it refers to the global object (in non-strict mode) or is undefined (in strict mode).
Methods of Function Binding
1. bind() Method
The bind() method is used to create a new function that, when called, has its this value set to a specified value, regardless of how the function is invoked.
JavaScript
const person = {
name: 'GFG',
greet: function() {
console.log('Hello, ' + this.name);
}
};
const greet = person.greet;
const boundGreet = greet.bind(person);
boundGreet();
This code defines a person object with a greet method, binds it to the person object using bind(), and then calls the bound function to correctly reference the person's name when executed.
2. call() Method
The call() method immediately invokes a function, allowing you to set the value of this and pass arguments to the function.
JavaScript
const person = {
name: 'GFG',
greet: function(city) {
console.log('Hello, ' + this.name + ' from ' + city);
}
};
person.greet('Delhi');
const greet = person.greet;
greet.call(person, 'Noida');
OutputHello, GFG from Delhi
Hello, GFG from Noida
This code defines a greet method in the person object, calls it with 'Delhi' directly, and then uses call() to invoke the method with 'Noida', ensuring the this context is correctly bound to person.
3. apply() Method
Similar to call(), the apply() method invokes a function and allows you to set the value of this, but the difference is that the arguments are passed as an array (or an array-like object).
JavaScript
const person = {
name: 'GFG',
greet: function(city, country) {
console.log('Hello, ' + this.name + ' from ' + city + ', ' + country);
}
};
person.greet('Delhi', 'India');
const greet = person.greet;
greet.apply(person, ['Noida', 'Delhi']);
OutputHello, GFG from Delhi, India
Hello, GFG from Noida, Delhi
This code defines a greet method in the person object, calls it with 'Delhi' and 'India', then uses apply() to invoke the method with 'Noida' and 'Delhi' by passing arguments as an array while maintaining the this context.
Arrow Functions and this Binding
Arrow functions behave differently when it comes to the this keyword. They do not have their own this context. Instead, arrow functions inherit the this value from the surrounding lexical context.
JavaScript
const person = {
name: 'GFG',
greet: function() {
const arrowGreet = () => {
console.log('Hello, ' + this.name);
};
arrowGreet();
}
};
person.greet();
This code defines a greet method in the person object, which contains an arrow function arrowGreet that logs the person's name using the this keyword from the enclosing greet method's context.
Similar Reads
JavaScript Function.prototype.bind() Method A function is a set of statements that take inputs, do some specific computation, and produce output. There are various scenarios in programming in which we need to pre-configure this keyword or function arguments and we can easily do that in JavaScript with the help of the bind() method. The bind()
2 min read
What is the usage of Function.prototype.bind in JavaScript ? Bind method: Using this method, we can bind an object to a common function, so that gives different result when its needed. The bind() method takes an object as an argument and creates a new function. So basically bind function return function. Let's understand when bind method is used. bind the obj
2 min read
Dynamic Binding in Objective-C As the name suggests Dynamic binding is the process of joining two different things or creating a relation between different things. Or we can say that dynamic binding is a process of determining a method to invoke at runtime, not at the compiler time. Objective - C is a programming language that su
5 min read
Explain call(), apply(), and bind() methods in JavaScript JavaScript provides the call(), apply(), and bind() methods for setting the this context within a function. These methods are especially useful when working with object-oriented code or handling different function contexts. In this article, we’ll explore what these methods do, provide examples, and
7 min read
Difference between Early and Late Binding in Java Early Binding: The binding which can be resolved at compile time by the compiler is known as static or early binding. Binding of all the static, private and final methods is done at compile-time. Example: Java public class NewClass { public static class superclass { static void print() { System.out.
2 min read
Difference between Early and Late Binding in Java Early Binding: The binding which can be resolved at compile time by the compiler is known as static or early binding. Binding of all the static, private and final methods is done at compile-time. Example: Java public class NewClass { public static class superclass { static void print() { System.out.
2 min read