Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to access 'this' keyword inside an arrow function in JavaScript?
The JavaScript 'this' keyword refers to the object it belongs to. Arrow functions handle 'this' differently than regular functions - they inherit 'this' from their surrounding scope rather than creating their own.
How Arrow Functions Handle 'this'
Arrow functions don't have their own 'this' binding. Instead, they capture the 'this' value from the enclosing lexical scope at the time they are defined.
<html>
<body>
<div id="output"></div>
<script>
function Student(fname, grade) {
this.fname = fname;
this.grade = grade;
this.details = function() {
return () => {
document.getElementById('output').innerHTML = `Hi, I'm ${this.fname} from ${this.grade} grade`;
};
}
}
let info = new Student('picaso', 'seventh');
let printInfo = info.details();
printInfo();
</script>
</body>
</html>
Hi, I'm picaso from seventh grade
Comparison: Regular Function vs Arrow Function
Here's how 'this' behaves differently in regular functions versus arrow functions:
<html>
<body>
<div id="comparison"></div>
<script>
const obj = {
name: 'TestObject',
regularFunction: function() {
return this.name; // 'this' refers to obj
},
arrowFunction: () => {
return this.name; // 'this' refers to global object (window)
},
nestedExample: function() {
const arrowInside = () => {
return this.name; // 'this' inherited from nestedExample
};
return arrowInside();
}
};
let output = '';
output += 'Regular function: ' + obj.regularFunction() + '<br>';
output += 'Arrow function: ' + obj.arrowFunction() + '<br>';
output += 'Arrow inside regular: ' + obj.nestedExample();
document.getElementById('comparison').innerHTML = output;
</script>
</body>
</html>
Regular function: TestObject Arrow function: undefined Arrow inside regular: TestObject
Practical Use Case
Arrow functions are particularly useful for preserving 'this' context in callbacks and event handlers:
<html>
<body>
<button id="myButton">Click me</button>
<div id="result"></div>
<script>
class Counter {
constructor() {
this.count = 0;
this.element = document.getElementById('result');
}
increment() {
this.count++;
this.element.innerHTML = `Count: ${this.count}`;
}
setupButton() {
// Arrow function preserves 'this' from Counter instance
document.getElementById('myButton').addEventListener('click', () => {
this.increment(); // 'this' correctly refers to Counter instance
});
}
}
const counter = new Counter();
counter.setupButton();
</script>
</body>
</html>
Key Points
| Function Type | 'this' Behavior | Use Case |
|---|---|---|
| Regular Function | Creates own 'this' binding | Methods, constructors |
| Arrow Function | Inherits 'this' from outer scope | Callbacks, event handlers |
Conclusion
Arrow functions inherit 'this' from their surrounding scope, making them ideal for callbacks where you need to preserve the original context. Use regular functions when you need dynamic 'this' binding.
627 Views
