"This" keyword in javascript.

This is one term that confuses beginners in javascript. And this is because the value of "this" changes , according to how it is used.
"This" in javascript refers to an object. But how do you know which object it refers to ? If used in a method in an object, it refers to that object. Eg.
const game = {
type : "football",
duration : 90,
describe( ) {
return this.type + "is played for " + this.duration + "mins"
}
Here "this" refers to the object game. if we call game.describe, we get, "football is played for 90 mins". if used inside a standalone function like so,
function test( ){
console.log( this )
}
, in "strict mode", it is undefined, in non-strict mode , it refers to the window object. but you can make it refer to a particular object in your code by using "bind" , "call" or "apply" methods. Eg.
If we have an object,
const person = {
name : "john"
}
and a function,
function greet( ) {
return "goodmorning" + this.name
}
Even though the function greet is not a method of the object person , we can make "this" inside it to refer to the person object by using bind method like so,
window.greet.bind(person)
This code returns a function to us that if we call , we get " goodmorning john". Sidenote: every function in javascript is a method of an object, if a function is not a method of an object in your code, it is a method of the window object, thats why i did "window.greet.bind(person)" .

Before i talk about "this" in a class, i would like you to know that a class is a function behind the scenes.
class Person { } is the same as function person( ) { } . when you instantiate a class like so , const name = new Person( ), you are calling the function behind it. When you define a class and add properties to it , javascript defines a function, adds an invisible object inside it and takes those properties you added to the class an makes them a property of the invisible object and returns the object when you instantiate the class ( i.e call the behind the scenes function) . eg. if you have a class like so,
class Person {
this.name = "john"
this.age = 30
}
javascript does this:
function person ( ) {
let invisible = {
name: "john",
age: 30
}
return invisible
}

So when you use "this" with a property of a class, it refers to that invisible object. But what about the methods of a class? when you add a method in a class, it is not actually added to the class directly , rather it is added the class/functions prototype. Prototype is an object that javascript creates when you define a class where it adds all the methods you added to your class so that various instances of the class can borrow those methods. But why does javascript do this , why not just add the methods it to the invisible object it created.

Continued …
Javascript does this because of performance. If it were to add the methods in the invisible object. Then whenever you instantiate a class , those methods will be created in memory. If you have 10 instances of the the class , javascript creates 10 times each of those method which is not memory effiecient. That why javascript creates a different object which is the prototype that houses those methods. Then your instances can then share those methods instead of each instance having its own methods which consumes more memory.

Since we have now established that class method are not actually in that class but in its prototype , a different object. To use a class method, you have to bind it to that class using the “ bind “ method.eg if we have a method called greet in a class, then we bind it like so: “this.greet = this.greet.bind( this ) “. Which is like asking the prototype to lend us those method so we can use it as if it is a method in our class .
In arrow functions, “this” behaves differently in that you can not bind it with another object

Well explained but difficult to read.

Adding spacing will make your write up better to read and understand

GREATIGBOMAN:
Well explained but difficult to read.

Adding spacing will make your write up better to read and understand

Alright boss