this | web.dev

this

is not fixed in a method.
does not necessarily refer to the object containing the method.
is passed (at runtime) by the function call. 👉 method binding.

The value of this in a normal function is by default：

undefined | global object

arrow functions don’t have “own” this, it’s taken from the "outer context" .

the body of a class has a this context.

👉 see arrow function ⟩ arrow function as class field❗️.

if the code you need to wrap a scope around has return, this, break, or continue in it, don't use a function/IIFE(which has its own function boundary), use a block instead❗️

📗 You Don't Know JS Yet: Scopes & Closrues

the value of this is stored in environment record.

Once a method is passed somewhere separately from the object – "this" is lost.

const user = {
  name: "John",
  sayHi() { console.log(`Hi, ${this.name}!`) }
};

//         ╭────────╮ <---- passed method
setTimeout(user.sayHi, 1000);   // Hello, undefined! 🧨

💾 replit：this determined on call site

// object
let user = {

    name: "Joe",

    sayHi() {
        
        console.log(`Hi, I am ${this.name}.`);
        //                      ╰──╯  
        //                        ↳ ⭐️ value of `this` is NOT determined here.
        
        console.log(`... (sayHi() called by ${this})`)
    }
};

// ❗assign a new name
let f = user.sayHi;    // ⭐️ the function is NOT invoked here❗

// ⭐️ call site #1
user.sayHi();          // ⭐️ this === user (object before "dot")

// Hi, I am Joe.
// ... (sayHi() called by [object Object])

// ⭐️ call site #2
f();                   // ❗this      = `globalObject` or `undefined` ❗
                       // ❗this.name = `undefined`    or ⛔ TypeError❗

// ❗Hi, I am undefined.
// ❗... (sayHi() called by [object global])