Go to content
The Codest
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2019-09-09
Software Development

Understanding the 'this' keyword in JavaScript

Lukasz Kolko

Understanding the 'this' keyword in JavaScript - Image

In most object-oriented programming languages, the keyword 'this' has a special meaning. Usually it refers to the object being the execution context (i.e. to the current instance of the object). For example, we use this when referring to an object property from within: we type this.propertyName, and then the context is the object and this refers to it.

'this' in JavaScript

In JavaScript it is more complicated because where this refers to depends not only on how the function is defined but also on the form of calling it.

Take a look how this works depending on invocation place and form.

Global context

Used in a global context bound to the global object, like window in a web browser.

this; // window

Inside object method

Used inside of an object method bound to the closest enclosing object. The object is the new context of the this keyword. Note that you should not change function () to ES6 syntax fun: () => this.context because it will change the context.

const obj = {
  context: "object",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // object

In this example with a nested object, this still refers to its closest context.

const nestedObj = {
  context: "parent",
  child: {
    context: "child",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // child

Context-less function

Used inside a function that has no context (has no object as parent) bound to the global context, even if the function is definded inside the object.

Note that we use var context instead of let/const context because let and const change the variable enclosed context. var is always closest to the global execution context. let and const declare variables only in a local block scope.

var context = "global";

const obj = {
  context: "object",
  funA: function() {
    function funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // invoked without context
  }
};

obj.funA(); // global

Inside constructor function

Used inside a function that is the constructor of the new object bound to it.

var context = "global";

function Obj() {
  this.context = "Obj context";
}

const obj = new Obj();
obj.context; // Obj context

Inside function defined on prototype chain

Used inside a function defined on the prototype chain to creating an object bound to it.

const ProtoObj = {
  fun: function() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

Inside call() and apply()  functions

call() and apply() are JavaScript functions. With these, an object can use methods belonging to another object. call() takes arguments separately where apply() takes them as an array.

this is here bound to new context changed in call() and apply() methods.

const objA = {
  context: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  context: "objB"
};

objA.fun(1, 2); // objA, \[1, 2\]
objA.fun.call(objB, 1, 2, 3); // objB, \[1, 2, 3\]
objA.fun.apply(objB, \[1, 2, 3, 4\]); // objB, \[1, 2, 3, 4\]

Inside bind() function

bind() is also a JavaScript method. It creates a new function that will have this set to the first parameter passed to bind()**.**

const objA = {
  context: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  context: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, \[1, 2, 3, 4\]

Inside event handlers

Used in any event handler (for example, addeventListener, onclick, attachEvent), it is bound to the DOM element the event was attached to.

document.querySelector(".foo").addEventListener("click", function() {
  this; // refers to the \`foo\` div element
});

ES6 arrow function

Used inside the arrow function it is always bound to its lexical scope. In the arrow function, you can't re-assign the this in any way.

const globalArrowFunction = () => this;

globalArrowFunction(); // Window

const obj = {
  context: "object",
  funA: () => this,
  funB: function() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // Window
obj.funB()(); // object

Fronented Report for 2020

Read more:

  • The biggest challenges with custom software development
  • What are the differences between a software house and an IT staffing agency?

Related articles

Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for...

Jacek Ludzik
Software Development

5 examples of Ruby’s best usage

Have you ever wondered what we can do with Ruby? Well, the sky is probably the limit, but we are happy to talk about some more or less known cases where we can use this powerful language. Let me give you some examples.

Pawel Muszynski
Software Development

Maintaining a Project in PHP: 5 Mistakes to Avoid

More than one article has been written about the mistakes made during the process of running a project, but rarely does one look at the project requirements and manage the risks given the technology chosen.

Sebastian Luczak
Software Development

Why you will find qualified Ruby developers in Poland?

Real Ruby professionals are rare birds on the market. Ruby is not the most popular technology, so companies often struggle with the problem of finding developers who have both high-level skills and deep experience; oh, and by the...

Jakub
Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

A quick dive into Ruby 2.6. What is new?

Released quite recently, Ruby 2.6 brings a bunch of conveniences that may be worth taking a glimpse of.  What is new? Let’s give it a shot!

Patrycja Slabosz

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

The Codest – International Tech Software Company with tech hubs in Poland.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.