What is This in JS ( JavaScript ) with Examples

Hello fiends, good to see you here!

👀 Here you can find a brief summary 👀:
When a function is invoked, the "this" context is a binding that is established at the time of the function ❗call❗. What "this" refers to depends on where and under what conditions the function is called.

This binding contains crucial information about the function's origin (call stack), how it was called, the arguments passed, and more. The specific location in the code where the function is executed doesn't matter. However, to accurately pinpoint the function's invocation, you can use Dev-Tools during debugging.

⚜️There are four primary ways a function can be called, each affecting the this context differently ⚜️:

❗ Global Function Call: In the global scope, "this" refers to the Window object. If you're in strict mode,"this" returns undefined; otherwise, it refers to the global object.
❗ Method Call: When a function is invoked as a method of an object,"this" points to that specific object.
❗ Constructor Call: When a function is used as a constructor (i.e., with the new keyword),"this" refers to the newly created object.
❗Explicit Binding: You can manually set the "this" context using three methods: call, apply, and bind:
⚡ Call(user, a, b, c) – Passes the object and individual arguments to the function.
⚡ Apply(user, [a, b, c]) – Passes the object and an array of arguments.
⚡ Bind(user, a, b, c) – Similar to call, but instead of invoking the function immediately, it returns a new function with a preset this context.
🧨 Loss of Context can occur in the following scenarios 🧨 :
📌 When calling nested functions.
📌 When a method is detached from its object.
📌 In asynchronous functions.