eslint/docs/rules/no-invalid-this.md

   1 # Disallow `this` keywords outside of classes or class-like objects. (no-invalid-this)
   2
   3 Under the strict mode, `this` keywords outside of classes or class-like objects might be `undefined` and raise a `TypeError`.
   4
   5 ## Rule Details
   6
   7 This rule aims to flag usage of `this` keywords outside of classes or class-like objects.
   8
   9 Basically, this rule checks whether or not a function containing `this` keyword is a constructor or a method.
  10
  11 This rule judges from following conditions whether or not the function is a constructor:
  12
  13 * The name of the function starts with uppercase.
  14 * The function is assigned to a variable which starts with an uppercase letter.
  15 * The function is a constructor of ES2015 Classes.
  16
  17 This rule judges from following conditions whether or not the function is a method:
  18
  19 * The function is on an object literal.
  20 * The function is assigned to a property.
  21 * The function is a method/getter/setter of ES2015 Classes.
  22
  23 And this rule allows `this` keywords in functions below:
  24
  25 * The `call/apply/bind` method of the function is called directly.
  26 * The function is a callback of array methods (such as `.forEach()`) if `thisArg` is given.
  27 * The function has `@this` tag in its JSDoc comment.
  28
  29 And this rule always allows `this` keywords in the following contexts:
  30
  31 * In class field initializers.
  32 * In class static blocks.
  33
  34 Otherwise are considered problems.
  35
  36 This rule applies **only** in strict mode.
  37 With `"parserOptions": { "sourceType": "module" }` in the ESLint configuration, your code is in strict mode even without a `"use strict"` directive.
  38
  39 Examples of **incorrect** code for this rule in strict mode:
  40
  41 ```js
  42 /*eslint no-invalid-this: "error"*/
  43 /*eslint-env es6*/
  44
  45 "use strict";
  46
  47 this.a = 0;
  48 baz(() => this);
  49
  50 (function() {
  51     this.a = 0;
  52     baz(() => this);
  53 })();
  54
  55 function foo() {
  56     this.a = 0;
  57     baz(() => this);
  58 }
  59
  60 var foo = function() {
  61     this.a = 0;
  62     baz(() => this);
  63 };
  64
  65 foo(function() {
  66     this.a = 0;
  67     baz(() => this);
  68 });
  69
  70 obj.foo = () => {
  71     // `this` of arrow functions is the outer scope's.
  72     this.a = 0;
  73 };
  74
  75 var obj = {
  76     aaa: function() {
  77         return function foo() {
  78             // There is in a method `aaa`, but `foo` is not a method.
  79             this.a = 0;
  80             baz(() => this);
  81         };
  82     }
  83 };
  84
  85 foo.forEach(function() {
  86     this.a = 0;
  87     baz(() => this);
  88 });
  89 ```
  90
  91 Examples of **correct** code for this rule in strict mode:
  92
  93 ```js
  94 /*eslint no-invalid-this: "error"*/
  95 /*eslint-env es6*/
  96
  97 "use strict";
  98
  99 function Foo() {
 100     // OK, this is in a legacy style constructor.
 101     this.a = 0;
 102     baz(() => this);
 103 }
 104
 105 class Foo {
 106     constructor() {
 107         // OK, this is in a constructor.
 108         this.a = 0;
 109         baz(() => this);
 110     }
 111 }
 112
 113 var obj = {
 114     foo: function foo() {
 115         // OK, this is in a method (this function is on object literal).
 116         this.a = 0;
 117     }
 118 };
 119
 120 var obj = {
 121     foo() {
 122         // OK, this is in a method (this function is on object literal).
 123         this.a = 0;
 124     }
 125 };
 126
 127 var obj = {
 128     get foo() {
 129         // OK, this is in a method (this function is on object literal).
 130         return this.a;
 131     }
 132 };
 133
 134 var obj = Object.create(null, {
 135     foo: {value: function foo() {
 136         // OK, this is in a method (this function is on object literal).
 137         this.a = 0;
 138     }}
 139 });
 140
 141 Object.defineProperty(obj, "foo", {
 142     value: function foo() {
 143         // OK, this is in a method (this function is on object literal).
 144         this.a = 0;
 145     }
 146 });
 147
 148 Object.defineProperties(obj, {
 149     foo: {value: function foo() {
 150         // OK, this is in a method (this function is on object literal).
 151         this.a = 0;
 152     }}
 153 });
 154
 155 function Foo() {
 156     this.foo = function foo() {
 157         // OK, this is in a method (this function assigns to a property).
 158         this.a = 0;
 159         baz(() => this);
 160     };
 161 }
 162
 163 obj.foo = function foo() {
 164     // OK, this is in a method (this function assigns to a property).
 165     this.a = 0;
 166 };
 167
 168 Foo.prototype.foo = function foo() {
 169     // OK, this is in a method (this function assigns to a property).
 170     this.a = 0;
 171 };
 172
 173 class Foo {
 174
 175     // OK, this is in a class field initializer.
 176     a = this.b;
 177
 178     // OK, static initializers also have valid this.
 179     static a = this.b;
 180
 181     foo() {
 182         // OK, this is in a method.
 183         this.a = 0;
 184         baz(() => this);
 185     }
 186
 187     static foo() {
 188         // OK, this is in a method (static methods also have valid this).
 189         this.a = 0;
 190         baz(() => this);
 191     }
 192
 193     static {
 194         // OK, static blocks also have valid this.
 195         this.a = 0;
 196         baz(() => this);
 197     }
 198 }
 199
 200 var foo = (function foo() {
 201     // OK, the `bind` method of this function is called directly.
 202     this.a = 0;
 203 }).bind(obj);
 204
 205 foo.forEach(function() {
 206     // OK, `thisArg` of `.forEach()` is given.
 207     this.a = 0;
 208     baz(() => this);
 209 }, thisArg);
 210
 211 /** @this Foo */
 212 function foo() {
 213     // OK, this function has a `@this` tag in its JSDoc comment.
 214     this.a = 0;
 215 }
 216 ```
 217
 218 ## Options
 219
 220 This rule has an object option, with one option:
 221
 222 * `"capIsConstructor": false` (default `true`) disables the assumption that a function which name starts with an uppercase is a constructor.
 223
 224 ### capIsConstructor
 225
 226 By default, this rule always allows the use of `this` in functions which name starts with an uppercase and anonymous functions that are assigned to a variable which name starts with an uppercase, assuming that those functions are used as constructor functions.
 227
 228 Set `"capIsConstructor"` to `false` if you want those functions to be treated as 'regular' functions.
 229
 230 Examples of **incorrect** code for this rule with `"capIsConstructor"` option set to `false`:
 231
 232 ```js
 233 /*eslint no-invalid-this: ["error", { "capIsConstructor": false }]*/
 234
 235 "use strict";
 236
 237 function Foo() {
 238     this.a = 0;
 239 }
 240
 241 var bar = function Foo() {
 242     this.a = 0;
 243 }
 244
 245 var Bar = function() {
 246     this.a = 0;
 247 };
 248
 249 Baz = function() {
 250     this.a = 0;
 251 };
 252 ```
 253
 254 Examples of **correct** code for this rule with `"capIsConstructor"` option set to `false`:
 255
 256 ```js
 257 /*eslint no-invalid-this: ["error", { "capIsConstructor": false }]*/
 258
 259 "use strict";
 260
 261 obj.Foo = function Foo() {
 262     // OK, this is in a method.
 263     this.a = 0;
 264 };
 265 ```
 266
 267 ## When Not To Use It
 268
 269 If you don't want to be notified about usage of `this` keyword outside of classes or class-like objects, you can safely disable this rule.