eslint/docs/src/rules/class-methods-use-this.md

   1 ---
   2 title: class-methods-use-this
   3 rule_type: suggestion
   4 further_reading:
   5 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
   6 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static
   7 ---
   8
   9
  10 If a class method does not use `this`, it can *sometimes* be made into a static function. If you do convert the method into a static function, instances of the class that call that particular method have to be converted to a static call as well (`MyClass.callStaticMethod()`)
  11
  12 It's possible to have a class method which doesn't use `this`, such as:
  13
  14 ```js
  15 class A {
  16     constructor() {
  17         this.a = "hi";
  18     }
  19
  20     print() {
  21         console.log(this.a);
  22     }
  23
  24     sayHi() {
  25         console.log("hi");
  26     }
  27 }
  28
  29 let a = new A();
  30 a.sayHi(); // => "hi"
  31 ```
  32
  33 In the example above, the `sayHi` method doesn't use `this`, so we can make it a static method:
  34
  35 ```js
  36 class A {
  37     constructor() {
  38         this.a = "hi";
  39     }
  40
  41     print() {
  42         console.log(this.a);
  43     }
  44
  45     static sayHi() {
  46         console.log("hi");
  47     }
  48 }
  49
  50 A.sayHi(); // => "hi"
  51 ```
  52
  53 Also note in the above examples that if you switch a method to a static method, *instances* of the class that call the static method (`let a = new A(); a.sayHi();`) have to be updated to being a static call (`A.sayHi();`) instead of having the instance of the *class* call the method
  54
  55 ## Rule Details
  56
  57 This rule is aimed to flag class methods that do not use `this`.
  58
  59 Examples of **incorrect** code for this rule:
  60
  61 ::: incorrect
  62
  63 ```js
  64 /*eslint class-methods-use-this: "error"*/
  65 /*eslint-env es6*/
  66
  67 class A {
  68     foo() {
  69         console.log("Hello World");     /*error Expected 'this' to be used by class method 'foo'.*/
  70     }
  71 }
  72 ```
  73
  74 :::
  75
  76 Examples of **correct** code for this rule:
  77
  78 ::: correct
  79
  80 ```js
  81 /*eslint class-methods-use-this: "error"*/
  82 /*eslint-env es6*/
  83 class A {
  84     foo() {
  85         this.bar = "Hello World"; // OK, this is used
  86     }
  87 }
  88
  89 class A {
  90     constructor() {
  91         // OK. constructor is exempt
  92     }
  93 }
  94
  95 class A {
  96     static foo() {
  97         // OK. static methods aren't expected to use this.
  98     }
  99
 100     static {
 101         // OK. static blocks are exempt.
 102     }
 103 }
 104 ```
 105
 106 :::
 107
 108 ## Options
 109
 110 This rule has two options:
 111
 112 * `"exceptMethods"` allows specified method names to be ignored with this rule.
 113 * `"enforceForClassFields"` enforces that functions used as instance field initializers utilize `this`. (default: `true`)
 114
 115 ### exceptMethods
 116
 117 ```js
 118 "class-methods-use-this": [<enabled>, { "exceptMethods": [<...exceptions>] }]
 119 ```
 120
 121 The `"exceptMethods"` option allows you to pass an array of method names for which you would like to ignore warnings. For example, you might have a spec from an external library that requires you to overwrite a method as a regular function (and not as a static method) and does not use `this` inside the function body. In this case, you can add that method to ignore in the warnings.
 122
 123 Examples of **incorrect** code for this rule when used without `"exceptMethods"`:
 124
 125 ::: incorrect
 126
 127 ```js
 128 /*eslint class-methods-use-this: "error"*/
 129
 130 class A {
 131     foo() {
 132     }
 133 }
 134 ```
 135
 136 :::
 137
 138 Examples of **correct** code for this rule when used with exceptMethods:
 139
 140 ::: correct
 141
 142 ```js
 143 /*eslint class-methods-use-this: ["error", { "exceptMethods": ["foo", "#bar"] }] */
 144
 145 class A {
 146     foo() {
 147     }
 148     #bar() {
 149     }
 150 }
 151 ```
 152
 153 :::
 154
 155 ### enforceForClassFields
 156
 157 ```js
 158 "class-methods-use-this": [<enabled>, { "enforceForClassFields": true | false }]
 159 ```
 160
 161 The `enforceForClassFields` option enforces that arrow functions and function expressions used as instance field initializers utilize `this`. (default: `true`)
 162
 163 Examples of **incorrect** code for this rule with the `{ "enforceForClassFields": true }` option (default):
 164
 165 ::: incorrect
 166
 167 ```js
 168 /*eslint class-methods-use-this: ["error", { "enforceForClassFields": true }] */
 169
 170 class A {
 171     foo = () => {}
 172 }
 173 ```
 174
 175 :::
 176
 177 Examples of **correct** code for this rule with the `{ "enforceForClassFields": true }` option (default):
 178
 179 ::: correct
 180
 181 ```js
 182 /*eslint class-methods-use-this: ["error", { "enforceForClassFields": true }] */
 183
 184 class A {
 185     foo = () => {this;}
 186 }
 187 ```
 188
 189 :::
 190
 191 Examples of **correct** code for this rule with the `{ "enforceForClassFields": false }` option:
 192
 193 ::: correct
 194
 195 ```js
 196 /*eslint class-methods-use-this: ["error", { "enforceForClassFields": false }] */
 197
 198 class A {
 199     foo = () => {}
 200 }
 201 ```
 202
 203 :::