Skip to content

This keyword in JavaScript | Basic code

  • by

The JavaScript this keyword refers to an object. In other words, the this references the object that is currently calling the function.

Suppose you have an object called counter that has a method next(). When you call the next() method, you can access the this object.

let counter = {
  count: 0,
  next: function () {
    return ++this.count;
  },
};

counter.next();Code language: JavaScript (javascript)

Inside the next() function, the this references the counter object. See the following method call:

counter.next();

This keyword in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<body>

  <script>

    const person = {
      firstName: "This",
      lastName : "Keyword",
      id       : 101,
      fullName : function() {
        return this.firstName + " " + this.lastName;
      }
    };

    console.log(person.fullName());

  </script>

</body>
</html> 

Output:

This keyword in JavaScript

Method Invocation

When used in an object method, this refers to the object. Here is this refers to the person object.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Global context

In the global context, the this references the global object, which is the window object on the web browser or global object on Node.js.

This behavior is consistent in both strict and non-strict modes. Here’s the output on the web browser:

console.log(this === window); // true

The call() and apply() method

The call() and apply() method allows us to write a method that can be used on different objects.

<script>  
    var emp_address = {  
        fullAddress: function() {  
            return this.company + " " + this.city+" "+this.state;  
        }  
    }  
    var address = {  
        company:"Javatpoint",  
        city:"Noida",  
        state:"UP",  
      
    }  
      
    document.writeln(emp_address.fullAddress.call(address));   
    document.writeln(emp_address.fullAddress.apply(address));
</script>  

The bind() Method

The bind() method was introduced in ECMAScript 5. It creates a new function whose this keyword refers to the provided value, with a given sequence of arguments.

<script>  
    var lang="Java";  
      
    function lang_name(call)  
    {  

       call();  
    };  
      
    var obj={  
 
      lang:"JavaScript",  
      language:function()  
      {  
        document.writeln(this.lang+ " is a popular programming language.");  
      }  
    };  
    lang_name(obj.language);  
    lang_name(obj.language.bind(obj));  
</script>  

The value of “this” is determined by how a function is called, and it can have different meanings depending on the context:

  1. Global Context: In the global context (outside of any function), “this” refers to the global object, which is usually the window object in web browsers or the global object in Node.js.
  2. Function Context: Inside a regular function, the value of “this” depends on how the function is called. If the function is called as a standalone function, “this” will again refer to the global object. However, if the function is called as a method of an object, “this” will refer to the object itself.
  3. Method Context: When a function is called as a method of an object, “this” refers to the object that the method is called on. In this case, “this” allows you to access and manipulate the properties and methods of the object.
  4. Constructor Context: When a function is used as a constructor function using the new keyword, “this” refers to the newly created object instance. Constructors are used to create new objects with shared properties and methods.
  5. Event Handler Context: In event handlers, such as those used with HTML elements, “this” refers to the DOM element that triggered the event.
  6. Arrow Functions: Arrow functions have a different behavior regarding “this.” They do not have their own “this” context; instead, they inherit the value of “this” from the surrounding code.

Comment if you have any doubts or suggestions on this JS keyword topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading