The this keyword

Inside a regular function, the word this stands for an object. A regular function is one written with the function keyword, or as a method in an object. It is not an arrow function. Which object is this? That depends on how you call the function.

You met the simple case in Methods & this. In user.sayHi(), this is user, the object before the dot. This lesson gives you the full set of rules.

The most important idea is the call site. The call site is the place in your code where a function is called, like user.sayHi(). To find this, don't look at where the function was written. Look at where it is called. The same function can get a different this each time you call it in a different way.

This lesson uses regular functions everywhere. Arrow functions are different. An arrow function has no this of its own, so the four rules below don't apply to it. The lesson Arrow functions & lexical this covers arrows.

A call site is the exact piece of code that calls a function. It can take four shapes:

• fn(): a plain call, with no object.
• obj.fn(): a call through an object.
• fn.call(obj): a call that names the object to use.
• new Fn(): a call that builds a new object.

JavaScript looks at the shape of the call site. It picks this before the function's code starts to run.

const cart = {
  label: "tea",
  show() {
    return this.label;
  },
};
console.log(cart["show"]());

Lines 1 to 6 make a cart object with a label and a show method. Line 7 calls the method with square brackets: cart["show"](). The object cart still comes right before the method name. So this is cart, and the line prints tea. Square brackets only change how you write the method name. They don't change which object becomes this.

Now try the trainer below. Each choice is a short program. Pick one, guess the rule, then step through it. The answers come from running the real code.

1const ada = {2  label: "Ada",3  whoAmI() {4    return this.label;5  },6};7ada.whoAmI();Run

Two details are worth remembering:

• In building.room.whoAmI(), this is building.room, not building. Only the object right before the method name counts.
• If you save a method in a plain variable and then call fn(), there is no dot any more. That is a new call site, with no object.

The panel below shows every call from the trainer at once. Pick a call to see its code, its result, and the rule that set this.

1const ada = {2  label: "Ada",3  whoAmI() {4    return this.label;5  },6};7ada.whoAmI();

Setting this for a call is called binding. Regular functions have four binding rules. Each rule matches one shape of call:

• Default binding: a plain call, like fn(). There is no object.
• Implicit binding: a call through an object, like obj.fn(). The object becomes this.
• Explicit binding: call, apply, or bind name the object you want. You choose this yourself.
• new binding: new Fn() builds a brand-new object, and that object becomes this.

The table puts the four rules side by side. Read each row as: when the call looks like this, this becomes that.

Explicit binding gets its own lesson next: call, apply & bind. For now, here is what each one does:

• fn.call(obj, a, b) calls the function now. It uses obj as this and passes the arguments one by one.
• fn.apply(obj, [a, b]) does the same, but takes the arguments in an array.
• fn.bind(obj) doesn't call anything yet. It gives back a new function that always uses obj as this. That new function is called a bound function.

Most call sites fit just one rule. A few fit two rules at once. Then JavaScript uses a fixed order, called precedence. The stronger rule wins:

1. new beats a bound function.
2. A bound function beats a later call or apply.
3. call or apply beats a call through an object.
4. A call through an object beats a plain call.

1function show() {2  "use strict";3  return this.label;4}5function Reporter() {6  this.label = "new reporter";7}8Reporter.prototype.show = show;9 10const ada = { label: "Ada", show };11const grace = { label: "Grace" };12const bound = show.bind({ label: "Bound target" });13const BoundReporter = Reporter.bind({ label: "Bound target" });14 15ada.show.call(grace);Run16bound.call(grace);17new BoundReporter().show();

The replay shows three calls where two rules fit. Each line has one winner:

• Line 15, ada.show.call(grace): the code reads show from ada, but call(grace) wins. It returns Grace.
• Line 16, bound.call(grace): bound already has its this fixed. The later call(grace) can't change it. It returns Bound target.
• Line 17, new BoundReporter().show(): new still builds a fresh object, even for a bound function. It returns new reporter.

Strict mode is a stricter set of JavaScript rules. You turn it on with the line "use strict". Code without it runs in sloppy mode, the older, looser rules. Strict mode changes only two things about this:

• A plain call. Strict mode leaves this as undefined. Sloppy mode puts globalThis there instead. globalThis is the global object: the big object that holds global names like console.
• A primitive value as this. A primitive is a simple value, like the number 5. With call(5), strict mode keeps this as the plain number. Sloppy mode first wraps it in a Number object. This wrapping is called boxing.

1function strictPlain() {2  "use strict";3  return this;4}5function sloppyPlain() {6  return this;7}8function strictNumber() {9  "use strict";10  return typeof this;11}12function sloppyNumber() {13  return typeof this;14}15 16console.log(strictPlain() === undefined);Run17console.log(sloppyPlain() === globalThis);18console.log(strictNumber.call(5));19console.log(sloppyNumber.call(5));

This page's own code always runs in strict mode, so it can't show sloppy mode directly. The panel below runs a small old-style script in a separate, locked-down frame. A frame like this is called an iframe. The panel shows what the script reports.

1<!doctype html><meta charset="utf-8"><script>2function plain() { return this === globalThis; }3function primitive() { return typeof this; }4parent.postMessage({ kind: "this-keyword-sloppy", plain: plain(), primitive: primitive.call(5) }, "*");5</script>

The table compares the two modes. Read each row as: for this call, here is this in each mode.

This site's lessons are written as ES modules. A module is a JavaScript file that can import and export code. Modules always use strict mode. Class bodies always use strict mode too. So the sloppy results above come from the lesson's tests and the iframe, not from this page's own code.

Where you'll use this

You'll meet this in objects, classes, array methods, event handlers, and many libraries. Here are the patterns you'll see most.

1const user = {2  label: "Ada",3  getLabel() { return this.label; },4};5const getLabel = user.getLabel;6console.log(getLabel.call(user));

Line 5 copies the method into a plain variable, getLabel. Calling getLabel() on its own would be a plain call, with no object. Line 6 calls getLabel.call(user) instead. That names user as this, so it prints Ada. The lesson Losing this goes deeper into this problem.

1const cartLike = { 0: "book", 1: "pen", length: 2 };2const joined = Array.prototype.join.call(cartLike, " + ");3console.log(joined);

Line 1 makes an object that looks like an array. It has the keys 0 and 1, and a length. An object like this is called array-like. It has no join method of its own. Line 2 borrows join from arrays and calls it with cartLike as this. Line 3 prints book + pen. Using another object's method like this is called method borrowing.

Callbacks, classes, and browser handlers

A callback is a function you pass to another function, which calls it later. A callback doesn't get a special this just because you passed it. The function that calls it decides. Here is what happens in three common cases:

• Some array methods take an extra argument called thisArg, like array.forEach(fn, thisArg). They use it as this for the callback.
• A class method still uses the object before the dot.
• A browser event listener gets its element as this, but only if the listener is a regular function.

const user = { name: "Asha" };
function greet() {
  console.log(this.name);
}
[1].forEach(greet, user);

Line 1 makes a user object. Lines 2 to 4 define a regular function that prints this.name. Line 5 passes greet to forEach, with user as the second argument. The array [1] has one item, so the callback runs once. forEach uses its second argument as this, so it prints Asha. This is a feature of forEach, not a fifth rule.

const user = {
  name: "Asha",
  showName() {
    [1].forEach(() => console.log(this.name));
  },
};
user.showName();

Line 7 calls user.showName(), so inside showName, this is user. Line 4 passes an arrow function to forEach. An arrow has no this of its own, so it uses the this of showName, which is user. It prints Asha. This is why arrows are handy for callbacks. A regular callback would need thisArg or call to get the right this.

class Profile {
  constructor(name) {
    this.name = name;
  }
  label() {
    return this.name;
  }
}
const profile = new Profile("Asha");
console.log(profile.label());

Lines 2 to 4 are the constructor. On line 9, new builds a fresh object, and the constructor stores name on it. Line 10 calls profile.label(), so this is profile, and it prints Asha. Class bodies always use strict mode, but a call through an object still works the normal way.

<!doctype html>
<button id="save">Save</button>
<script>
  const button = document.querySelector("#save");
  button.addEventListener("click", function () {
    console.log(this.id);
  });
</script>

Line 2 makes a button with the id save. Line 5 adds a click listener. The listener is a regular function, so when you click, this is the button. Line 6 prints this.id, which is save. An arrow function listener would not get the button as this. It would use the this from the code around it. This example needs a real web page, so the editor shows it but can't run it.

console.log(typeof this);

Top-level code is code that isn't inside any function. In a module, top-level this is undefined, so typeof this is "undefined" and the line prints undefined. This is a rule for modules. It is not the default binding of a function call. The lesson editor runs old-style scripts, not modules, so this example isn't run here. Browsers and Node run it as a module, for example from a .mjs file.

Common misconceptions

• “this is the object the function belongs to.” Only for a call through an object, like obj.fn(). If you save the method in a variable and call it on its own, the object is gone.
• “With nested objects, the outer object is this.” Only the object right before the method name counts. In building.room.whoAmI(), that is building.room.
• “call can change the this of a bound function.” A bound function keeps its this. A later call can't change it.
• “Strict mode breaks methods.” Strict mode changes only plain calls and primitive values. A call through an object still uses the object before the dot.
• “Arrow functions follow these four rules.” An arrow has no this of its own. It uses the this of the code around it.

Key takeaways

• For a regular function, the call site decides this.
• There are four rules: default, implicit, explicit, and new binding.
• When two rules fit, the order is: new, then a bound function, then call/apply, then a call through an object, then a plain call.
• In strict mode, a plain call leaves this as undefined, and a primitive stays a primitive.
• Arrow functions are different. They use the this of the code around them.

Final definition: this is the object a regular function gets from the way it is called. Arrow functions are the exception: they use the this of the code around them.

Up next: call, apply & bind.