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

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