JavaScript This Keyword

المعرفة:: JavaScript الحالة::مؤرشفة المراجع:: The Complete JavaScript Course 2022 From Zero to Expert, JadeHendricks’s notes, JadeHendricks’s notes

---

What’s this keyword?

• this keyword/variable: Special variable that is created for every execution context (every function). Takes the value of (points to) the “owner” of the function in which the this keyword is used.
• It is NOT static. It depends on how the function is called, and its value is only assigned when the function is actually called.

Where does the this variable point?

• In a regular function call:
  • In strict mode: this = undefined, even if the function is inside of a method.
  • Otherwise, this keyword points to the global window object (in the browser).

function calculateAge(year) {
  console.log(2016 - year);
  //The window object, because this is a regular function call and not a method
  console.log(this);
}

• In a method call: The this variable points to the object that is calling the method.

const jonas = {
  year: 1989,
  calcAge: function () {
    // method
    console.log(this); // jonas object
    console.log(2037 - this.year);
  },
};
jonas.calcAge();

• In an Arrow functions: this = this of surrounding function (lexical this), since arrow functions doesn’t own this.
• In an Event listener: this = DOM element that the handler is attached to.
• new : Later.
• call, apply, bind: this = first parameter, which is object to call the function with.
• this does NOT point to the function itself, and also NOT the its variable environment!

Note

• The this keyword won’t be not assigned a value until a function where it is defined is actually called, because the this variable is attached to the execution context… which is only created once a function is invoked (See Execution Context and Call Stack).