The meaning of .this
Tags: javascript, webdev, beginners, programming
Published: 2021-11-29 01:27:03

Let's talk about this. *This* is determined by the object that it belongs to.

#Contexts in which the 'this' keyword can be used
The definition of this as the property of an execution context is much more accurate because depending on how it is called at runtime, 'this' can refer to many things. Let's dive deeper.

*this* in the method of an object
First, a method is used to refer to a function that is a member of an object. All methods are functions, but not all functions are methods. Now, when the 'this' keyword is used inside a method, it refers to the owner of the method it is used in. Let's use the example defined above to take a deeper look at 'this' in this context.
```
greet : function() {
return "Hi! I am " + this.firstName + " " + this.  lastName + ", a bell boy and I am at your service";
}
```
In this example, this which is used inside the greet() method refers to the bellBoy object, which is the owner of that greet() method.

*this* in the Global Context
When the 'this' keyword is used alone, not inside any function or better referred to as being used in the global context, the keyword refers to the global object. The global object refers to the owner of the 'this' keyword in this case. When it is in a browser window, this global object refers to the window object.
```
let y = this
console.log(y)
```
*this* in the global context.

Since that is true, if you make a strict comparison between the value of *this* and the window object, we get the boolean value of true.

If you run this javascript file inside your computer using a tool like node, *this* keyword refers to an object of type of object.


*this* in a function
Note, we are talking about what the keyword 'this' refers to when it is used in an ordinary function, one not affiliated with any object. Just a function is standing on its own. In such a javascript object, the default value of 'this' is the owner of the function. If the code is not in strict mode and it is not been set to a member of an object, then this defaults to the global object.
```
function function1() {
return this
}
function1() === window
```

In the example above, the value of the this keyword as used inside this function refers to the window object. This is why the output of the string comparison between function1 and the window object will equal to true because they hold the exact same value.

*this* in a function (Strict Mode)
When in strict mode however, Javascript does not permit default binding, and because of that, it is undefined. Put simply strict mode prevents sloppy code. Thinking it from a programmers' point of view, there is most likely no good reason to want to access the value of this in a function since it will return the window object. In most cases, we access the this keyword because we want to get some other properties from its owner. Strict mode enforces this. So when in this mode, 'this' is undefined.
```
"use  strict"
function function1() {
return this
}
function1() === window

```
As can be seen in the above example, in the strict mode, the value of this inside a function is undefined.


There are other ways *this* is used in JavaScript, here are some more options: 
*this* in classes
*this* as a constructor
*this* with a getter or setter method
*this* on an object's prototype chain
*this* in arrow functions


Happy Coding!