JavaScript this

A value, not a declaration

this is not a variable you create. The engine sets it for each call. The same function can see a different this depending on how you call it: as a method, as a plain function, or as an event handler.

The useful picture for beginners: this is “the object to the left of the dot” when you write obj.method().

In a method it is the owner

Call a function as a property of an object and this is that object. Methods use this to read sibling fields without passing the object as an extra argument.

const account = {
  owner: "Ada",
  balance: 40,
  label() {
    return this.owner + " has " + this.balance;
  },
};

console.log(account.label());

Inside label, this.owner is "Ada" because the call wasaccount.label(). The owner is account.

In a plain function it is not

Call the same kind of function without an object in front and this is not that owner. In the browser, a loose function often sees the global window object (or undefined in strict mode). It will not magically remember an object you used earlier.

"use strict";

function showThis() {
  console.log(this);
}

const box = {
  id: 1,
  showThis: showThis,
};

box.showThis();
showThis();

box.showThis() logs the object. showThis() logsundefined in strict mode. Detaching a method — assigning it to a name and calling that name — is the usual way people lose this.

A nested function is a new call

A function inside a method does not inherit this from the method. It is a separate call. Save the owner in a const, or use an arrow (next chapter), if the inner function needs the same object.

const cart = {
  items: ["pen", "ink"],
  summary() {
    const owner = this;
    function line() {
      return owner.items.length + " items";
    }
    return line();
  },
};

console.log(cart.summary());

const owner = this freezes the method’s object for the inner function. Ifline used this.items instead, it would not see the cart.

On a DOM event

In a classic handler, this is the element the listener is attached to. That is why old examples write this.textContent inside onclick. Preferevent.currentTarget when you want the same idea without relying onthis.

<button id="go">Count</button>
<p id="out">0</p>
<script>
  const button = document.getElementById("go");
  const out = document.getElementById("out");
  button.addEventListener("click", function () {
    const n = Number(out.textContent) + 1;
    out.textContent = String(n);
    this.textContent = "Count (" + n + ")";
  });
</script>

Here this is the button. An arrow handler would not set this to the button — that is the next lesson.

call, apply, and bind

You can set this on purpose. fn.call(obj) runs fn withthis equal to obj. fn.bind(obj) returns a new function that always uses that object. You need these later, when you pass methods as callbacks.

What to remember

• this depends on the call, not on where the function was written.
• A method sees its owner. A plain function does not.
• Copying a method into a variable drops the owner.
• Inner functions need a saved const, bind, or an arrow.

Next: arrow functions — short syntax, and the rule that they do not bind their own this.