How to prevent context modification in JavaScript…

In JavaScript, the execution context of a function (the value of this) is determined dynamically at the moment of invocation. It is not possible to completely prevent its change in an absolute sense, but you can control or fix the context using various methods:

Methods call, apply, bind:
- call and apply allow you to invoke a function with an explicitly specified context and arguments (separately in call, as an array in apply).
- bind creates a new bound function, where this is fixed to a specified value at the time of creation, regardless of subsequent calls. This is the most effective way to "prevent" the change of context for future calls.
```
// Example with bind
const obj = { value: 42 };
function showValue() {
  console.log(this.value);
}

const boundShowValue = showValue.bind(obj);

boundShowValue(); // Outputs 42
boundShowValue.call({ value: 100 }); // Still outputs 42, context is fixed
```

Arrow functions:

Arrow functions do not have their own this. They capture this from the surrounding (lexical) scope at the time of their definition.
The context of an arrow function cannot be changed using call, apply, or bind.

// Example with arrow function
const outerObj = { name: 'Outer' };

class MyClass {
  constructor() {
    this.className = 'MyClass';
    this.showNameArrow = () => {
      // this here captures this from the constructor or the scope where MyClass is defined
      console.log(this.className);
    };
  }

  showNameRegular() {
    // this here is determined at call time
    console.log(this.className);
  }
}

const instance = new MyClass();
instance.showNameArrow(); // Outputs 'MyClass'

const anotherObj = { className: 'Another' };
const boundArrow = instance.showNameArrow.bind(anotherObj); // Attempt to change context
boundArrow(); // Still outputs 'MyClass', arrow function context is immutable

instance.showNameRegular.call(anotherObj); // Outputs 'Another', regular function context can be changed

Thus, "preventing the change of context" is best understood as strictly fixing the context. For this, bind is used for regular functions and natural lexical binding for arrow functions. Arrow functions are more "immutable" in this regard.

How to prevent context modification in JavaScript?