JavaScript Function Binding

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.

const person = {
    name: 'GFG',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
const greet = person.greet;
greet(); 

Hello, undefined

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.

const person = {
    name: 'GFG',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
const greet = person.greet;
const boundGreet = greet.bind(person);
boundGreet(); 

Hello, GFG

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.

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'); 

Hello, 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).

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']); 

Hello, 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.

const person = {
    name: 'GFG',
    greet: function() {
        const arrowGreet = () => {
            console.log('Hello, ' + this.name); 
        };
        arrowGreet();
    }
};
person.greet();

Hello, GFG

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.

Suggested Quiz

6 Questions

In JavaScript, what does the bind() method primarily accomplish?

• A
  It creates a new function with a specific 'this' context.
• B
  It immediately invokes a function with a specified context.
• C
  It allows functions to be called with an array of arguments.
• D
  It modifies the original function to change its context.

Explanation:

What is the behavior of 'this' in a regular function compared to an arrow function in JavaScript?

• A
  Regular functions have their own 'this', while arrow functions do not.
• B
  Both regular and arrow functions have their own 'this'.
• C
  'this' in regular functions is always the global object.
• D
  Arrow functions cannot use 'this' at all.

Explanation:

What is the primary difference between the call() and apply() methods in JavaScript?

• A
  call() passes arguments as an array, while apply() takes them individually.
• B
  apply() passes arguments as an array, while call() takes them individually.
• C
  call() can only be used with methods, while apply() can be used with any function.
• D
  There is no difference; they are interchangeable.

Explanation:

When a function is invoked without a context, what does 'this' refer to in non-strict mode?

• A
  It refers to the function itself.
• B
  It refers to undefined.
• C
  It refers to the global object.
• D
  It throws an error.

Explanation:

What will be the output of a method that uses the apply() method to invoke a function with arguments passed as an array?

• A
  It will throw an error if the number of arguments does not match.
• B
  It will execute the function with the provided arguments correctly.
• C
  It will ignore the arguments and execute the function with default values.
• D
  It will execute the function but will not bind 'this' context.

Explanation:

How does partial application relate to function binding in JavaScript?

• A
  It allows binding of multiple contexts to a function.
• B
  It enables pre-filling some arguments for a function.
• C
  It modifies the original function to accept fewer arguments.
• D
  It creates a new function without any arguments.

Explanation:

Quiz Completed Successfully

Your Score :   2/6

Accuracy :  0%

Login to View Explanation

1/6 1/6 < Previous Next >