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

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