no-this-alias
Recommended
Disallows assigning variables to this
.
Disallows assigning variables to this
.
In most cases, storing a reference to this
in a variable could be avoided by
using arrow functions properly, since they establish this
based on the scope
where the arrow function is defined.
Let's take a look at a concrete example:
const obj = {
count: 0,
doSomethingLater() {
setTimeout(function () { // this function executes on the global scope; `this` evalutes to `globalThis`
this.count++;
console.log(this.count);
}, 300);
},
};
obj.doSomethingLater();
// `NaN` is printed, because the property `count` is not in the global scope.
In the above example, this
in the function passed to setTimeout
evaluates to
globalThis
, which results in the expected value 1
not being printed.
If you wanted to work around it without arrow functions, you would store a
reference to this
in another variable:
const obj = {
count: 0,
doSomethingLater() {
const self = this; // store a reference to `this` in `self`
setTimeout(function () {
// use `self` instead of `this`
self.count++;
console.log(self.count);
}, 300);
},
};
obj.doSomethingLater();
// `1` is printed as expected
But in this case arrow functions come in handy. With arrow functions, the code becomes way clearer and easier to understand:
const obj = {
count: 0,
doSomethingLater() {
setTimeout(() => { // pass an arrow function
// `this` evaluates to `obj` here
this.count++;
console.log(this.count);
}, 300);
},
};
obj.doSomethingLater();
// `1` is printed as expected
This example is taken from MDN.
Invalid:
const self = this;
function foo() {
const self = this;
}
const bar = () => {
const self = this;
};
Valid:
const self = "this";
const [foo] = this;