In this post we will explore what this
keyword refers under various conditions and there by understand the keyword and how it works in javascript.
The this
keyword can point to
- The object when referenced within the obejcts method.
- The
window
object - when referenced within a function. - The instance of the object when the new keyword is used.
- The object when arrow function is used`
this
within method of an object - no arrow function
```javascript const obj = { name: "obj", printName() { console.log(this.name); }, printObj() { console.log(this); } } obj.printName(); // obj obj.printObj(); // {name: "obj", printName: ƒ, printObj: ƒ} ```
this
within method of an object - arrow function
The value of this
in an arrow function is always the value of this
in the parent non arrow function.
```javascript const obj = { name: "obj", printObj: () => { console.log(this); // this refers to the window } } obj.printObj() // Window {window: Window, self: Window, document: document, name: "", location: Location, …} ```
this
within function body
```javascript function greet() { console.log(this); } greet(); // Window {window: Window, self: Window, document: document, name: "", location: Location, …} ```
this
when new
keyword is used
```javascript function Game(inTitle) { this.title = inTitle; console.log(this); // Game {title: "pong"} } const game = new Game("pong"); ```
this
within callback in a method of an object - no arrow function
```javascript const fruits = { name: "fruits", fruits: ["apple", "mango", "banana"], printFruits() { console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ} this.fruits.forEach(function(fruit) { console.log(this); // Window {window: Window, self: Window, document: document, name: "", location: Location, …} * 3 times }) } } fruits.printFruits(); ```
this
within callback in a method of an object - arrow function
```javascript const fruits = { name: "fruits", fruits: ["apple", "mango", "banana"], printFruits() { console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ} this.fruits.forEach((fruit) => { console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ} * 3 times }) } } fruits.printFruits(); ```
Top comments (0)