This 😭
The this keyword can lead to some headaches in JavaScript - this blog hopefully acts as a remedy.
this refers to different things, depending on where it's used and how (if used in a function) a function is called !
Generally, this refers to the "thing" which called a function. That can be the global context, an object or some bound data/ object (e.g. when the browser binds this to the button that triggered a click event).
1) this in Global Context (i.e. outside of any function)
function something() { ... }
console.log(this);
// logs global object (window in browser) - ALWAYS (also in strict mode)! 🙌
2) this in a Function (non-Arrow) - Called in the global context
function something() {
console.log(this);
}
something();
// logs global object (window in browser) in non-strict mode, undefined in strict mode 🙌
3) this in an Arrow-Function - Called in the global context
const something = () => {
console.log(this);
}
something();
// logs global object (window in browser) - ALWAYS (also in strict mode)! 🙌
4) this in a Method (non-Arrow) - Called on an object
const person = {
name: 'Mayank',
greet: function() { // or use method shorthand: greet() { ... }
console.log(this.name);
}
};
person.greet();
// logs 'Max', "this" refers to the person object 🙌
5) this in a Method (Arrow Function) - Called on an object
const person = {
name: 'Max',
greet: () => {
console.log(this.name);
}
};
person.greet();
// logs nothing (or some global name on window object), "this" refers to global (window) object, even in strict mode 🙌
If in doubt, a console.log(this); can always help you find out what this is referring to at the moment!
HAPPY CODING 👨💻
Top comments (2)
thats why we should NEVER use plain JS for Enterprise Apps.
Use proven JS frameworks with TypeScript instead
I agree 😭🙌