This or That........Object. Understanding This 
Tags: javascript, codenewbie
Published: 2020-06-29 00:20:28

This always refers to an object, the question is which object. The object that *this* refers to depends on how it is used in your code and where it is at the time of invocation. There are a few ways to ways invoke *this* to always know what you are referencing.




**Method Invocation**

In this example the keyword *this* is bound to the *detective* object that it's encapsulating function is in. Due to scoping, instead of *this* pointing to the global window, like from free function invocation, *this* belongs to the *detective* object. Another way to verify this is to look to the left of the dot at call time. Anytime the *wellID* function is invoked it will be as a method of the *detective* object, this is what *this* will refer to.


````javascript 
var detective = {
  firstName: "Akihito",
  lastName : "Narihisago",
  id     : 'Sakaido',
  wellID : function() {
    return `My name is ${this.id}, and I am the brilliant detective. `;
  }
};
console.log(detective.wellID()) //My name is Sakaido, and I am the brilliant detective.
```






**Free Function/Global Invocation**

Unlike in the example above, where *this* is used within the lexical scope, of the *detective* object, here *this* is freely called.

````javascript
const file01 = {
  suspectCodeName: 'Perforator',
  firstName: 'Tamotsu',
  lastName: 'Fukuda',
  proof: this
};
console.log(file01.proof) //will print global window
```


This will log the global window to the console. This is a value inside of the *file01* object but due to that object being inside of the global window and not in another closure, this has the value of the global window.






**.apply(), .bind() & .call()**

These three methods allow us to use *this* no matter how it has been invoked. Each one of those methods apply *this* in a different way.

  *.apply() & .call()*
These methods invoke the function with *this* having a new context. The difference between the two methods is *.apply()* takes arguments as an array while *.call()* takes them as a list.
 
````javascript 
function scenario(tools, quirk) {
  return `${detective.wellID()}${this.firstName} ${this.lastName} also known as
  the ${this.suspectCodeName} has been found and captured. The ${tools} helped with his capture.
   Since he had a ${quirk} it disrupted the ${tools} and made his apprehension more difficult.`;
}
console.log(scenario.apply(file01, ['cognition particles', 'hole in is head']));

// My name is Sakaido, and I am the brilliant detective. Tamotsu Fukuda also known as the Perforator
// has been found and captured. The cognition particles,hole in is head helped with his capture.
// Since he had a undefined it disrupted the cognition particles,hole in is head and made his
// apprehension more difficult.
```

*.bind()*
This method creates a new function that will set *this* to the given value when the function is invoked.The *.bind()* invocation has a lot less code when used but the new function must be saved to a variable.

````javascript
let usingBind = scenario.bind(file01, ['cognition particles', 'hole in is head'])
  console.log(usingBind());
  // My name is Sakaido, and I am the brilliant detective. Tamotsu Fukuda also known as the Perforator
  // has been found and captured. The cognition particles,hole in is head helped with his capture.
  // Since he had a undefined it disrupted the cognition particles,hole in is head and made his
  // apprehension more difficult.
```

**Constructor Invocation**
When using this with constructor invocation, *this* will be bound to the new instance of the constructor object, only when the new keyword is used. All of the objects created from that object will have the same properties.

````javascript 
const File = function(codeName, firstName, lastName) {
  this.codeName = codeName;
  this.firstName = firstName;
  this.lastName = lastName;
}

const newCase = new File('Gravedigger', 'Haruka', 'Kazuta');
console.log(newCase); //logs a new object
```

Having this knowledge *this* or knowing what it is referencing should no longer be an alien concept.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0dbpeyf394z3cwvo01mt.jpg)