A Complete Guide to the JavaScript this Keyword: From Concepts to Practical Examples

Complete Guide to the JavaScript this Keyword
In JavaScript, the this keyword is one of the trickiest yet most important concepts.
When I first started learning JavaScript, I often wondered, “Why does this behave like that?” 😅
But once you carefully understand the principles and try enough examples, you’ll realize that this actually makes JavaScript more flexible and powerful.
In this guide, we’ll go through the basics of this → execution context → global/functions/methods/classes/arrow functions → call/apply/bind → events/timers → real-world use cases (React, Vue, Node.js) → FAQ in detail.
📌 What is the this Keyword?
One-line definition: this is the reference bound to the execution context when a function is called.
In many languages, this refers to the "current object."
But JavaScript is different.
In JavaScript, the value of this depends on how the function is called (the call site).
That’s the main source of confusion.
📌 Execution Context and this
JavaScript code runs inside an Execution Context.
Each execution context contains:
- Variable Environment
- Lexical Environment
- this binding
👉 This means that the value of this is determined when the execution context is created.
📌 this in the Global Context
// Browser
console.log(this) // window
// Node.js
console.log(this) // {}- Browser: global object
window - Node.js:
{}due to module system
👉 Confusing already, right? The same code can behave differently depending on the environment.
📌 this in Function Calls
function showThis() {
console.log(this)
}
showThis()- Non-strict mode:
window(browser global object) - Strict mode (
'use strict'):undefined
'use strict'
function strictModeTest() {
console.log(this)
}
strictModeTest() // undefined📌 this in Object Methods
const user = {
name: 'Chulsoo',
greet() {
console.log(`Hello, my name is ${this.name}!`)
}
}
user.greet() // Hello, my name is Chulsoo!👉 Here this refers to the user object.
👉 Rule: The object before the dot (.) determines this.
❌ Common Mistake
const hello = user.greet
hello() // strict mode: undefined / non-strict: window👉 Extracting a method into a variable breaks the this binding.
✅ Fix: use bind
const helloBound = user.greet.bind(user)
helloBound() // Hello, my name is Chulsoo!📌 this in Nested Objects
const team = {
name: 'Dev Team',
member: {
name: 'Younghee',
introduce() {
console.log(`I am ${this.name}!`)
}
}
}
team.member.introduce() // I am Younghee!👉 Here this refers to member, not team.
📌 this in Constructors and Classes
Constructor Function
function Person(name) {
this.name = name
}
const p1 = new Person('Minsu')
console.log(p1.name) // Minsu👉 Using new creates a new object, and this refers to that object.
Class
class Car {
constructor(model) {
this.model = model
}
show() {
console.log(`This car is a ${this.model}!`)
}
}
const c = new Car('Tesla')
c.show() // This car is a Tesla!📌 this in Arrow Functions
Arrow functions are special: they don’t have their own this; they inherit it from the enclosing scope.
const obj = {
name: 'Hong',
say: () => {
console.log(this.name)
}
}
obj.say() // undefined👉 Here this is not obj but the outer (global) scope.
Correct Use Case
function Timer() {
this.seconds = 0
setInterval(() => {
this.seconds++
console.log(this.seconds)
}, 1000)
}
new Timer()👉 Arrow functions help retain the outer this inside callbacks.
📌 Changing this with call, apply, bind
function introduce(age) {
console.log(`${this.name}, ${age} years old.`)
}
introduce.call({ name: 'Jiyoung' }, 25) // Jiyoung, 25 years old.
introduce.apply({ name: 'Minho' }, [30]) // Minho, 30 years old.
const boundFunc = introduce.bind({ name: 'Suji' }, 28)
boundFunc() // Suji, 28 years old.👉 Summary:
- call → executes immediately, arguments as list
- apply → executes immediately, arguments as array
- bind → returns a new function
📌 this in Event Handlers
<button id="btn">Click</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
console.log(this) // the button element
})
</script>👉 In regular functions, this refers to the element.
⚠️ But with arrow functions:
document.getElementById('btn').addEventListener('click', () => {
console.log(this) // window
})📌 this in setTimeout / setInterval
setTimeout(function() {
console.log(this) // window
}, 1000)👉 Fix with arrow function:
setTimeout(() => {
console.log(this) // inherits from outer scope
}, 1000)📌 this in React
Class Component
class Counter extends React.Component {
constructor(props) {
super(props)
this.state = { count: 0 }
this.increment = this.increment.bind(this)
}
increment() {
this.setState({ count: this.state.count + 1 })
}
render() {
return <button onClick={this.increment}>Click {this.state.count}</button>
}
}👉 Without bind, this becomes undefined.
👉 Function components solve this with hooks and arrow functions.
📌 this in Vue
new Vue({
data() {
return { msg: 'Hello' }
},
methods: {
show() {
console.log(this.msg)
}
}
})👉 In Vue 2, this refers to the component instance.
👉 In Vue 3 Composition API, this is not used; values come from setup().
📌 this in Node.js
console.log(this) // {}
function normal() {
console.log(this)
}
normal() // undefined (strict mode)👉 Due to the module system, global this in Node.js behaves differently.
📌 20 Common this Examples
- Global function call
- Strict mode function call
- Object method
- Method extracted to variable
- Nested objects
- Constructor function
- Class
- Class method extracted
- Arrow function
- Arrow + setTimeout
- call
- apply
- bind
- Event handler (normal)
- Event handler (arrow)
- setInterval context
- React class component
- React functional component with hooks
- Vue 2 Options API
- Node.js module scope
❓ FAQ: Common Questions about this
- What does
thismean in JavaScript? - Why is
thisundefined in strict mode? - How does
thisbehave in arrow functions? - Why does extracting a method break
this? - Difference between call, apply, and bind?
- What does
thisrefer to in event handlers? - Why is
thiswindow inside setTimeout? - Why do we need to bind
thisin React class components? - Why is
thisnot used in Vue 3? - Why is global this
{}in Node.js?
📚 References
✅ Conclusion
The JavaScript this keyword is a dynamic reference that depends on how a function is called.
It may feel confusing, but with plenty of examples and practice, you’ll get comfortable with it.
👉 Now, this shouldn’t feel scary anymore! 🚀