this

The this keyword is used to indicate the context of a function - and it represents a binding.

Essential:

github.com/getify/You-Dont-Know-JS

Description:

The “this” keyword refers to the context where a piece of code, such as a function’s body, is supposed to run. Most typically, it is used in object methods, where “this” refers to the object the method is attached to, thus allowing the same method to be reused on different objects.

The value of “this” in JavaScript depends on how a function is invoked (runtime binding), not how it is defined.

Table of Contents

  1. 1. Introduction
  2. 2. Call-Site
  3. 3. Rules
  4. 4. No Bridge Allowed
  5. 5. Arrow Functions
  6. 6. Documentation
  7. 7. Related notes

1. Introduction

When a function is invoked, it creates an execution context containing:

    ▪ where the function was called (the call-stack),

    ▪ how the function was called,

    ▪ what parameters were passed,

    ▪ the this reference. this is a keyword representing a binding.

    ▪ …

Below, you will see that func is called in the global scope. When that is executed, this becomes a bound to the global object. When this.a = 1 is executed, it will result in globalThis.a = 1.

Example:


2. Call-Site

If you need to find what this is bound to at some point in your code, you 1st need to find the call-site: this is, the location where a function is called. It can be determined by looking at the call-stack, a structure that records the current position of an executable script.

Example:

Note: Remember that the call-stack can be viewed in the browser dev tools. Set a breakpoint and refresh the page; the debugger will pause at this exact line. Then, it will display the current call-stack. The second item from the top will be the call-site.


3. Rules

Base on the call-site, ask these questions in order. Stop when the first rule applies:

I. Is the function called with a “new” binding?

When a function is invoked with new in front of it (a constructor call):

Example:

II. Has “bind(..)” been used?

Example:

III. Are “call(..)” or “apply(..)” used?

Example:

IV. Does the call-site have a context object?

this is the already-mentioned context object. Considering that:

Example:

What we just saw is common when using browser API functions like setTimeout(() => { .. }, 1000). Here, setTimeout is actually window.setTimeout. Therefore, this within the anonymous function is window.

V. “undefined” in strict mode, global object otherwise

Example:


4. No Bridge Allowed

Make no mistake: this does not refer to a function’s scope. Let’s analyze an example.

Example:

No such bridge is possible. You can’t use a this reference to look something up in a scope.

No wormholes here either, I’m afraid.


5. Arrow Functions

Instead of the 4 standard binding rules, an arrow-function, () => { .. } will adopt the this binding from its enclosing function call. Set when the function is created, not to the environment in which the function is called.

Arrow function visual example.

As an example:

Example:


6. Documentation

There are some great explanations out there that I would definitely recommend, such as:

    ▪ freeCodeCamp, or

    ▪ You Don’t Know JS: this & Object Prototypes

Remember, however, that these notes need to work for you, no matter what others say!


All Notes: