What this keyword represents in Javascript - Step-by-Step Execution

Concept Flow - What this keyword represents

Start Execution

↓

Function or Method Call

↓

Determine 'this' Context

↓

Global Object (window in browser)

↓

Object owning the method

↓

New Object (in constructor)

↓

Explicit binding (call, apply, bind)

↓

Execute Function with 'this'

↓

Return Result

↓

End Execution

Shows how JavaScript decides what 'this' means depending on how a function is called.

Execution Sample

Javascript

const obj = {
  name: 'Alice',
  greet() { return this.name; }
};

console.log(obj.greet());

Calls a method on an object; 'this' refers to the object, so it returns 'Alice'.

Execution Table

Step	Code Line	'this' Value	Action	Output
1	const obj = {...}	N/A	Create object with name and greet method	obj created
2	obj.greet()	obj	Call greet method; 'this' is obj	returns 'Alice'
3	console.log(...)	N/A	Print returned value	Alice
4	End	N/A	Execution ends	N/A

💡 Function call completed; 'this' was obj during greet method execution.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
obj	undefined	{name: 'Alice', greet: function}	{name: 'Alice', greet: function}	{name: 'Alice', greet: function}
this (in greet)	N/A	N/A	{name: 'Alice', greet: function}	N/A
return value	N/A	N/A	'Alice'	'Alice'

Key Moments - 2 Insights

Why does 'this' refer to obj inside greet()?

'this' refers to the object before the dot when a method is called, as shown in step 2 of the execution_table.

What if greet() was called without obj, like just greet()?

Then 'this' would refer to the global object or undefined in strict mode, not obj, because the call context changes.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of 'this' inside greet()?

A Undefined

B The global window object

C The obj object

D The greet function itself

💡 Hint

Check the 'this' Value column at step 2 in the execution_table.

At which step is the returned value 'Alice' printed to the console?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the Output column in the execution_table for console.log.

If greet() was called as a standalone function (not via obj), what would 'this' likely be?

A obj

B The global object or undefined

C null

D The greet function

💡 Hint

Recall the key_moments explanation about call context affecting 'this'.

Concept Snapshot

'this' keyword in JavaScript:
- Refers to the object that calls the function.
- In method calls, 'this' is the object before the dot.
- In standalone functions, 'this' is global object or undefined (strict mode).
- Can be set explicitly with call, apply, or bind.
- Changes depending on how function is called.

Full Transcript

This visual execution shows how JavaScript decides what 'this' means. When a method is called on an object, 'this' points to that object. For example, calling obj.greet() sets 'this' inside greet to obj, so it returns obj.name, 'Alice'. The execution table traces each step: creating the object, calling the method, and printing the result. Key moments highlight that 'this' depends on call context. The quiz tests understanding of 'this' value during method calls and standalone calls.