Why is this an issue?

The value of this depends on which context it appears:

• Function: The value of this will depend on how a function was called. The value of this is not always the object that has the function as an own property, but the object that is used to call the function. The methods Function.prototype.call(), Function.prototype.apply(), or Reflect.apply() can be used to explicitly set the value of this. Is it also possible to create a new function with a specific value of this that doesn’t change regardless of how the function is called with Function.prototype.bind(). In non-strict mode, this will always be an object and will default to globalThis if set to undefined or null.
• Arrow function: The value of this will be the same as the enclosing context. Arrow functions will not create a new this binding. When invoking arrow functions using call(), bind(), or apply(), the thisArg parameter is ignored.
• Class: Class methods behave like methods in other objects: the this value is the object that the method was accessed on. If the method is not transferred to another object, this is generally an instance of the class. However, for static methods, the value of this is the class instead of the instance.
• Global: outside of any functions or classes (also inside blocks or arrow functions defined in the global scope), the value of this depends on what execution context the script runs in.

When a function is called without an explicit object context, the this keyword refers to the global object. This also applies when it is used outside of an object or function. The global this object refers to the global context in which the JavaScript code is executed. This can cause problems when the code is executed in different contexts, such as in a browser or in a Node.js environment, where the global object is different. Such uses could confuse maintainers as the actual value depends on the execution context, and it can be unclear what object the this keyword is referring to.

In JavaScript’s "strict mode", using this in the global context will always be undefined.

this.foo = 1;   // Noncompliant: 'this' refers to global 'this'
console.log(this.foo); // Noncompliant: 'this' refers to global 'this'

function MyObj() {
  this.foo = 1; // Compliant
}

MyObj.func1 = function() {
  if (this.foo === 1) { // Compliant
    // ...
  }
}

Instead, simply drop the this, or replace it with globalThis. The globalThis global property gives access to the global object regardless of the current environment.

foo = 1;
console.log(foo);

function MyObj() {
  this.foo = 1;
}

MyObj.func1 = function() {
  if (this.foo === 1) {
    // ...
  }
}

Resources

Documentation

• MDN web docs - this
• MDN web docs - No this substitution
• MDN web docs - globalThis
• MDN web docs - Global object
• MDN web docs - Strict mode
• MDN web docs - Reflect.apply()
• MDN web docs - Function.prototype.call()
• MDN web docs - Function.prototype.apply()
• MDN web docs - Function.prototype.bind()