Most beginners find this confusing because it is decided at call time.
Direct answer
In JavaScript, this refers to the object that calls the function. In a method call it is the object before the dot. In a regular function in strict mode it is undefined. Arrow functions do not have their own this, they use the one from where they were written.
The main cases
const person = {
name: "Ada",
greet() {
console.log(this.name);
},
};
person.greet(); // Ada
const fn = person.greet;
fn(); // this is not person here
Fixes
const bound = person.greet.bind(person);
bound(); // Ada
Arrow functions inherit this:
const timer = {
seconds: 0,
start() {
setInterval(() => {
this.seconds++;
}, 1000);
},
};
Quick rules
obj.method()meansthisisobj.new Fn()meansthisis the new object.- Arrow functions use outer
this. call,applyandbindsetthisexplicitly.
Where Teyro fits
Teyro's JavaScript for Beginners course turns this into short lessons you can play in a few minutes a day. It has 50 lessons, and you can start free.
The bottom line
Look at how a function is called, not where it is written, except for arrow functions.
