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. (excepts static methods)
  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 Otherwise are considered problems.
  30
  31 This rule applies **only** in strict mode.
  32 With `"parserOptions": { "sourceType": "module" }` in the ESLint configuration, your code is in strict mode even without a `"use strict"` directive.
  33
  34 Examples of **incorrect** code for this rule in strict mode:
  35
  36 ```js
  37 /*eslint no-invalid-this: "error"*/
  38 /*eslint-env es6*/
  39
  40 "use strict";
  41
  42 this.a = 0;
  43 baz(() => this);
  44
  45 (function() {
  46     this.a = 0;
  47     baz(() => this);
  48 })();
  49
  50 function foo() {
  51     this.a = 0;
  52     baz(() => this);
  53 }
  54
  55 var foo = function() {
  56     this.a = 0;
  57     baz(() => this);
  58 };
  59
  60 foo(function() {
  61     this.a = 0;
  62     baz(() => this);
  63 });
  64
  65 obj.foo = () => {
  66     // `this` of arrow functions is the outer scope's.
  67     this.a = 0;
  68 };
  69
  70 var obj = {
  71     aaa: function() {
  72         return function foo() {
  73             // There is in a method `aaa`, but `foo` is not a method.
  74             this.a = 0;
  75             baz(() => this);
  76         };
  77     }
  78 };
  79
  80 foo.forEach(function() {
  81     this.a = 0;
  82     baz(() => this);
  83 });
  84 ```
  85
  86 Examples of **correct** code for this rule in strict mode:
  87
  88 ```js
  89 /*eslint no-invalid-this: "error"*/
  90 /*eslint-env es6*/
  91
  92 "use strict";
  93
  94 function Foo() {
  95     // OK, this is in a legacy style constructor.
  96     this.a = 0;
  97     baz(() => this);
  98 }
  99
 100 class Foo {
 101     constructor() {
 102         // OK, this is in a constructor.
 103         this.a = 0;
 104         baz(() => this);
 105     }
 106 }
 107
 108 var obj = {
 109     foo: function foo() {
 110         // OK, this is in a method (this function is on object literal).
 111         this.a = 0;
 112     }
 113 };
 114
 115 var obj = {
 116     foo() {
 117         // OK, this is in a method (this function is on object literal).
 118         this.a = 0;
 119     }
 120 };
 121
 122 var obj = {
 123     get foo() {
 124         // OK, this is in a method (this function is on object literal).
 125         return this.a;
 126     }
 127 };
 128
 129 var obj = Object.create(null, {
 130     foo: {value: function foo() {
 131         // OK, this is in a method (this function is on object literal).
 132         this.a = 0;
 133     }}
 134 });
 135
 136 Object.defineProperty(obj, "foo", {
 137     value: function foo() {
 138         // OK, this is in a method (this function is on object literal).
 139         this.a = 0;
 140     }
 141 });
 142
 143 Object.defineProperties(obj, {
 144     foo: {value: function foo() {
 145         // OK, this is in a method (this function is on object literal).
 146         this.a = 0;
 147     }}
 148 });
 149
 150 function Foo() {
 151     this.foo = function foo() {
 152         // OK, this is in a method (this function assigns to a property).
 153         this.a = 0;
 154         baz(() => this);
 155     };
 156 }
 157
 158 obj.foo = function foo() {
 159     // OK, this is in a method (this function assigns to a property).
 160     this.a = 0;
 161 };
 162
 163 Foo.prototype.foo = function foo() {
 164     // OK, this is in a method (this function assigns to a property).
 165     this.a = 0;
 166 };
 167
 168 class Foo {
 169     foo() {
 170         // OK, this is in a method.
 171         this.a = 0;
 172         baz(() => this);
 173     }
 174
 175     static foo() {
 176         // OK, this is in a method (static methods also have valid this).
 177         this.a = 0;
 178         baz(() => this);
 179     }
 180 }
 181
 182 var foo = (function foo() {
 183     // OK, the `bind` method of this function is called directly.
 184     this.a = 0;
 185 }).bind(obj);
 186
 187 foo.forEach(function() {
 188     // OK, `thisArg` of `.forEach()` is given.
 189     this.a = 0;
 190     baz(() => this);
 191 }, thisArg);
 192
 193 /** @this Foo */
 194 function foo() {
 195     // OK, this function has a `@this` tag in its JSDoc comment.
 196     this.a = 0;
 197 }
 198 ```
 199
 200 ## Options
 201
 202 This rule has an object option, with one option:
 203
 204 * `"capIsConstructor": false` (default `true`) disables the assumption that a function which name starts with an uppercase is a constructor.
 205
 206 ### capIsConstructor
 207
 208 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.
 209
 210 Set `"capIsConstructor"` to `false` if you want those functions to be treated as 'regular' functions.
 211
 212 Examples of **incorrect** code for this rule with `"capIsConstructor"` option set to `false`:
 213
 214 ```js
 215 /*eslint no-invalid-this: ["error", { "capIsConstructor": false }]*/
 216
 217 "use strict";
 218
 219 function Foo() {
 220     this.a = 0;
 221 }
 222
 223 var bar = function Foo() {
 224     this.a = 0;
 225 }
 226
 227 var Bar = function() {
 228     this.a = 0;
 229 };
 230
 231 Baz = function() {
 232     this.a = 0;
 233 };
 234 ```
 235
 236 Examples of **correct** code for this rule with `"capIsConstructor"` option set to `false`:
 237
 238 ```js
 239 /*eslint no-invalid-this: ["error", { "capIsConstructor": false }]*/
 240
 241 "use strict";
 242
 243 obj.Foo = function Foo() {
 244     // OK, this is in a method.
 245     this.a = 0;
 246 };
 247 ```
 248
 249 ## When Not To Use It
 250
 251 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.