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 browserconsole.log(this === window);// Output: truethis.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 browserfunction example() {console.log(this === window);}example();// Output: true
In strict mode, this
is undefined
.
// Strict mode in browserfunction 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: 100obj.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 objconsole.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 23showProp.call(obj2, 'The property is');// Output: The property is 37// The .apply() method takes an array as its second argumentshowProp.apply(obj1, ['The property is']);// Output: The property is 23showProp.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 contextlet someFunction = () => this;console.log(someFunction() === window);// Output: true
// Using the constructor contextfunction 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:
All contributors
- design2461360801
- garanews
- christian.dinh
- Anonymous contributor
- StevenSwiniarski
- Anonymous contributor
- davialano
- Anonymous contributor
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.