noInvalidThis (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noInvalidThis
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as no-invalid-this

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noInvalidThis": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow this in places where it is undefined.

Inside a function, the value of this depends on how the function is called. When the function is called as a method, as in obj.foo(), this is obj. When it’s called on its own, as in foo(), this is undefined in modules and classes. At the top level of a module, this is always undefined. Reading a property of undefined throws an error, so using this in these places is usually a mistake.

This rule reports this at the top level of a module and in functions that are unlikely to be called as a method. It allows this in:

class members and object methods;
functions assigned to an object property, such as obj.foo = function () {};
functions whose name starts with an uppercase letter, and functions without a name that are assigned to a variable whose name starts with an uppercase letter, because they’re likely constructors called with new;
functions called with .call(), .apply(), or .bind() and an object to use as this, such as (function () {}).call(obj);
functions passed to Reflect.apply(), Array.from(), or array methods such as .forEach() together with an object to use as this;
functions that declare the type of this with a TypeScript this parameter, such as function foo(this: Obj) {};
functions in CommonJS files (.cjs) that don’t start with "use strict", because this is the global object there.

Arrow functions don’t have their own this. They use the this of the code around them, so the rule checks them against that code.

Examples

Invalid

1
this.a = 0;

code-block.js:1:1 lint/nursery/noInvalidThis ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected this at the top level of a module.
  
  > 1 │ this.a = 0;
      │ ^^^^
    2 │ 
  
  ℹ this is always undefined at the top level of a module.
  
  ℹ Use globalThis to refer to the global object.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
function foo() {
2
    this.a = 0;
3
}

code-block.js:2:5 lint/nursery/noInvalidThis ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected this in a function that isn't a method or a constructor.
  
    1 │ function foo() {
  > 2 │     this.a = 0;
      │     ^^^^
    3 │ }
    4 │ 
  
  ℹ When a function is called on its own instead of as a method, this is undefined, and reading its properties throws an error.
  
  ℹ Pass the value as a parameter instead, or turn the function into a method. In TypeScript, if callers provide this, declare its type with a this parameter.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
foo(function () {
2
    this.a = 0;
3
});

code-block.js:2:5 lint/nursery/noInvalidThis ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected this in a function that isn't a method or a constructor.
  
    1 │ foo(function () {
  > 2 │     this.a = 0;
      │     ^^^^
    3 │ });
    4 │ 
  
  ℹ When a function is called on its own instead of as a method, this is undefined, and reading its properties throws an error.
  
  ℹ Pass the value as a parameter instead, or turn the function into a method. In TypeScript, if callers provide this, declare its type with a this parameter.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
const foo = () => {
2
    this.a = 0;
3
};

code-block.js:2:5 lint/nursery/noInvalidThis ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected this at the top level of a module.
  
    1 │ const foo = () => {
  > 2 │     this.a = 0;
      │     ^^^^
    3 │ };
    4 │ 
  
  ℹ this is always undefined at the top level of a module.
  
  ℹ Use globalThis to refer to the global object.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
function Foo() {
2
    this.a = 0;
3
}
4

5
const Bar = function () {
6
    this.a = 0;
7
};
8

9
const obj = {
10
    foo() {
11
        this.a = 0;
12
    },
13
    bar: function () {
14
        this.a = 0;
15
    },
16
};
17

18
obj.baz = function () {
19
    this.a = 0;
20
};
21

22
class Baz {
23
    a = this;
24

25
    constructor() {
26
        this.a = 0;
27
    }
28
}
29

30
list.forEach(function () {
31
    this.a = 0;
32
}, obj);
33

34
(function () {
35
    this.a = 0;
36
}).call(obj);
37

38
function qux(this: Obj) {
39
    this.a = 0;
40
}