this?The this keyword refers to the execution context of a function. In simpler terms, it’s a hidden parameter passed to every function that answers the question: “Who is calling me?”
Most typically, it is used in object methods, where this refers to the object that the method is attached to. This allows the same method to be reused on different objects and access sibling properties.
const contextTest = { prop: 42, func() { return this.prop; } };
console.log(contextTest.func());42
In the example above, when contextTest.func() is called, it is accessed as a method of contextTest. Therefore, this inside the function refers directly to the contextTest object.
By using this, a method can read or modify other properties on the same object.
const counter = { count: 10, print() { console.log(this.count); } };
counter.print();10
Notice the syntax we used to define print()? We used method shorthand syntax. You can define methods on an object literal by completely omitting the function keyword and the colon.
const obj = { val: 1, getVal() { return this.val; } };
console.log(obj.getVal());1
The most important concept to grasp is that the value of this depends on how a function is invoked (runtime binding), not how it is defined.
When a regular function is invoked as a method of an object (e.g., obj.method()), this points to the object before the dot.
function show() { console.log(this.name); }
const obj1 = { name: 'A', show };
const obj2 = { name: 'B', show };
obj1.show();
obj2.show();A B
Even though show was defined globally, when invoked as obj1.show(), this evaluates to obj1. When invoked as obj2.show(), this evaluates to obj2.
```svg caption=“Inside a method called as car.printMake(), this refers to the object left of the dot — the receiver of the call, not the place the function was defined.”
Let's step through the execution context when a method is called directly on an object:
```javascript viz
const car = { make: 'Ford', printMake() { console.log(this.make); } };
car.printMake();FordA massive misconception among JavaScript developers is that the this keyword always points to the object where the method was defined in the source code. It does not!
If you extract a method from an object and call it standalone, it loses its context. When invoked as a standalone function (not attached to an object), this typically refers to the global object (in non-strict mode) or undefined (in strict mode).
Read the code. What exactly will it print? Commit to an answer before you look.
"use strict";
function testStandalone() { console.log(this); }
// What will this print?
testStandalone();undefined
This explains why passing a method as a callback (like setTimeout(car.printMake, 1000)) often breaks. The setTimeout function calls your method as a standalone function, stripping its this binding!
Does the `this` keyword always point to the object where the method was defined in the source code?
No, it points to the object on which it is currently being invoked — The value of `this` is determined at runtime by how the function is called. Extracting a method and calling it standalone loses the `this` context.
What does `this` point to when a regular function is invoked standalone (e.g. `func()`) in strict mode?
undefined — In strict mode, a standalone function's `this` is undefined, whereas in non-strict mode it defaults to the global window/global object.
Do arrow functions behave the same as regular functions with the `this` keyword?
No, arrow functions inherit `this` from their surrounding lexical scope — Arrow functions inherit `this` from their surrounding lexical scope. They do not get a new `this` when invoked as an object method.
Fix the object method so it returns the user's name.
You need to use 'this' to reference properties of the current object.
const user = {
name: 'Sam',
getName() {
return this.name;
}
};
console.log(user.getName());A developer extracted a printing method, but now it's failing to find the document. Fix the bug so the detached method preserves its 'this' binding to the `printer` object.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Use the `.call()` method on the `job` function to explicitly set `this`.
const printer = { doc: 'invoice.pdf', print() { console.log('Printing ' + this.doc); } };
const job = printer.print;
job.call(printer);