Understand `this` in Any Situation

by Gordon Zhu, May 2023

In this video, I describe how you can systematically determine this in any program.

this can be difficult because you can't figure out what's happening with pure logic. Some prerequisite knowledge is required to make sense of things because it interacts with many parts of the language, and has gotten more complicated over time with the introduction of ES6.

The flowchart represents the minimum that you need to figure things out in any conceivable situation. It's just the right balance of everything you need, nothing you don't. Though the flowchart itself is really simple, there's a lot of nuance and skill required to apply it correctly in any given situation. Watch the video to see how.

                ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
                ┃   _____ _   _ ___ ____    ┃
                ┃  |_   _| | | |_ _/ ___|   ┃
                ┃    | | | |_| || |\___ \   ┃
                ┃    | | |  _  || | ___) |  ┃
                ┃    |_| |_| |_|___|____/   ┃
                ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

╔════════════════════════════════════════════════════════════╗
║                        SPECIAL CASE                        ║
╚════════════════════════════════════════════════════════════╝

┌───────────┐   ┌───────────┐   ┌───────────┐   ┌───────────┐
│bind, call,│   │    new    │   │    =>     │   │   super   │
│   apply   │   │           │   │           │   │ .method() │
└───────────┘   └───────────┘   └───────────┘   └───────────┘
      │               │               │               │
      │               │               │               │
      ▼               ▼               ▼               ▼
┌───────────┐   ┌───────────┐ ┌──────────────┐┌──────────────┐
│ Up to you │   │ New empty │ │Outside `this`││Outside `this`│
│           │   │  object   │ │when function ││when function │
└───────────┘   └───────────┘ │  is created  ││  is invoked  │
                              └──────────────┘└──────────────┘

╔════════════════════════════════════════════════════════════╗
║                        COMMON CASE                         ║
╚════════════════════════════════════════════════════════════╝

                        ┌───────────┐
                        │   In a    │         ┌───────────┐
                        │ function? │────No──▶│  window   │
                        └───────────┘         └───────────┘
                              │
                             Yes
                              │
                              ▼
                        ┌───────────┐
                        │Invoked as │
                        │  method?  │
                        └───────────┘
                              │
                 ┌─────Yes────┴──────No────┐
                 │                         │
                 ▼                         ▼
       ┌───────────────────┐     ┌───────────────────┐
       │                   │     │ window (undefined │
       │    Left of dot    │     │if function created│
       │                   │     │     on class)     │
       └───────────────────┘     └───────────────────┘