this

design2461360801's avatar
Published Jul 30, 2021Updated Oct 13, 2024
Contribute to Docs

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

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

In strict mode, this is undefined.

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

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

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

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

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

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

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
// Using the constructor context
function Obj() {
let someFunction = () => this;
someFunction().someProperty = 25;
}
let obj = new Obj();
console.log(obj.someProperty);
// Output = 25;

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:

Code
Output
Loading...

All contributors

Contribute to Docs

Learn JavaScript on Codecademy