this keyword relates to the context on which it is run.
person.sayHello() ⇒ context here is person
person.spouse.sayHello(); ⇒ context is spouse
sayHello() ⇒ context is window for web browsers, globalThis for Node.js >=12 or global for Node.js < 12.

Given this example:

function-context-this.js

function sayHello() {
  console.log(this.name, this.age);
}
 
const person = {
  name: 'Alice',
  age: 30,
  sayHello: sayHello,
  spouse: {
    age: 32,
    sayHello: sayHello
  }
};
 
person.sayHello(); // Alice, 30
person.spouse.sayHello(); // undefined, 32
sayHello(); // undefined, undefined

When you call person.spouse.sayHello(), this.name evaluates to undefined since there's no name property on the spouse object, and this.age evaluates to 32.

In non-strict mode, this refers to the global object, and since there's no name or age property on the global object, both will be undefined.
So sayHello(); in non strict mode will display undefined, undefined. But in strict mode, it will throw an error.

"use strict";
 
function sayHello() {
  console.log(this.name, this.age);
}
 
// ... rest of the code ...
 
sayHello(); // TypeError: Cannot read properties of undefined (reading 'name')

The new operator in JavaScript is used to create a new instance of an object that's based on a constructor function. When a function is called with the new operator, the context of this inside the function is set to the newly created object.
Example:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  };
}
 
const alice = new Person('Alice', 30);
const bob = new Person('Bob', 32);
 
alice.sayHello(); // Hello, my name is Alice and I am 30 years old.
bob.sayHello();   // Hello, my name is Bob and I am 32 years old.

When new Person('Alice', 30) is called, a new object is created, and the context of this inside the Person function is set to that new object. The properties name, age, and sayHello are then added to the new object.
The result is two distinct objects alice and bob, each with their own properties and methods. When the sayHello method is called on one of these objects, the context of this inside the method is set to the object on which the method was called.

The call, apply, and bind methods in JavaScript are used to control the value of this inside a function.
They allow you to call a function with a specific context for this, and also pass arguments to the function.
By using call, apply, or bind, you can ensure that the function behaves correctly regardless of how it's called.
We'll use this code to show how these functions are called:

function sayHello(greeting, punctuation) {
  console.log(greeting, this.name, punctuation, this.age);
}
 
const person = {
  name: 'Alice',
  age: 30
};
 
const spouse = {
  name: 'Bob',
  age: 32
};

The call method allows you to pass individual arguments after specifying the value for this.

sayHello.call(person, 'Hello', '!'); // Hello Alice ! 30
sayHello.call(spouse, 'Hi', '...'); // Hi Bob ... 32

The apply method is similar to call, but it takes an array-like object for the arguments, instead of individual arguments.

sayHello.apply(person, ['Hello', '!']); // Hello Alice ! 30
sayHello.apply(spouse, ['Hi', '...']); // Hi Bob ... 32

The bind method allows you to create a new function with a bound context for this, and you can then call that function with any arguments you like.

const sayHelloToPerson = sayHello.bind(person);
const sayHelloToSpouse = sayHello.bind(spouse);
 
sayHelloToPerson('Hello', '!'); // Hello Alice ! 30
sayHelloToSpouse('Hi', '...'); // Hi Bob ... 32

<button id="buttonAlice">Greet Alice</button>
<button id="buttonBob">Greet Bob</button>

function greetUser(greeting) {
  alert(greeting + ' ' + this.name + '!');
}
 
const userAlice = {
  name: 'Alice'
};
 
const userBob = {
  name: 'Bob'
};
 
// Using bind to create functions with the correct context for this
const greetAlice = greetUser.bind(userAlice, 'Hello');
const greetBob = greetUser.bind(userBob, 'Hi');
 
// Adding event listeners
document.getElementById('buttonAlice').addEventListener('click', greetAlice);
document.getElementById('buttonBob').addEventListener('click', greetBob);

Example:

ArrowFunctionContext.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow Functions Context</title>
</head>
<body>
<div id="text1"> <br /> </div>
<div id="text2"></div>
<script>
    let person = {
        name: 'Preston',
        sayHello: () => {
            return `Hello - ${this.name}`;
        }
    };
 
    document.getElementById('text1').innerHTML = person.sayHello(); // Hello - 
 
    person = {
        name: 'Preston',
        sayHello: function() {
            return `Hello - ${this.name}`;
        }
    };
 
    document.getElementById('text2').innerHTML = person.sayHello(); // Hello - Preston
 
</script>
</body>
</html>

Here we'll need to assign the context of the parent function to a variable that the nested function can access.
This is commonly done by assigning this to a variable, often named self or that, in the parent function's scope.

Example:

const parentFunction = {
  parentValue: 'Hello from parent!',
  childFunction: function() {
    const self = this; // Storing parent's context
 
    function namedFunction() {
      // Accessing parent's context through 'self'
      console.log(self.parentValue);
    }
 
    namedFunction();
  }
};
 
parentFunction.childFunction(); // Outputs: Hello from parent!

Using an arrow function can simplify the code because arrow functions don't have their own this context; they inherit it from the enclosing function. This means you don't need to store the parent's context in a separate variable.
Same example with arrow function:

const parentFunction = {
  parentValue: 'Hello from parent!',
  childFunction: function() {
    const arrowFunction = () => {
      // Accessing parent's context through 'this' directly
      console.log(this.parentValue);
    };
 
    arrowFunction();
  }
};
 
parentFunction.childFunction(); // Outputs: Hello from parent!

By using an arrow function for the inner function, we automatically capture the value of this from the enclosing childFunction method. This allows the inner function to access the properties and methods of the parentFunction object without needing to assign this to a separate variable.
It's a cleaner and more concise way to write code that depends on maintaining the context of this across different levels of nested functions.