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

1. Global function call
2. Strict mode function call
3. Object method
4. Method extracted to variable
5. Nested objects
6. Constructor function
7. Class
8. Class method extracted
9. Arrow function
10. Arrow + setTimeout
11. call
12. apply
13. bind
14. Event handler (normal)
15. Event handler (arrow)
16. setInterval context
17. React class component
18. React functional component with hooks
19. Vue 2 Options API
20. Node.js module scope

❓ FAQ: Common Questions about this

1. What does this mean in JavaScript?
2. Why is this undefined in strict mode?
3. How does this behave in arrow functions?
4. Why does extracting a method break this?
5. Difference between call, apply, and bind?
6. What does this refer to in event handlers?
7. Why is this window inside setTimeout?
8. Why do we need to bind this in React class components?
9. Why is this not used in Vue 3?
10. Why is global this {} in Node.js?

📚 References

• MDN - this
• JavaScript Info - this

✅ 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! 🚀