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 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);