use of this keyword in javascript
The behavior of the this keyword in JavaScript can differ based on the environment and context in which it is used. The value of this keyword changes depending on whether you are in the global scope, inside a function, or within an object. Additionally, JavaScript has two modes: strict mode and non-strict mode. The value of this keyword also depends on whether the code is executed in strict mode or non-strict mode.
Global Environment:
In non-strict mode, if you're in the global scope and you call console.log(this), it will reference the global object (window in browsers). In strict mode, however, this keyword will be undefined.
Inside Functions: In non-strict mode, when this keyword is used inside a function, it refers to the global object (window in browsers). In strict mode, this keyword inside a function will be undefined.
Inside Objects
When this keyword is used inside an object method, it refers to the object itself
let obj = { a: 20, b: function() { console.log(this); // Logs the entire obj console.log(this.a); // Logs 20, since 'a' is a property of obj } }; obj.b(); // This will log the object obj and 20.In this case, calling obj.b() results in this keyword referring to obj.
Function Borrowing with call and apply:
In JavaScript, you can borrow methods from one object and use them in another object using the call (or apply) method. The call method allows you to explicitly set the value of this keyword.
Example:
let student1 = {
name: "Sujay",
printName: function() {
console.log(this.name);
}
};
let student2 = {
name: "Mohan"
};
// Borrowing the printName function from student1 and applying it to student2
student1.printName.call(student2); // This will print "Mohan"
In the above example, this initially refers to student1 within the printName method. However, using call, we are explicitly passing student2 as the this value. As a result, this inside the printName method refers to student2, and it logs "Mohan" (the name of student2).
In side Arrow Functions :
In your example:
let obj = {
name: "Sujay",
printName: () => {
console.log(this);
}
};
obj.printName();
Output: It will print the window object (or the global object in non-strict mode), not the obj object. This is because arrow functions don't have their own this. Instead, they inherit this from the lexical scope where the function is defined, which in this case is the global scope (or window in browsers).
Arrow function declare inside regular function
let obj = {
a: 29,
b: function(){
const y = () => {
console.log(this);
}
y();
}
}
obj.b(); // Output: { a: 29, b: [Function: b] }
The function b is a regular method in the obj object, so inside it, this refers to obj.
The function y is an arrow function. Remember, arrow functions don't have their own this keyword,they inherit it from their surrounding (lexical) scope.
The surrounding scope of y is the b method. Inside b, this refers to obj because b is a method of obj. So when y is called, this inside y is still referring to obj.