this in objects in Javascript - Step-by-Step Execution

Concept Flow - this in objects

Object created

↓

Method called on object

↓

Inside method: 'this' refers to object

↓

Access or modify object properties using 'this'

↓

Method returns or finishes

When a method is called on an object, 'this' inside the method points to that object, letting you access or change its properties.

Execution Sample

Javascript

const person = {
  name: 'Anna',
  greet() {
    return `Hi, I am ${this.name}`;
  }
};
console.log(person.greet());

This code defines an object with a method that uses 'this' to access the object's name property and prints a greeting.

Execution Table

Step	Code Line	Action	'this' Value	Output
1	const person = {...}	Create object 'person' with property 'name' and method 'greet'	{name: 'Anna', greet: function}
2	person.greet()	Call 'greet' method on 'person'	{name: 'Anna', greet: function}
3	Inside greet: return `Hi, I am ${this.name}`	'this' refers to 'person', access 'name' property	{name: 'Anna', greet: function}	Hi, I am Anna
4	console.log(...)	Print returned string to console		Hi, I am Anna

💡 Method call finished, output printed, execution stops.

Variable Tracker

Variable	Start	After greet call	Final
person	{name: 'Anna', greet: function}	Same object during method call	Same object after call

Key Moments - 2 Insights

Why does 'this.name' inside the method refer to 'Anna'?

'this' inside the method points to the object that called it, which is 'person'. So 'this.name' accesses 'person.name' which is 'Anna' (see execution_table step 3).

What if we call the method without the object, like const greetFunc = person.greet; greetFunc()?

Then 'this' is not bound to 'person' and usually becomes undefined or global object, so 'this.name' won't be 'Anna'. This is because 'this' depends on how the function is called, not where it is defined.

Visual Quiz - 3 Questions

Look at the execution_table step 3, what does 'this' refer to inside the greet method?

A Undefined

B The 'person' object

C The global object

D The greet function itself

💡 Hint

Check the 'this' Value column in step 3 of execution_table.

At which step is the greeting string 'Hi, I am Anna' created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Output column in execution_table to see when the string is formed.

If we assign greet to a variable and call it alone, what happens to 'this' inside greet?

A 'this' becomes undefined or global object

B 'this' still refers to 'person'

C 'this' refers to the greet function

D 'this' causes an error

💡 Hint

Refer to key_moments explanation about calling method without object.

Concept Snapshot

Object methods use 'this' to access their own properties.
When calling obj.method(), 'this' inside method points to obj.
Use 'this.property' to read or change object data.
Calling method without object loses 'this' binding.
'this' depends on call site, not where function is defined.

Full Transcript

This visual execution shows how 'this' works inside object methods in JavaScript. First, an object named 'person' is created with a name and a greet method. When we call person.greet(), inside the method 'this' points to the 'person' object. So 'this.name' accesses 'Anna'. The method returns the greeting string which is printed. If we call the method without the object, 'this' loses its binding and won't refer to 'person'. This example helps understand how 'this' depends on how a function is called, especially in objects.