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); // Output: Window {...}
}
exampleFunction();
Object context
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(); // Output: John
Constructor functions
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); // Output: John
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); // Output: John
sayName.call(person2); // Output: Jane
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(); // Output: John
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); // Output: undefined
}, 1000);
},
};
myObject.sayName();
In this example:
- The
this
value inside the callback function passed tosetTimeout()
is not the myObject object. - To preserve the this value, you can use the
bind()
method to explicitly set the value ofthis
.
const myObject = {
name: "John",
sayName: function () {
setTimeout(
function () {
console.log(this.name); // Output: John
}.bind(this),
1000
);
},
};
myObject.sayName();
this
in strict mode
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); // Output: undefined
}
exampleFunction();