javascript : this

In JavaScript, the this keyword refers to the context in which a function is executed. It is a special keyword that provides a reference to the object on which a method or function is being invoked. The value of this is determined dynamically at runtime based on how a function is called, rather than being lexically bound during the function's definition.

The behavior of this depends on the invocation context, and it can have different values in different situations:

1. Global Context:
   • In the global scope or outside of any function, this refers to the global object. In a web browser environment, the global object is window.
2. Function Context:
   • In a regular function invocation, this is determined by how the function is called.
   • In a function called as a method of an object, this refers to the object itself.
   • In a function called with the new keyword as a constructor, this refers to the newly created object.
   • In a function called using the call(), apply(), or bind() methods, this is explicitly set to the provided object.
   • In strict mode ("use strict"), if a function is called without any context, this will be undefined.
3. Event Handlers:
   • In event handler functions, this typically refers to the DOM element that triggered the event.
4. Arrow Functions:
   • Arrow functions do not bind their own this value but inherit it from the enclosing scope. They retain the this value of the surrounding context in which they are defined.

Here are a few examples to illustrate the usage of this:

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Output: Hello, John!

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hello, ${this.name}!`);
  };
}

const person = new Person('Alice');
person.greet(); // Output: Hello, Alice!

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // Output: <button> element that triggered the event
});

In the first example, this inside the greet method of the obj object refers to the obj object itself because it is called as a method of obj.

 

In the second example, this inside the greet function refers to the newly created object when Person is invoked with the new keyword. Each instance of Person will have its own name property.

 

In the third example, this inside the event handler function refers to the DOM element that triggered the click event.

 

'use strict';

const x = 0;
module.exports.x = x;
console.log(this); // { x: 0 }
console.log(globalThis); // node module output


/**
* this inside the function
* undefined in strict mode
* globalThis in loose mode
 */
function fun() {
  console.log(this);
}
fun(); // undefined

/**
 * The this in a constructor function or class points to the instance itself that will be created.
 */
function You(name) {
  this.name = name;
  this.printName = function () {
    console.log(this.name);
  };
}
const name1 = new You('jun');
const name2 = new You('junny');
name1.printName(); // jun
name2.printName(); // junny