How can the execution context of a function be changed in JavaScript?

The execution context of a function (this value) in JavaScript can be changed in several ways:

• Methods call(), apply(), bind()
• Using arrow functions
• Saving the context in a variable

Methods call(), apply(), and bind()

These methods allow explicitly setting the this value for the called function.

// Example of using call()
function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };
greet.call(person, 'Hello', '!'); // Outputs: Hello, Alice!

// Example of using apply()
function sum(a, b) {
  console.log(this.prefix + (a + b));
}

const context = { prefix: 'Sum: ' };
sum.apply(context, [10, 20]); // Outputs: Sum: 30

// Example of using bind()
const boundGreet = greet.bind(person, 'Good morning');
boundGreet('?'); // Outputs: Good morning, Alice?

Differences between call(), apply(), and bind():

Method	Description	Arguments	Return value
call()	Calls a function with a specified this value and individual arguments.	First argument - this value, remaining arguments are passed to the function separately.	Result of the function execution.
apply()	Calls a function with a specified this value and arguments as an array.	First argument - this value, second argument - array or pseudo-array of arguments for the function.	Result of the function execution.
bind()	Creates a new function that, when called, has its this set to the provided value.	First argument - this value, remaining arguments become prefixes for the arguments of the created function.	New function with bound context.

Using arrow functions

Arrow functions do not have their own this. They capture this from the lexical scope where they were declared.

// Example with arrow function
const obj = {
  name: 'Bob',
  sayHello: function() {
    const innerFunction = () => {
      console.log('Hello, ' + this.name); // `this` refers to `obj`
    };
    innerFunction();
  }
};

obj.sayHello(); // Outputs: Hello, Bob

Saving context in a variable

Before arrow functions, a common pattern was to save the context in a separate variable (e.g., that or self).

// Example of saving context in a variable
const anotherObj = {
  name: 'Charlie',
  sayHi: function() {
    const self = this; // Save context in `self`
    setTimeout(function() {
      console.log('Hello, ' + self.name); // Use saved context
    }, 100);
  }
};

anotherObj.sayHi(); // Outputs: Hello, Charlie (after 100ms)