Understanding ‘this’ in Javascript

Neha Sharma
Aug 15, 2018 · 4 min read

If you are a Javascript developer you have likely gotten confused by the use of ‘this’ at some point.

Most developers still can’t get themselves around the use of this. The reason is the dynamic nature of this and the way it changes its context.

“I can see ‘this’ in your eyes, I can see ‘this’ in your smile…”

Today, we are going to see what actually this is and why we need. Followed by related concepts of this.

this” as it says point to the current value in Javascript in its context. Javascript is based on the scopes, functions, and contexts. Javascript is a dynamic scripting language. This dynamic behaviour makes this also to behave differently too and that cause all the confusion.

Whenever you want to access the values in a function or context you use this. ‘this’ behaves differently in the different context:

1. Global Context

Anything which is defined in the global scope can be accessed by this. By default, ‘this’ always refers to the global object (so if you are writing code for a browser, this will typically be the window object).

Unsure what ‘strict mode’ is? Do a quick Google search :)

2. Function Context

In a function, this will default to the global object, which is window in a browser.

It is worth noting here that if we tried console.log(color), it would have returned blue

3. Object Context

this’ in an object points to the object always and works pretty much as you would expect it to:

The magic of objects is you can pass objects (and their methods — which is what you call a function when it is inside an object) as parameters to functions. So here we are passing in obj.getColor() into console.log.

call()

call() changes the context of this by passing the obj object as the first parameter. If nothing is passed then call() will point to the window’s scope.

apply()

apply() changes the context by passing the obj object as the first parameter. If nothing is passed then the apply() will point to the window’s scope.

bind()

bind() also helps in changing the context of ‘this’ but the difference is between call(), apply() and bind() is that bind() only works once and it does not execute the function. It just binds the context with this.

The difference between call() and apply() is that apply() expects the arguments as an array whereas call() expect a single argument.

4. Constructor

When you create an instance of a function, the context of this moves to the newly created instance. In below example, the context of this points to newly created instance var o.

Summary/TL;DR

  1. In function and global scope ‘this’ always points to the window. Though this changes when you are in strict mode or Nodejs .
  2. In Object this points to the object’s context only
  3. In constructor, this points to the newly created instance.
  4. We can change the context of this by using — call(), apply() and bind()
  5. If you just bind the context and do not want to execute the function then use bind(). Always remember bind() works only once
  6. If you want to pass an array of arguments to this then you use apply(). Otherwise, use call().
  7. The beauty of this is its dynamic nature and it changes in the context you are running it.

We hope you found this useful! If so, leave some claps, follow JSIPE and share with all your friends, family and pets! 👫 👨‍👨‍👧‍👧 🐶

JavaScript in Plain English

Learn the web's most important programming language.

Neha Sharma

Written by

Tech Lead; Brain behind JSLovers, Tech Speaker; ❤ Calligraphy and Chai. https://twitter.com/hellonehha; My Dev Journey: https://www.instagram.com/devgirllife/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade