JavaScript this

In JavaScript, the this keyword can have several meanings depending on the execution context. Most often it is used within a method of an object to return the instance of the object whose function is being executed, but what this returns can vary depending on the context.

this Called Within a Global Context

Used within a global context, this will return the global object. Either the window object in a web browser, or the global object on Node.js.

Assigning a property to this will assign it to the global object.

// Outputs assume this is run in global context in a browser

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

this.prop = 'value';

console.log(window.prop);
// Output: value

Copy to clipboard
Copy to clipboard

this Called Within a Function

In JavaScript, there are several different ways to invoke a function:

• Function invocation
• Method invocation
• Constructor invocation
• Indirect invocation
• Arrow functions

Each has its own context, causing this to behave differently.

Basic Function Invocation

this behaves differently in strict vs. non-strict mode. In non-strict mode, this returns the global object.

Examples

// Non-strict mode in browser
function example() {
  console.log(this === window);
}

example();
// Output: true

Copy to clipboard
Copy to clipboard

In strict mode, this is undefined.

// Strict mode in browser
function example() {
  console.log(this === undefined);
}

example();
// Output: true

Copy to clipboard
Copy to clipboard

Method Invocation

Within the method of an object,this returns the object that is currently calling the function. This is the same as its behavior in other languages.

Examples

const obj = {
  someValue: 100,
  someFunc: function () {
    return this.someValue;
  },
};

console.log(obj.someFunc());
// Output: 100

obj.someValue = 23;

console.log(obj.someFunc());
// Output: 23

Copy to clipboard
Copy to clipboard

However, if the function is executed outside the object, it will behave as function invocation above.

In the example below, this references the global object, without a someValue property.

const obj = {
  someValue: 100,
  someFunc: function () {
    return this.someValue;
  },
};

let getValue = obj.someFunc;

console.log(getValue());
// Output: undefined

Copy to clipboard
Copy to clipboard

There is a .bind() method that can be used to alter this behavior. .bind() can be used when creating a function to specify the object that this will refer to.

const obj = {
  someValue: 100,
  someFunc: function () {
    return this.someValue;
  },
};

let getValue = obj.someFunc.bind(obj);
// Tells getValue that its 'this' will refer to obj

console.log(getValue());
// Output: 100

Copy to clipboard
Copy to clipboard

Constructor Invocation

When the new keyword is used to create an instance of a function object, the function is used as a constructor.

In this case, this will refer to the new object being created.

Example

function Obj(value) {
  this.someValue = value;
}

let obj = new Obj(100);

console.log(obj.someValue);
// Output: 100

Copy to clipboard
Copy to clipboard

Indirect Invocation

There are two methods of the Function type named .call() and .apply() which, like the .bind() method allows the this object to be set to a given object within a particular function. Unlike .bind() which returns a function, .call() and .apply() execute the function.

Example

function showProp(prefix) {
  console.log(prefix + this.someProperty);
}

let obj1 = {
  someProperty: 23,
};

let obj2 = {
  someProperty: 37,
};

showProp.call(obj1, 'The property is');
// Output: The property is 23

showProp.call(obj2, 'The property is');
// Output: The property is 37

// The .apply() method takes an array as its second argument

showProp.apply(obj1, ['The property is']);
// Output: The property is 23

showProp.apply(obj2, ['The property is']);
// Output: The property is 37

Copy to clipboard
Copy to clipboard

Arrow Functions

The arrow function doesn’t have its own context for this.

The this value within an arrow function is inherited from the containing function.

Examples

// Using the global context
let someFunction = () => this;

console.log(someFunction() === window);
// Output: true

Copy to clipboard
Copy to clipboard

// Using the constructor context
function Obj() {
  let someFunction = () => this;
  someFunction().someProperty = 25;
}

let obj = new Obj();

console.log(obj.someProperty);
// Output = 25;

Copy to clipboard
Copy to clipboard

Codebyte Example

To demonstrate this, the following codebyte example creates the function getInfo. First, the class Student is created, and the constructor is called with the necessary parameters. Using this, global objects are created, which are then accessed within the function to retrieve values and return a string object:

Visit us
Visit us
Hide code
Code
Output
Hide output
Loading...
Copy to your clipboard
Copy Codebyte
Run