This – references the object that is executing the current function
- If the function is part of an object, we call that function a method.
“This” will reference that object
- if the function is a regular function
“This” will reference the global / window object
in case, like me, you’ve forgotten what an object is, Mozilla describes it as
“In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.”
Example of an Object – with a function/method:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};In the example above, this refers to the person object. Because the function is in an object
Some more notes about the This Keyword, robbed from around the web:
In general, the this references the object of which the function is a property. In other words, the this references the object that is currently calling the function.
Suppose you have an object called counter that has a method next(). When you call the next() method, you can access the this object.
let counter = {
count: 0,
next: function () {
return ++this.count;
},
};
counter.next();Inside the next() function, the this references the counter object. See the following method call:
counter.next();
Global context
In the global context, the this references the global object, which is the window object on the web browser or global object on Node.js.
This behavior is consistent in both strict and non-strict modes. Here’s the output on the web browser:
console.log(this === window); // trueCode language: JavaScript (javascript)If you assign a property to this object in the global context, JavaScript will add the property to the global object as shown in the following example:
this.color= 'Red'; console.log(window.color); // 'Red'
The this keyword is a source of confusion.
If you just type and run “this”, you’ll get the window object (the top of the DOM hierarchy)
If you type “this” inside a function, the value of this is contextual and dynamic. It can change.
In most cases, the value of this is determined by how a function is called (runtime binding). It can’t be set by assignment during execution, and it may be different each time the function is called. The bind() method can set the value of a function’s this regardless of how it’s called, and arrow functions don’t provide their own this binding (it retains the this value of the enclosing lexical context).
In non–strict mode, this is always a reference to an object. In strict mode, it can be any value. For more information on how the value is determined, see the description below.
Description
The value of this depends on in which context it appears: function, class, or global.
Function context
Inside a function, the value of this depends on how the function is called. Think about this as a hidden parameter of a function — just like the parameters declared in the function definition, this is a binding that the language creates for you when the function body is evaluated.
For a typical function, the value of this is the object that the function is accessed on. In other words, if the function call is in the form obj.f(), then this refers to obj. For example:
function getThis() {
return this;
}
const obj1 = { name: "obj1" };
const obj2 = { name: "obj2" };
obj1.getThis = getThis;
obj2.getThis = getThis;
console.log(obj1.getThis()); // { name: 'obj1', getThis: [Function: getThis] }
console.log(obj2.getThis()); // { name: 'obj2', getThis: [Function: getThis] }
More info and better description of this keyword on the Mozilla website here