Where Does this Come From? | JavaScript this Keyword Deep Dive

The this keyword is one of the most confusing parts of JavaScript. We often learn it through a list of rules: default binding, implicit binding, explicit binding, constructor binding, and so on. But instead of memorizing these rules, in this video we'll try to understand the mechanism behind them. We'll explore why this is not determined by where a function is defined, how the way a function is invoked affects its this value, and what actually happens when we call a function directly versus calling it through an object. We'll also take a deeper look at Reference Records and understand the difference between: • user.greet() • (user.greet)() • const fn = user.greet; fn() • greet() We'll see how the Base of a Reference Record helps explain why an object can become this in one situation, while a directly invoked function behaves differently. We'll also explore strict mode, sloppy mode, and why a direct function call can result in undefined or globalThis. The goal of this video is not to memorize another set of this rules, but to build a mental model that lets you reason about this yourself. This is the first part of the JavaScript this keyword deep dive. In upcoming videos, we'll explore how call, apply, and bind control this, why arrow functions behave differently, and what happens when functions are invoked with new. #JavaScript #WebDevelopment #FrontendDevelopment #JavaScriptInternals