Mastering JavaScript’s this: When, Why, and How It Changes

When learning JavaScript, we often form vague or inaccurate conclusions about concepts like

this

, which then spread online and cause confusion.

One common misconception is “whoever calls a function,

this

points to that caller.” This works in some cases but fails in many, leading to puzzling bugs.

Search results on Baidu often contain incorrect knowledge that misleads developers for a long time.

Therefore, a thorough article is needed to give a correct, complete understanding of

this

. First, we review the execution context.

In previous posts I described the lifecycle of an execution context; the diagram below summarizes it.

During the creation phase, a variable object, a scope chain, and the

this

binding are established. The crucial point is that

this

is determined when the function is called, i.e., when the execution context is created. Consequently, the same function can have different

this

values depending on how it is invoked.

Once

this

is fixed during execution, it cannot be changed.

1. this in the Global Object

In the global environment,

this

points to the global object itself, which makes it relatively simple.

2. this in Functions

To feel the unpredictability of

this

inside functions, consider the following strange examples.

Conclusion: In a function context,

this

is provided by the caller. If the caller is an object that owns the function,

this

points to that object; if the function is called independently,

this

is

undefined

(or the global object in non‑strict mode).

For example:

fn()

– independent call,

this

is

undefined

.

window.fn()

– the function belongs to

window

, so

this

points to

window

.

In demo03,

obj.c

uses

this.a + 20

, but

obj.c

is not a function, so the previous rule does not apply. The rule is:

When

obj

is declared globally, any use of

obj.c

has

this

bound to the global object; when

obj

is declared inside a function,

this

is

undefined

(or the global object in non‑strict mode).

In real development, this pattern is not recommended. Strict mode is essential; most modern codebases already use it, and ES6 defaults to strict mode.

Additional examples reinforce the distinction between a caller that owns the function and an independent call.

foo.getA()

–

getA

is owned by

foo

, so

this

points to

foo

.

test()

– independent call,

this

is

undefined

(or

window

in non‑strict mode).

Further code modifications illustrate the same principle.

3. Using call and apply to Explicitly Set this

JavaScript provides

call

and

apply

to manually set the

this

binding. Both methods belong to every function; the first argument is the object that should become

this

.

Example:

fn

is not a method of

obj

, but

fn.call(obj)

binds

this

inside

fn

to

obj

, allowing access to

obj.a

.

The arguments after the first are passed to the target function:

call

passes them one by one, while

apply

passes an array. This difference enables many useful scenarios:

1. Convert array‑like objects to true arrays

2. Flexibly modify the this binding

3. Implement inheritance

In a constructor like

Student

,

Parent.call(this)

copies the parent’s initialization code and ensures

this

points to the new

Student

instance.

4. Preserve this when passing functions between contexts

When a callback loses its original

this

, we can store the reference in a variable, use

bind

, or apply

call/apply

to restore it.

Common solution: assign

var self = this

before entering the inner function, or use

Function.prototype.bind

(available natively in ES5).

ES5’s built‑in

bind

method achieves the same effect.

4. this in Constructors and Prototype Methods

When using

new

, the process involves four steps:

1. Create a new empty object.

2. Bind the constructor’s

this

to that new object.

3. Execute the constructor code, adding properties and methods to the object.

4. Return the new object.

Thus, inside a constructor,

this

refers to the newly created instance (e.g.,

p1

).

For prototype methods, the rule is the same: the method’s

this

points to the object that invoked it, such as

p1.getName()

where

this

is

p1

.

In summary, mastering the binding rules of

this

, understanding strict mode, and leveraging

call

,

apply

, and

bind

will help you avoid common pitfalls and write more predictable JavaScript code.