JavaScript Function Binding
Last Updated :
08 Mar, 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 Definitions
JavaScript functions are declared using the function keyword, either as a declaration or expression. Declarations define named functions, while expressions assign functions to variables. Both enable code reuse and modularity.SyntaxFunction Declarationsfunction functionName( parameters ) { // Stateme
2 min read
JavaScript Function Expression
A function expression is a way to define a function as part of an expression making it versatile for assigning to variables, passing as arguments, or invoking immediately.Function expressions can be named or anonymous.They are not hoisted, meaning they are accessible only after their definition.Freq
3 min read
JavaScript Anonymous Functions
An anonymous function is simply a function that does not have a name. Unlike named functions, which are declared with a name for easy reference, anonymous functions are usually created for specific tasks and are often assigned to variables or used as arguments for other functions.In JavaScript, you
3 min read
Functions in JavaScript
Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.JavaScriptfunction sum(x, y) { return x + y; } console.log(sum(6, 9));Output15 Function Syntax and W
5 min read
JavaScript Function Invocation
In JavaScript, function invocation refers to executing the code defined in a function. Function invocation occurs when a function is called or executed in JavaScript. When invoked, the code inside the function block is run, and any return value is computed and passed back to the caller.JavaScriptfun
3 min read
JavaScript Function() Constructor
The JavaScript Function() constructor is used to create new function objects dynamically. By using the Function() constructor with the new operator, developers can define functions on the fly, passing the function body as a string. This allows for greater flexibility in situations where functions ne
2 min read
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
JavaScript Function displayName Property
The Function.displayName property in JavaScript is used to set the display name of the function. If the displayName property is used to log the name without setting the displayName property of the function then the output will be undefined. Syntax: function.displayName = name Return Value: It return
2 min read
Explain invoking function in JavaScript
In this article, we will learn about invoking the function in Javascript, along with understanding its implementation through examples. Function Invoking is a process to execute the code inside the function when some argument is passed to invoke it. You can invoke a function multiple times by declar
2 min read
Underscore.js _.bind() Function
Underscore.js _.bind() function is used to bind a function to an object. When the function is called, the value of this will be the object. Syntax:_.bind(function, object, *arguments);Parameters:function: This parameter holds the function that needs to be executed. object: This parameter holds the o
2 min read