What is THIS? Understanding the execution context in JavaScript

Ralph Asterix is a mechanical engineer. Ralph likes to grow fruits and vegetables in spare time.
undefined undefined is undefined. undefined likes to undefined in spare time.
Image by Clker-Free-Vector-Images from Pixabay

Global Object

  • Window, if run in the browser
  • global , if run in Node
  • WorkerGlobalScope, if running in a Worker

Execution Context

Hello [object global]!
Hello [object Window]!
Hello World!
  • They can be assigned to variables
  • They can be passed to other functions
  • They can also be returned from other functions

Assigning method to a variable and invoking it as a regular function

Hello World!
  • its value of this is permanently set to the provided execution context (some value).
Hello World!
  • foo.printText.bind(foo) on line 8, returns a completely new function
  • The new function has its this value to reference foo object (permanently!)
  • It’s then assigned to a variable printText
  • printText is now referencing a function and can be invoked like any other function
  • The function printText is invoked on line 10
  • Since I provided the context explicitly, it outputs Hello World!

There is an important difference between call or apply and bind.

Passing function as a an argument to another function

undefined
  • On line 12 I invoke function printMessage
  • I pass method foo.printText as an argument to printMessage
  • The body of the function printMessage has a single line of code: funcArgument(); — line 9
  • Line 9 evaluates to undefinedIt is undefined because:
    - foo.printText was passed as an argument
    - it lost its original execution context -foo
    - new execution context is set to the global object
    - global object does not have a property text defined on it
    - So the result is undefined
  • I added a second parameter, context to function printMessage (line 10)
  • context represents the value of this that I would like to set explicitly to foo.printText
  • Line 11 has this code:funcArgument.call(context);
  • On line 11 I am invoking funcArgument and also telling JavaScript to set the value of this to context
HELLO WORLD!!!!!!!
  • I created a new object bar — lines 8–10
  • bar also has a property text , it has a value of HELLO WORLD!!!!!!!
  • On line 12 I am invoking printMessage and passing bar as the context argument
  • Line 15 has the same code:funcArgument.call(context);
  • The result is HELLO WORLD!!!!!!!

A few things to remember about the execution context in JavaScript

  • Execution context (value of this) depends on how you invoke the function or method.
  • It is not determined by how function or method is defined.
  • Execution context is the global object when it comes to regular function invocations.
  • Execution context is set to the calling object for method invocations.
  • You can use bind, call, apply to set the execution context explicitly.
Image by Eduardo RS from Pixabay

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Olga Shi

Olga Shi

Software Engineer. likes video games, Muay Thai, doing DIY projects, reading real books.