First, let us go back to the roots, the English meaning of 'this'. According to the Oxford Dictionary, this can be used to identify a specific person or thing close at hand, it can also be used to identify something. For example "this is Stephen talking". The word can also be used to compare the distance between two things, the nearer one referred to as this and the farther one referred to as that.

Prerequisites

Know the difference between methods and functions
Know what an Object literal is.

Use in JavaScript

Now over the past 14 months since I have been using and writing JavaScript, I realized it is used in 4 areas listed below.

Global Scope in a Browser Environment.
Object Oriented Programming (OOP).
Data Structures and Algorithms(DSA) e.g. Implementation of stacks ,Queues,Binary search Trees.
Document Object Model (DOM) manipulation.

The Rundown

Global Scope

When used in the global scope; one with a web environment, not a Node.js environment, this points to the global object which is window.

Meaning when we run JavaScript as an HTML attachment.

<html> 

<body>

</body>

<script src="script.js">

</script>
</html>

Such that this points to the window object.

console.log(this) //window object

console.log(this==window) //true

Let us take a look at behaviour Outside the web environment: Node.js.

Such that this points to an empty Object.

console.log(this) //{ }

console.log(this==window) //reference error

Before you get scared!!.

Before we dive into use in code, I am going to list the use cases and places of this in OOP so that you can know what's obtainable as soon as you see them.

this is not used on properties of Object literals . It is only used within the methods of object literals pointing to the properties.
It is also not used on the properties of factory functions. It is only used optionally within the methods of factory functions.
It is used on properties and methods of constructor functions except when making prototypes.
it is used on properties and methods of classes except when making prototypes.

Object Oriented Programming (OOP)

To get a picture of things I just enumerated, let's touch briefly on the methods of creating objects in OOP, JavaScript to visualize it .

Object literal : The this keyword is not used on the properties here. It is only used within the method to point to a property. in this example the greet method, it points to name.

const person = {
  name: 'steve',
  age: 30,
  greet: function () {
    console.log(`Hello, say goodmorning to ${this.name}.`)
  }
}
person.greet(); // logs "Hello,say goodmorning to steve."

Factory functions: The this keyword is only used within the method definition in factory functions. In this case getFrom() to refer to the from property.But it is not used on the properties from and to.

function way(from,to){
return{
from:from,
to:to,
getFrom:function(){
console.log(this.from)
}
}
}
//Instantiate
const route=way("Lagos","Toronto")
route.getFrom()

You can also rewrite the above as below.

function way(from,to){
return{
from,
to,
getFrom:function(){
console.log(this.from)
}
}
}
//Instantiate
const route=way("Lagos","Toronto")
route.getFrom()

Or no need to add this within the method getFrom()

function way(from,to){
return{
from:from,
to:to,
getFrom:function(){
console.log(from)
}
}
}
//Instantiate
const route=way("Lagos","Toronto")
route.getFrom()

Constructor functions : One of the confusions people face, is not knowing the difference between constructor and factory functions and that is a major confusion as far as this keyword goes. By convention Constructor function names start with Uppercase letters (capital letters) and we use the this keyword to enumerate their properties. We also instantiate with the new keyword which we don't do in factory functions. Note that the constructor is a template which we use to build our objects.

function Way(from,to){
    this.from=from
     this.to=to
    this.get=function(){
        return this.from
    }
}
//instantiate
const route=new Way("Lagos","London")
console.log(route.from)
console.log(route.to)
console.log(route.get())

Class and Class Constructor: Follows the same principle as the constructor function , except some syntax modification, which some call syntactic coating. We use the new keyword to instantiate too. Notice the difference; that a class is used to encapsulate constructor.

class Lecturer{
    constructor(name,degree){
        this.name=name
        this.degree=degree    
}
}

//instances of class
let person1=new Lecturer("Jim","PhD")
let person2=new Lecturer("Kennedy","phD")
console.log(person1)
console.log(person2)

DSA

The use in DSA follows the class and class constructor syntax talked about above. Below is the blueprint to implement a stack with an array using the class syntax.

class Stack {
        constructor() {
            this.items = [];
            this.top = -1;
        }
    }

DOM manipulation

I have also seen some DOM manipulation with OOP. It also employs the class syntax in this scenario. Below is an example I saw.

 class Button {
  constructor(text,color,clickr) {
    this.element = document.createElement("button");
    this.element.innerText = text;
    this.element.style.color=color
    this.element.addEventListener("click",clickr);
  }
  //prototype zone

  appendTo=function (parent) {
    parent.appendChild(this.element);
  }
}

//  instantiate Button class
var myButton = new Button("Click me!","red", function() {
  alert("Button was clicked!");
});
// Append the button to the DOM myButton.appendTo(document.body);

Behaviour within Regular functions

Regular functions are functions not attached to any object. It will always take the value of the owner of the function in which it is used. Within functions it usually points to the window object, if it strict mode it reads undefined.

function greet(){
console.log('Good Morning')
console.log(this)
}
greet()
//outputs Good Morning and window

In strict mode

'use strict'

function greet(){
console.log('Good Morning')
console.log(this)
}
greet()
//outputs Good Morning and undefined

Arrow functions

When used within Arrow functions, this points to the parent scope of the function they are used in.

let x=()=>{

console.log(this)

}

x()

//outputs window since the parent of the function is the global scope

Recommendation

To gain more clarity on all I touched on,to brush up your OOP knowledge. Check the Procademy YouTube channel ,he has a series on Object Oriented Programming in JavaScript.Follow it chronologically, he breaks every concept down.Even a toddler would understand 😎. Don't be scared to drop a question, correction or comment.

I can help with 'this' Confusion

Table of contents