Skip to content

Commit 441592a

Browse files
committed
Feat:Demonstrate 'this' in functions, objects and constructors
1 parent d9918b8 commit 441592a

File tree

2 files changed

+99
-0
lines changed

2 files changed

+99
-0
lines changed

14_this_arro/ops.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// This code demonstrates the use of 'this' in a regular function and an arrow function.
2+
3+
// The 'this' keyword behaves differently in regular functions and arrow functions.
4+
// In regular functions, 'this' refers to the object that calls the function.
5+
// Regular function
6+
function regularFunction() {
7+
console.log(this);
8+
}
9+
// In non-strict mode, 'this' refers to the global object (window in browsers). in Node.js).
10+
// In strict mode, 'this' will be undefined.// If you want to see the difference, you can uncomment the line below to enable strict mode.
11+
// 'use strict'; // Uncomment this line to enable strict mode
12+
// Calling the regular function
13+
// regularFunction(); // In non-strict mode, this will refer to the global object (window
14+
// In strict mode, this will be undefined
15+
16+
// Arrow function
17+
// In arrow functions, 'this' is lexically bound, meaning it takes 'this' from the surrounding context.
18+
// In this case, it will refer to the global object (window in browsers) or undefined
19+
// in strict mode.
20+
// Arrow function
21+
const arrowFunction = () => {
22+
console.log(this);
23+
};
24+
// Calling the arrow function
25+
// arrowFunction(); // In non-strict mode, this will refer to the global object (window in browsers) or undefined in strict mode.
26+
// Example of 'this' in an object method
27+
// In an object method, 'this' refers to the object itself.
28+
// This is a simple object with a method that uses 'this' to refer to its properties.
29+
30+
// Example of 'this' in an object method
31+
// In an object method, 'this' refers to the object itself.
32+
33+
const user = {
34+
userName: "Ashish Choudhary",
35+
userAge: 29,
36+
userDetails: function () {
37+
console.log(this.userName + " is " + this.userAge + " years old.");
38+
console.log(this);
39+
},
40+
};
41+
42+
// user.userDetails(); // This will log "Ashish Choudhary is 29 years old." and the user object itself.
43+
44+
function userOne(userName, userAge, loginStatus) {
45+
this.userName = userName;
46+
this.userAge = userAge;
47+
this.loginStatus = loginStatus;
48+
49+
return this;
50+
51+
// this.userDetails = function () {
52+
// console.log(this.userName + " is " + this.userAge + " years old.");
53+
// console.log(this);
54+
// };
55+
}
56+
57+
// const userOneobj1 = userOne("Ashish Choudhary", 29, true); // without new value is overhide ocinstractear fucntion
58+
const userOneobj1 = new userOne("Ashish Choudhary", 29, true);
59+
const userOneobj2 = new userOne("khushi Choudhary", 25, false);
60+
61+
62+
console.log(userOneobj1);
63+
console.log(userOneobj2);
64+

14_this_arro/ops.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
## This usage in JavaScript
2+
-- `this` is a keyword in JavaScript that refers to the context in which a function is called. It can be used to access properties and methods of an object.
3+
-- The value of `this` depends on how a function is called, not where it is defined.
4+
-- In a regular function, `this` refers to the global object (or `undefined` in strict mode).
5+
-- In an object method, `this` refers to the object that the method is called on.
6+
-- In a constructor function, `this` refers to the newly created object.
7+
8+
## Arrow functions and `this`
9+
-- Arrow functions do not have their own `this` context. Instead, they inherit `this` from the surrounding lexical context.
10+
-- This means that in an arrow function, `this` refers to the same value as it would in the surrounding code.
11+
-- This is useful for preserving the context of `this` in callbacks and event handlers.
12+
## Example of `this` in a regular function
13+
```javascript
14+
function regularFunction() {
15+
console.log(this);
16+
}
17+
regularFunction(); // In non-strict mode, this will log the global object (window in browsers).
18+
```
19+
## Example of `this` in a arrow function
20+
```javascript
21+
const arrowFunction = () => {
22+
console.log(this);
23+
};
24+
arrowFunction();
25+
26+
```// In an arrow function, `this` refers to the surrounding context, which is usually the global object or undefined in strict mode.
27+
```
28+
29+
## New keyword and `this`
30+
-- The `new` keyword is used to create an instance of an object defined by a constructor function.
31+
-- When a function is called with `new`, `this` inside that function refers to the newly created object.
32+
33+
34+
## Empty `new` keyword output
35+
-- When you call a constructor function with `new`, it creates a new object and sets `this` to that object.

0 commit comments

Comments
 (0)