In JavaScript, the this keyword is one of the most powerful but also most confusing features, especially for beginners. It refers to the object that is currently executing the code, but what exactly it refers to depends on how a function is called. In this tutorial, we’ll break down the different contexts where this behaves differently, and how you can confidently use it in your code.
1. Global Context
When this is used outside of any function or object (in the global context), it refers to the global object.
- In a browser, the global object is
window. - In Node.js, the global object is
global.
javascriptCopyEditconsole.log(this); // In browser: window
In strict mode ('use strict';), this in the global context is undefined.
2. Inside a Function
When this is used inside a regular function, its value depends on how the function is called.
javascriptCopyEditfunction show() {
console.log(this);
}
show(); // In non-strict mode: window (or global object)
// In strict mode: undefined
However, if the function is called as a method of an object, this refers to the object.
3. Object Methods
When a function is a property of an object (a method), this refers to the object calling the method.
javascriptCopyEditconst user = {
name: 'Alice',
greet: function () {
console.log(`Hello, my name is ${this.name}`);
}
};
user.greet(); // "Hello, my name is Alice"
Here, this.name accesses the name property of the user object.
4. Arrow Functions
Arrow functions do not have their own this. Instead, they inherit this from the enclosing (lexical) scope.
javascriptCopyEditconst person = {
name: 'Bob',
greet: function () {
const inner = () => {
console.log(`Hi, I'm ${this.name}`);
};
inner();
}
};
person.greet(); // "Hi, I'm Bob"
In the example above, inner is an arrow function, so it takes this from the surrounding greet function, which has this bound to person.
This makes arrow functions especially useful in cases like setTimeout, event handlers, or array methods where this might otherwise change.
5. Constructors and new
When a function is used as a constructor (with the new keyword), this refers to the newly created object.
javascriptCopyEditfunction Car(make) {
this.make = make;
}
const myCar = new Car('Toyota');
console.log(myCar.make); // 'Toyota'
6. call, apply, and bind
These methods allow you to explicitly set the value of this.
call and apply
javascriptCopyEditfunction sayHello() {
console.log(`Hello, I'm ${this.name}`);
}
const user = { name: 'John' };
sayHello.call(user); // "Hello, I'm John"
sayHello.apply(user); // same result
bind
Returns a new function with this permanently set to the given value.
javascriptCopyEditconst boundFunc = sayHello.bind(user);
boundFunc(); // "Hello, I'm John"
7. In Event Handlers
In HTML DOM event handlers, this refers to the element that triggered the event.
htmlCopyEdit<button onclick="console.log(this)">Click me</button>
This logs the button element itself.
However, inside event listeners attached using JavaScript, this also refers to the element:
javascriptCopyEditdocument.querySelector('button').addEventListener('click', function () {
console.log(this); // the button element
});
If you use an arrow function here, this will not refer to the element but to the outer lexical context.
Conclusion
The value of this in JavaScript can vary based on how and where it is used:
- In global functions: global object (
windoworglobal) - In object methods: the object itself
- In arrow functions: inherits from parent scope
- In constructors: new instance
- With
call,apply,bind: explicitly set
Mastering this takes time and practice, but understanding these patterns will help you avoid common bugs and write clearer, more predictable JavaScript.