How the Keyword “this” Works

It’s essential to know that in JavaScript, the keyword <kbd class="highlighted">this</kbd> operates differently in comparison with other programming languages. This snippet is there to help you find out where it works and how.

The value of <kbd class="highlighted">this</kbd> in JavaScript is determined by the invocation context of the function (<kbd class="highlighted">context.function()</kbd>) , as well as where it is called.

The Usage of this in Global Context

In the event of using <kbd class="highlighted">this</kbd> in the global context, it is bound to the global object.

Here is an example:

Javascript this keyword

javascript— editable

If you use <kbd class="highlighted">this</kbd> within a function defined in the global context, it is still bound to the global object.

The example looks like this:

Javascript this keyword

javascript— editable

The method of the global object is above <kbd class="highlighted">func</kbd>.

It can also be invoked on <kbd class="highlighted">window</kbd> object, like this:

Javascript this keyword

<!DOCTYPE html>
<html>
  <body>
    <script>
      function func() {
        return this;
      }
      alert(window.func()); //[object Window]
    </script>
  </body>
</html>

Try it Yourself »

Inside the Object Method

In the case of using <kbd class="highlighted">this</kbd> keyword inside an object method, it is bound to the immediate enclosing object, as follows:

Javascript this keyword

javascript— editable

Invoking Context-Less Function

If you use <kbd class="highlighted">this</kbd> inside a function that is called without any context, it is bound to the global object.

The example looks like this:

Javascript this keyword

<!DOCTYPE html>
<html>
  <body>
    <script>
      let context = "global";
      let obj = {
        context: "object",
        method: function() {
          function func() {
            let context = "function";
            return this + ":" + this.context;
          };
          return func(); //invoked without context 
        }
      };
      alert(obj.method()); //[object Window]:global
    </script>
  </body>
</html>

Try it Yourself »

Inside the Constructor Function

If the function is used as a constructor (when called with the new operator), <kbd class="highlighted">this</kbd> inside the function body shows the new object being constructed.

Here is an example:

javascript this keywordJ

javascript— editable

Inside the Function Defined On the Prototype Chain

In case the method is on an object prototype chain, <kbd class="highlighted">this</kbd> inside it relates to the object the method was executed on as if it is defined on the object.

The example looks like this:

Javascript this keyword

javascript— editable

Inside the Call(), Apply() and Bind() Functions

The methods such as Call, Apply, and Bind are described in Function.prototype.

These methods allow writing a function once and invoke it in many contexts. In other words, they help to specify the value of <kbd class="highlighted">this</kbd> that may be used while the function is being invoked.

The <kbd class="highlighted">func.apply(obj1 [, argsArray])</kbd> can set the <kbd class="highlighted">obj1</kbd> as the value of <kbd class="highlighted">this</kbd> inside <kbd class="highlighted"> func()</kbd> calling <kbd class="highlighted"> func()</kbd> and passing the elements of <kbd class="highlighted">argsArray</kbd> like its elements.
The <kbd class="highlighted">func.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])</kbd> can set the <kbd class="highlighted">obj1</kbd> as the value of <kbd class="highlighted">this</kbd> inside <kbd class="highlighted">func()</kbd> calling <kbd class="highlighted">func()</kbd> passing <kbd class="highlighted">arg1, arg2, arg3, …</kbd> like its arguments.
The <kbd class="highlighted">fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])</kbd> can return the reference to the function func using <kbd class="highlighted">this</kbd> within <kbd class="highlighted">func</kbd> bound to <kbd class="highlighted">obj1</kbd>, as well as the parameters of <kbd class="highlighted">func</kbd> bound to the parameters such as <kbd class="highlighted"> arg1, arg2, arg3,...</kbd> .

Inside Arrow Functions

In the arrow functions, <kbd class="highlighted">this</kbd> operates like standard variables. It is inherited from its lexical scope.

It looks the same as here:

javascript this keyword

(function () {}).bind(this)

Also, take a look at the following code:

Javascript this keyword

javascript— editable

So, the operator <kbd class="highlighted">this</kbd> plays a vital role in JavaScript. It is also one of the misunderstood concepts of JavaScript as it behaves differently in other programming languages. Naturally, it refers to the owner of the function that is being currently executed.