In this article, we take a closer look at this in the classic function declaration (traditional), the modern arrow function expression, and the ES6 shorthand notation.

In JavaScript, this refers to the current object. It helps methods inside the object access and modify the object’s data without explicitly mentioning the object’s name. This makes code shorter and easier to understand.

By using this, methods can access other properties and methods within the same object.

Example

const objectWithMethods = {
  // Method using Function Declaration
  methodDeclaration: function() {
    console.log("Method using Function Declaration", this);
  },

  // Function Expression with Arrow Syntax
  methodExpression: () => {
    console.log("Method using Function Expression with Arrow Syntax", this);
  },

  // ES6 Method Shorthand
  methodShorthand() {
    console.log("Method using ES6 Method Shorthand", this);
  }
};

// Calling the methods
objectWithMethods.methodDeclaration();
objectWithMethods.methodExpression();
objectWithMethods.methodShorthand();

How this works in methods

Method methodDeclaration

Inside methodDeclaration(), this refers to the objectWithMethods object because the function is defined as a method of that object using the traditional function declaration syntax (function keyword).

Method methodExpression

Inside methodExpression(), this refers to the global object (window in a browser environment) or the enclosing context where objectWithMethods is defined. Arrow functions (() => { … }) behave differently from regular functions when it comes to the this keyword. In a regular function, the value of this is determined by how the function is called. If a regular function is called as a method of an object, this refers to the object itself. However, if the function is called standalone (not attached to an object), this refers to the global object (window in a browser environment).

Arrow functions, on the other hand, do not have their own this context. Instead, they inherit the this value from the surrounding lexical scope. This means that within an arrow function, this retains the value of this from the enclosing context where the arrow function is defined, regardless of how or where the function is called.

So, in the case of methodExpression(), which is defined using an arrow function, this inherits its value from the surrounding context where objectWithMethods is defined. If objectWithMethods is defined in the global scope, this inside methodExpression() will refer to the global object (window in browser). If objectWithMethods is defined within another method or function, this inside methodExpression() will refer to the this value of that enclosing function’s context.

However, the behavior of this also depends on how methodExpression() is called. If methodExpression() is an arrow function, this will lexically inherit the this value from the enclosing function where objectWithMethods is defined. If it is a regular function, the value of this will depend on the call-site of methodExpression().

Example

  methodDeclaration: function () {
    console.log("Method using Function Declaration", this);
    const log = () => {
      console.log("Arrow function", this);
    };
    log();
  },

In this case, the arrow function log inherits this from its enclosing context, which is methodDeclaration. Since this in methodDeclaration refers to objectWithMethods, this in the arrow function log is also objectWithMethods.

Method methodShorthand

this inside methodShorthand() refers to the objectWithMethods object. This is because the method is defined using the ES6 method shorthand syntax (methodShorthand() { … }). This syntax inherently binds this to the object on which the method is called.