over 2 years ago

JavaScript the value of this inside a function

The value of this depends on how the function is called. There are four ways to call a function:

• function invocation
• method invocation
• constructor invocation
• apply/call invocation

Function Invocation

In this case, this inside the function add is always bound to the global variable of the environment. (It is the Window object in this case because I run the code inside a browser)

A special case of function invocation is closure:

It is tempting to think the this value inside the plus() function is tied to add. However, that is not the case as it is explained in this post. plus is still triggered via function invocation, so this still points to the global variable.

Method Invocation

When ever the dot notation is used, a method invocation happens. In this case, the value of this equals to the object before the dot. So in this case, this == person. Because person.name = "John", this.name == "John".

A special case is nested objects:

whoever is closest to the function call is the value of this.

Constructor Invocation

In this case, a new object has been created. The keyword this points to the newly created object. The function setName() is equivelent to the following code:

Apply/Call Invocation

By using Apply or Call (or bind), you can specify the value of this:

When setName() is called the first time, name is created on the window object. If we want to attach the name property to a different object, we can use apply or call (or bind).