In most cases, the value of _this_ is determined by how a function is called. It can’t be set by assignment during execution, and it may be different each time the function is called. You can change _this_ context through _.call()_, _.apply()_ and _.bind()._ Value of _this_ is equal to the value of the object which invokes the function. _this_ is not assigned a value until an object invokes the function where _this_ is defined.

**Global Context**

When functions are executed in the global scope, value of _this_ is _window_ object. This is because when we call a function in global scope by default they are invoked on the Window object. In strict mode, value of _this_ in the global context will be undefined. Consider the below example:

**As an object method**

When a function is called as a method of an object, it’s **_this_** is set to the **_object the method is called on_**.

Example:

![](https://avatars2.githubusercontent.com/u/8353529?v=3&s=400)

![](https://hackernoon.com/hn-images/1*4U4_SFwPCuJf-9gwNxMKIQ.png)

In the above example, we have defined two _val_ variables, one in the global scope with value **37** and another inside **myObj** object with value **10**.

When we call **_myObj.someFunction(),_** as _someFunction()_ was called by _myObj_ object, value of **_this_** inside _someFunction_ will become equal to _myObj._

Hence, inside _someFunction_ when we do **console.log(this.val)**, it outputs **myObj’s val** variable value i.e 10.

When we do **window.val,** we get value 37 as global value for _val_ is 37.

Another example:

![](https://avatars2.githubusercontent.com/u/8353529?v=3&s=400)

In the above example, we have defined _someFunction_ outside _myObj_ object.

First we call _someFunction()_ on _myObj_ object, hence inside _someFunction_ value of **_this_** is equal to _myObj_ object.

In second case, we have called _someFunction()_ in the global scope which is same as writing _window.someFunction()_. Here, as _someFunction()_ has been called on _window_ object, value of _this_ is equal to _window_ object.

First we call _someFunction()_ in the context of _myObj_. Later we called the function in the global context and the value of _this_ inside the _someFunction()_ changed accordingly. This shows that the value of _this_ was determined dynamically on the basis of execution context.

**As a constructor**

When a function is used as a constructor (with the new keyword), its _this_ is bound to the new object being constructed. To understand what constructor function are, please go through [this article](https://medium.com/@happymishra66/create-objects-in-javascript-10924cfa9fc7).

![](https://avatars2.githubusercontent.com/u/8353529?v=3&s=400)

![](https://hackernoon.com/hn-images/1*JMqVMAXq8lHwHcS3q44UFQ.png)

Here, we have defined ConstructorFunc to create new objects. When

**var obj1 = new ConstructorFunction(20)** is executed, value of _this_ will be equal to the new object that is created.

**‘this’ in Immediately Invoked Function expression (IIFE)**

In _IIFE_, value of _this_ is always equal to Window object. Let’s see an example:

![](https://avatars2.githubusercontent.com/u/8353529?v=3&s=400)

**Console Output:**

**First example:**

![](https://hackernoon.com/hn-images/1*W8A8twPL0FXW59hghlHeGg.png)

In the first example, _IIFE outside any function_, value of _this_ inside IIFE will be _Window_ object.

**Second Example:**

![](https://hackernoon.com/hn-images/1*tVbfqUW4nJGkbfUcTIV7LQ.png)

In the second example, when we have called _IIFE_ inside _someFunc_ still the value of _this_ is _Window_ object not _obj_ object.

This is because, value of _this_ inside a function is equal to the object on which it is called. _someFunc_ is called on _obj_, hence value of _this_ inside _someFunc_ is _obj_. But, _IIFE_ is self-invoked, it has not been called by any object. Hence, the value of _this_ inside _IIFE_ is _Window_ object.

**Event handler in JavaScript**

Inside event handler, value of _this_ is equal to the element on which the event is fired. Let’s see this with an example of click event.

![](https://avatars2.githubusercontent.com/u/8353529?v=3&s=400)

In the above example, we have added an _on click event handler_ on the _div_ element which calls the _clickMe_ function.

![](https://hackernoon.com/hn-images/1*W2f68eKfA21QL-46C6NgUQ.png)

When we click on the _div_, from the above console output we can see that value of _this_ is equal to the _div_ element which we clicked.

We can change the value of _this_ at run time using **call, apply** and **bind** function. We will discuss call, apply and bind in another article.

**Other articles**

### [An Extensive Guide To Progressive Web Applications](https://medium.com/@amasand23/an-extensive-guide-to-progressive-web-applications-75ed0b3ea4c1)

1.  [Let’s get this ‘this’ once and for all](https://hackernoon.com/lets-get-this-this-once-and-for-all-f59d76438d34)
2.  [Service Workers](https://hackernoon.com/service-workers-62a7b14aa63a)
3.  [Service Workers implementation](https://hackernoon.com/building-pokemon-app-to-evaluate-the-power-of-berries-service-worker-176d7c4e70e3)
4.  [Virtual DOM in ReactJS](https://medium.com/@happymishra66/virtual-dom-in-reactjs-43a3fdb1d130)
5.  [Execution Context in JavaScript](https://medium.com/@happymishra66/execution-context-in-javascript-319dd72e8e2c)
6.  [Prototypes in JavaScript](https://medium.com/@happymishra66/prototypes-in-javascript-5bba2990e04b)
7.  [Inheritance in JavaScript](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)
8.  [Create objects in JavaScript](https://medium.com/@happymishra66/create-objects-in-javascript-10924cfa9fc7)
9.  [Objects in JavaScript](https://medium.com/@happymishra66/objects-in-javascript-2980a15e9e71)

Progressive

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

‘this’ in JavaScript

Too Long; Didn't Read

Company Mentioned

@happymishra66

RELATED STORIES