---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noThisInStatic
description: Learn more about noThisInStatic
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="JavaScript (and super languages)" icon="seti:javascript">
## Summary
- Rule available since: `v1.3.1`
- Diagnostic Category: [`lint/complexity/noThisInStatic`](/reference/diagnostics#diagnostic-category)
- This rule is **recommended**, meaning it is enabled by default.
- This rule has a [**safe**](/linter/#safe-fixes) fix.
- The default severity of this rule is [**warning**](/reference/diagnostics#warning).
- Sources: 
  - Same as [`@mysticatea/no-this-in-static`](https://github.com/mysticatea/eslint-plugin/blob/master/docs/rules/no-this-in-static.md)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"complexity": {
				"noThisInStatic": "error"
			}
		}
	}
}

```
## Description
Disallow `this` and `super` in `static` contexts.

In JavaScript, the `this` keyword in static contexts refers to the class (the constructor) instance,
not an instance of the class. This can be confusing for developers coming from other languages where
`this` typically refers to an instance of the class, not the class itself.

Similarly, `super` in static contexts refers to the parent class, not an instance of the class.
This can lead to unexpected behavior if not properly understood.

This rule enforces the use of the class name itself to access static methods,
which can make the code clearer and less prone to errors. It helps to prevent
misunderstandings and bugs that can arise from the unique behavior of `this` and `super` in static contexts.

## Example

### Invalid

```js
 class A {
    static CONSTANT = 0;

    static foo() {
        this.CONSTANT;
    }
 }
```

<pre class="language-text"><code class="language-text">code-block.js:5:9 <a href="https://biomejs.dev/linter/rules/no-this-in-static">lint/complexity/noThisInStatic</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Using </span><span style="color: Orange;"><strong>this</strong></span><span style="color: Orange;"> in a </span><span style="color: Orange;"><strong>static</strong></span><span style="color: Orange;"> context can be confusing.</span><br />  <br />    <strong>4 │ </strong>    static foo() &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>5 │ </strong>        this.CONSTANT;<br />   <strong>   │ </strong>        <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>6 │ </strong>    &#125;<br />    <strong>7 │ </strong> &#125;<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>this</strong></span><span style="color: lightgreen;"> refers to the class.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Use the class name instead.</span><br />  <br />    <strong>3</strong> <strong>3</strong><strong> │ </strong>  <br />    <strong>4</strong> <strong>4</strong><strong> │ </strong>      static foo() &#123;<br />    <strong>5</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>h</strong></span><span style="color: Tomato;"><strong>i</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;">.</span><span style="color: Tomato;">C</span><span style="color: Tomato;">O</span><span style="color: Tomato;">N</span><span style="color: Tomato;">S</span><span style="color: Tomato;">T</span><span style="color: Tomato;">A</span><span style="color: Tomato;">N</span><span style="color: Tomato;">T</span><span style="color: Tomato;">;</span><br />      <strong>5</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><strong>A</strong></span><span style="color: MediumSeaGreen;">.</span><span style="color: MediumSeaGreen;">C</span><span style="color: MediumSeaGreen;">O</span><span style="color: MediumSeaGreen;">N</span><span style="color: MediumSeaGreen;">S</span><span style="color: MediumSeaGreen;">T</span><span style="color: MediumSeaGreen;">A</span><span style="color: MediumSeaGreen;">N</span><span style="color: MediumSeaGreen;">T</span><span style="color: MediumSeaGreen;">;</span><br />    <strong>6</strong> <strong>6</strong><strong> │ </strong>      &#125;<br />    <strong>7</strong> <strong>7</strong><strong> │ </strong>   &#125;<br />  <br /></code></pre>

```js
 class B extends A {
    static bar() {
        super.CONSTANT;
    }
 }
```

<pre class="language-text"><code class="language-text">code-block.js:3:9 <a href="https://biomejs.dev/linter/rules/no-this-in-static">lint/complexity/noThisInStatic</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Using </span><span style="color: Orange;"><strong>super</strong></span><span style="color: Orange;"> in a </span><span style="color: Orange;"><strong>static</strong></span><span style="color: Orange;"> context can be confusing.</span><br />  <br />    <strong>1 │ </strong> class B extends A &#123;<br />    <strong>2 │ </strong>    static bar() &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong>        super.CONSTANT;<br />   <strong>   │ </strong>        <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>4 │ </strong>    &#125;<br />    <strong>5 │ </strong> &#125;<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>super</strong></span><span style="color: lightgreen;"> refers to a parent class.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Use the class name instead.</span><br />  <br />    <strong>1</strong> <strong>1</strong><strong> │ </strong>   class B extends A &#123;<br />    <strong>2</strong> <strong>2</strong><strong> │ </strong>      static bar() &#123;<br />    <strong>3</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><strong>u</strong></span><span style="color: Tomato;"><strong>p</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;">.</span><span style="color: Tomato;">C</span><span style="color: Tomato;">O</span><span style="color: Tomato;">N</span><span style="color: Tomato;">S</span><span style="color: Tomato;">T</span><span style="color: Tomato;">A</span><span style="color: Tomato;">N</span><span style="color: Tomato;">T</span><span style="color: Tomato;">;</span><br />      <strong>3</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><strong>A</strong></span><span style="color: MediumSeaGreen;">.</span><span style="color: MediumSeaGreen;">C</span><span style="color: MediumSeaGreen;">O</span><span style="color: MediumSeaGreen;">N</span><span style="color: MediumSeaGreen;">S</span><span style="color: MediumSeaGreen;">T</span><span style="color: MediumSeaGreen;">A</span><span style="color: MediumSeaGreen;">N</span><span style="color: MediumSeaGreen;">T</span><span style="color: MediumSeaGreen;">;</span><br />    <strong>4</strong> <strong>4</strong><strong> │ </strong>      &#125;<br />    <strong>5</strong> <strong>5</strong><strong> │ </strong>   &#125;<br />  <br /></code></pre>

### Valid

```js
class B extends A {
    static ANOTHER_CONSTANT = A.CONSTANT + 1;

    static foo() {
        A.CONSTANT;
        B.ANOTHER_CONSTANT;
    }

    bar() {
        this.property;
    }
}
```

```js
class A {
   static foo() {
       doSomething()
   }

   bar() {
     A.foo()
   }
}
```

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/complexity/no_this_in_static.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/complexity/noThisInStatic)

</TabItem>
</Tabs>