this Keyword in JavaScript
The this
keyword refers to the object that the function is a property of or the object that the function is invoked on.
The value of this
depends on how the function is called. When a function is called with a this
keyword inside it, the value of this
is determined by the way the function is called. Here are some common ways that this is determined:
Global scope
If a function is called without an object context, this will refer to the global object (in the browser, this
is the window
object).
As an example:
function exampleFunction() {
console.log(this);
}
exampleFunction();
When a function is called as a method of an object, this
will refer to the object that the function is a property of.
As an example:
const myObject = {
name: "John",
age: 30,
sayName: function () {
console.log(this.name);
},
};
myObject.sayName();
When a function is called as a constructor function with the new
keyword, this
will refer to the newly created object.
As an example:
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person("John", 30);
console.log(person1.name);
Explicit binding
You can also explicitly bind the value of this
using methods like call()
, apply()
, or bind()
.
As an example:
function sayName() {
console.log(this.name);
}
const person1 = {name: "John"};
const person2 = {name: "Jane"};
sayName.call(person1);
sayName.call(person2);
Arrow functions
Unlike regular functions, arrow functions do not have their own this
value. Instead, the this
value is inherited from the enclosing lexical scope. This means that if an arrow function is defined inside a function that has its own this
value, the arrow function will use the this
value of the outer function.
As an example:
const myObject = {
name: "John",
sayName: function () {
const innerFunction = () => {
console.log(this.name);
};
innerFunction();
},
};
myObject.sayName();
this
inside a callback function
When a function is passed as a callback function to another function, the this
value can sometimes be lost. This is because the value of this
is determined by the calling context, which may be different inside a callback function.
As an example:
const myObject = {
name: "John",
sayName: function () {
setTimeout(function () {
console.log(this.name);
}, 1000);
},
};
myObject.sayName();
In this example:
- The
this
value inside the callback function passed to setTimeout()
is not the myObject object. - To preserve the this value, you can use the
bind()
method to explicitly set the value of this
.
const myObject = {
name: "John",
sayName: function () {
setTimeout(
function () {
console.log(this.name);
}.bind(this),
1000
);
},
};
myObject.sayName();
In strict mode, the value of this
is not automatically set to the global object if a function is called without an object context. Instead, it will be undefined
.
As an example:
"use strict";
function exampleFunction() {
console.log(this);
}
exampleFunction();