How does the this keyword work in JavaScript?

function showThis() {
  console.log(this);
}
// Call site 1: Direct invocation
showThis(); // Output: Window {...}
// WHY: When a function is called without any context (not as a method),
// 'this' defaults to the global object (Window in browsers)
// Call site 2: Strict mode
function strictShowThis() {
  'use strict';
  console.log(this);
}
strictShowThis(); // Output: undefined
// WHY: Strict mode changes this behavior to prevent accidental global object access.
// It makes 'this' undefined instead of defaulting to global object.

const person = {
  name: 'John',
  sayHi: function () {
    console.log('Hi, I am ' + this.name);
  },
};
// Call site 1: Method invocation
person.sayHi(); // Output: "Hi, I am John"
// WHY: When a method is called directly on an object, 'this' binds to that object.
// The call site shows person.sayHi(), so JavaScript knows to bind 'this' to person.
// Call site 2: Function reference
const greet = person.sayHi;
greet(); // Output: "Hi, I am undefined"
// WHY: We've lost the object context! When we assign the function to a new variable,
// we're just getting the function itself, without its original object binding.
// The call site is now just greet(), so 'this' defaults to global/undefined.

function User(name) {
  this.name = name;
  this.sayName = function () {
    console.log('My name is ' + this.name);
  };
}
// Call site 1: With 'new' keyword
const user1 = new User('John');
user1.sayName(); // Output: "My name is John"
// WHY: The 'new' keyword creates a new empty object and makes 'this' point to it.
// It's like saying "create a new context for this function"
// Call site 2: Without 'new' (wrong!)
const user2 = User('Jane');
// WHY: Without 'new', it's a regular function call, so 'this' points to global
// This accidentally sets window.name = "Jane" (a common mistake)

const button = document.createElement('button');
button.addEventListener('click', function () {
  console.log(this); // Output: <button> element
});
// WHY: the browser sets 'this' to the element the
// listener is attached to (event.currentTarget). That
// can differ from the element that was clicked
// (event.target), for example a child <span>.
button.addEventListener('click', () => {
  console.log(this); // Output: Window or parent scope's 'this'
});
// WHY: Arrow functions are different! They inherit 'this' from their enclosing scope.
// They don't get their own 'this' binding.

function introduce() {
  console.log('I am ' + this.name);
}
const person1 = { name: 'John' };
const person2 = { name: 'Jane' };
// Call site 1: Using call/apply
introduce.call(person1); // Output: "I am John"
introduce.apply(person2); // Output: "I am Jane"
// WHY: call/apply let you explicitly set what 'this' should be.
// It's like saying "run this function, but pretend it belongs to this object"
// Call site 2: Using bind
const introducePerson1 = introduce.bind(person1);
introducePerson1(); // Output: "I am John"
// WHY: bind creates a new function with 'this' permanently set to the specified object.
// It's like creating a copy of the function that always remembers its context.

function introduce(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}
const user = { name: 'John' };
introduce.call(user, 'Hi', '!'); // "Hi, John!"
introduce.apply(user, ['Hi', '!']); // "Hi, John!"

const user = {
  name: 'John',
  friends: ['Jane', 'Bob'],
  showFriends() {
    this.friends.forEach((friend) => {
      console.log(`${this.name} knows ${friend}`);
    });
  },
};
user.showFriends();
// "John knows Jane"
// "John knows Bob"