JavaScript this
One label function can say Mug, then miss the mug, then say Cup. The braces stayed put. The call changed. JavaScript picks this at the call, not while you are typing the function.
After the plain method call
The methods page stored a function on the object and ran it as product.tag(). On that shape, this was the object before the dot. That page stopped there. Here the function stays put and the call changes: lifted off the object, aimed with call, locked with bind, or written as an arrow.
Five ways the call sets this
📊 Method, bare, call, bind, arrow
| Shape | Example | Where this lands |
|---|---|---|
| method | product.tag() |
the object before the dot |
| bare | let show = product.tag; show() |
not that object (undefined in strict mode) |
| call | product.tag.call(cup) |
the object you hand to call, for this run only |
| bind | product.tag.bind(product) |
locked to that object on later calls |
| arrow | () => this.name inside another function |
the outer function’s this, not the object before the dot |
Name the call before you read this. Parking the function on the object does not freeze this. The call decides it. bind decides it ahead of a later call. An arrow ignores the call and reads the function wrapped around it.
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());
The dot still names the object
product.tag() runs tag and sets this to product. The console prints Mug. That is the rule from the methods page, kept here as the baseline. The next four calls leave that baseline on purpose.
"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());
Lift the function off and the mug goes with the dot
show and product.tag are the same function. show() has no object before a dot, so in strict mode this is undefined. The guard returns missing. Drop the guard and this.name throws. Strict mode is the predictable rule on this page. A loose script can point a bare call at the global object instead.
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));
call borrows the function for one object
product.tag.call(cup) still runs the mug’s tag, but this is cup for that run only. The console prints Cup. product.name stays Mug. call does not paste the function onto cup. apply does the same job when the extra arguments sit in an array — this label does not need them.
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());
bind keeps the object for a later bare call
bind returns a new function. Inside it, this stays product even though show() has no dot. The console prints Mug. The original tag is unchanged. Use bind when a button, a timer, or some other function will call the method without the object in front.
"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());
An arrow does not take this from the dot
product.tag() looks like a method call, yet tag is an arrow. An arrow has no this of its own. It uses this from make, and make ran as shelf.make(), so this is shelf. The console prints Shelf, not Mug. A normal method on product would have printed Mug. Arrows showed up on an earlier page; this page only shows what they do to this.
Match the call to the job
The object sits before the dot? Read this as that object. You lifted the function off and did not bind it? Do not expect the object. One different object, one run? Use call. A later call with no dot must still see the mug? bind first. You wrote an arrow? Look outward to the function around it, not at the object before the dot. Constructors and classes set this too, and they wait for a later page. Next is JSON: text that describes data, not another rule for this.
Put a bound label on the page
Lock tag to the mug with bind, then call that new function with no dot. Write the result into a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>
The paragraph shows Mug. show() has no object before a dot, and the line still names the mug because bind locked this. Change product.name, refresh, and the paragraph follows. Next lesson: JSON — text that describes data, not a new rule for this.
Practice steps
- Call
product.tag()and readMug. - Copy the function to
show, callshow()in strict mode, and readmissing. - Call
product.tag.call(cup)and readCup. - Bind
tagtoproduct, call the new function with no dot, and readMug. - Run
shelf.make()and readShelf, notMug. - In the HTML demo, change only
product.name, refresh, and read the paragraph.
Frequent slip-ups
- Treating
thisas frozen because the function sits on the object - Calling
show()in strict mode and still expectingMug - Thinking
callcopiestagontocup - Expecting
bindto rewrite the originaltaginstead of returning a new function - Writing an arrow as the method and expecting the object before the dot
- Reading the next page as another
thisrule — JSON is a text format for data
Summary
thisis chosen by the call, not by the bracesobject.method()setsthisto the object before the dot- A bare call in strict mode does not point
thisat that object callsetsthisto the object you pass, for that run onlybindreturns a function whosethisstays locked- An arrow uses
thisfrom the surrounding function - A bound call can fill one line on the page
- Next: JSON, text that describes data
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top