You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>In JavaScript, the this keyword refers to an object, which object depends on how this is being invoked (used or called).</p>
2366
+
</blockquote>
2367
+
<h2id="this-in-global-space"><aclass="header-link" href="#this-in-global-space"></a><code>this</code> in global space</h2>
2368
+
<p>Anything defined globally is said to be in a global space.</p>
2369
+
<preclass="hljs"><code><spanclass="hljs-built_in">console</span>.log(<spanclass="hljs-built_in">this</span>); <spanclass="hljs-comment">// refers to global object i.e. window in case of browser</span>
2370
+
<spanclass="hljs-comment">// 💡 global object differs based on runtime environment,</span></code></pre><h2id="this-inside-a-function"><aclass="header-link" href="#this-inside-a-function"></a><code>this</code> inside a function</h2>
<spanclass="hljs-comment">// in strict mode - refers to global window object</span>
2375
+
<spanclass="hljs-comment">// in non-strict mode - undefined</span>
2376
+
}
2377
+
x();
2378
+
<spanclass="hljs-comment">// 💡 Notes:</span>
2379
+
2380
+
<spanclass="hljs-comment">// On the first go feels like `this` keyword in global space and inside function behaves same but in reality it's different.</span>
2381
+
2382
+
<spanclass="hljs-comment">// The moment you make JS run in strict mode by using: "use strict" at the top, `this` keyword inside function returns `undefined` whereas global space will still refers to global window object</span></code></pre><p><code>this substitution</code> -> According to <code>this</code> substitution, if the value of <code>this</code> keyword is <code>null/undefined</code>, it will be replaced by globalObject only in non-strict mode. This is the reason why <code>this</code> refers to global window object inside function in non-strict mode.</p>
2383
+
<p>💡 So to summarize, the value of <code>this</code> keyword inside function is <code>undefined</code>, but because of <code>this substitution</code> in non-strict mode <code>this</code> keyword refers to <code>globalWindowObject</code> and in strict mode it will still be <code>undefined</code></p>
2384
+
<p><code>this</code> keyword value depends on how the <code>function</code> is called. For eg:<br>In strict mode: </p>
<spanclass="hljs-built_in">window</span>.x(); <spanclass="hljs-comment">// global window object</span></code></pre><h2id="this-inside-a-objects-method"><aclass="header-link" href="#this-inside-a-objects-method"></a><code>this</code> inside a object's method</h2>
2387
+
<preclass="hljs"><code><spanclass="hljs-comment">// `x` key below is a method as per terminology</span>
obj.x(); <spanclass="hljs-comment">// value of `this` is referring to current object i.e. `obj`</span></code></pre><h2id="call-apply--bind-methods"><aclass="header-link" href="#call-apply--bind-methods"></a><code>call</code>, <code>apply</code> & <code>bind</code> methods</h2>
2396
+
<blockquote>
2397
+
<p>For detail around call, apply and bind method. Refer <ahref="https://www.youtube.com/watch?v=75W8UPQ5l7k&ab_channel=AkshaySaini">here</a>.</p>
<spanclass="hljs-comment">// Above `call` method is taking the value of `this` keyword</span>
2415
+
<spanclass="hljs-comment">// So, Inside `printName` method value of `this` is now `student2` object</span>
2416
+
2417
+
<spanclass="hljs-comment">// So, call, bind and apply is used to set the value of this keyword.</span></code></pre><h2id="this-inside-arrow-function"><aclass="header-link" href="#this-inside-arrow-function"></a><code>this</code> inside arrow function</h2>
2418
+
<p>Arrow function doesn't have their own <code>this</code> value, they take the value from enclosing lexical context.</p>
<spanclass="hljs-comment">// Above the value of `this` won't be obj anymore instead it will be enclosing lexical context i.e. window object in current scenario.</span>
alt="promise-apis in Javascript Youtube Link"/></a>
2819
2819
2820
+
<br>
2821
+
2822
+
<hr>
2823
+
2824
+
# Episode 25 : `this` keyword in JavaScript
2825
+
2826
+
###
2827
+
2828
+
> In JavaScript, the this keyword refers to an object, which object depends on how this is being invoked (used or called).
2829
+
2830
+
## `this` in global space
2831
+
Anything defined globally is said to be in a global space.
2832
+
2833
+
```js
2834
+
console.log(this); // refers to global object i.e. window in case of browser
2835
+
// 💡 global object differs based on runtime environment,
2836
+
```
2837
+
2838
+
## `this` inside a function
2839
+
2840
+
```js
2841
+
functionx() {
2842
+
// the below value depends on strict/non-strict mode
2843
+
console.log(this);
2844
+
// in strict mode - refers to global window object
2845
+
// in non-strict mode - undefined
2846
+
}
2847
+
x();
2848
+
// 💡 Notes:
2849
+
2850
+
// On the first go feels like `this` keyword in global space and inside function behaves same but in reality it's different.
2851
+
2852
+
// The moment you make JS run in strict mode by using: "use strict" at the top, `this` keyword inside function returns `undefined` whereas global space will still refers to global window object
2853
+
```
2854
+
`this substitution` -> According to `this` substitution, if the value of `this` keyword is `null/undefined`, it will be replaced by globalObject only in non-strict mode. This is the reason why `this` refers to global window object inside function in non-strict mode.
2855
+
2856
+
💡 So to summarize, the value of `this` keyword inside function is `undefined`, but because of `this substitution` in non-strict mode `this` keyword refers to `globalWindowObject` and in strict mode it will still be `undefined`
2857
+
2858
+
`this` keyword value depends on how the `function` is called. For eg:
2859
+
In strict mode:
2860
+
```js
2861
+
x(); // undefined
2862
+
window.x(); // global window object
2863
+
```
2864
+
2865
+
## `this` inside a object's method
2866
+
2867
+
```js
2868
+
// `x` key below is a method as per terminology
2869
+
const obj = {
2870
+
a:10,
2871
+
x:function () {
2872
+
console.log(this); // {a: 10, x: f()}
2873
+
console.log(this.a); // 10
2874
+
}
2875
+
}
2876
+
obj.x(); // value of `this` is referring to current object i.e. `obj`
2877
+
```
2878
+
2879
+
## `call`, `apply` & `bind` methods
2880
+
2881
+
> For detail around call, apply and bind method. Refer [here](https://www.youtube.com/watch?v=75W8UPQ5l7k&ab_channel=AkshaySaini).
2882
+
2883
+
```js
2884
+
conststudent= {
2885
+
name:'Alok',
2886
+
printName:function () {
2887
+
console.log(this.name);
2888
+
}
2889
+
}
2890
+
student.printName(); // Alok
2891
+
2892
+
conststudent2= {
2893
+
name:'Kajal',
2894
+
}
2895
+
student2.printName(); // throw error
2896
+
2897
+
// ❓ how to re-use printName method from `student` object
2898
+
student.printName.call(student2); // Kajal
2899
+
// Above `call` method is taking the value of `this` keyword
2900
+
// So, Inside `printName` method value of `this` is now `student2` object
2901
+
2902
+
// So, call, bind and apply is used to set the value of this keyword.
2903
+
```
2904
+
2905
+
## `this` inside arrow function
2906
+
2907
+
Arrow function doesn't have their own `this` value, they take the value from enclosing lexical context.
2908
+
2909
+
```js
2910
+
constobj= {
2911
+
a:10,
2912
+
x: () => {
2913
+
console.log(this); // window object
2914
+
// Above the value of `this` won't be obj anymore instead it will be enclosing lexical context i.e. window object in current scenario.
2915
+
}
2916
+
}
2917
+
obj.x();
2918
+
2919
+
constobj2= {
2920
+
a:10,
2921
+
x:function () {
2922
+
consty= () => {
2923
+
console.log(this);
2924
+
// Above the value of `this` will be obj2 as function y's enclosing lexical context is function `x`.
2925
+
};
2926
+
y();
2927
+
}
2928
+
}
2929
+
obj2.x();
2930
+
```
2931
+
2932
+
## `this` inside DOM
2933
+
2934
+
> It refers to HTML element.
2935
+
2936
+
```html
2937
+
<button onclick="alert(this)">Click Me</button>
2938
+
<!-- [object HTMLButtonElement] Button element -->
> In JavaScript, the this keyword refers to an object, which object depends on how this is being invoked (used or called).
6
+
7
+
## `this` in global space
8
+
Anything defined globally is said to be in a global space.
9
+
10
+
```js
11
+
console.log(this); // refers to global object i.e. window in case of browser
12
+
// 💡 global object differs based on runtime environment,
13
+
```
14
+
15
+
## `this` inside a function
16
+
17
+
```js
18
+
functionx() {
19
+
// the below value depends on strict/non-strict mode
20
+
console.log(this);
21
+
// in strict mode - refers to global window object
22
+
// in non-strict mode - undefined
23
+
}
24
+
x();
25
+
// 💡 Notes:
26
+
27
+
// On the first go feels like `this` keyword in global space and inside function behaves same but in reality it's different.
28
+
29
+
// The moment you make JS run in strict mode by using: "use strict" at the top, `this` keyword inside function returns `undefined` whereas global space will still refers to global window object
30
+
```
31
+
`this substitution` -> According to `this` substitution, if the value of `this` keyword is `null/undefined`, it will be replaced by globalObject only in non-strict mode. This is the reason why `this` refers to global window object inside function in non-strict mode.
32
+
33
+
💡 So to summarize, the value of `this` keyword inside function is `undefined`, but because of `this substitution` in non-strict mode `this` keyword refers to `globalWindowObject` and in strict mode it will still be `undefined`
34
+
35
+
`this` keyword value depends on how the `function` is called. For eg:
36
+
In strict mode:
37
+
```js
38
+
x(); // undefined
39
+
window.x(); // global window object
40
+
```
41
+
42
+
## `this` inside a object's method
43
+
44
+
```js
45
+
// `x` key below is a method as per terminology
46
+
constobj= {
47
+
a:10,
48
+
x:function () {
49
+
console.log(this); // {a: 10, x: f()}
50
+
console.log(this.a); // 10
51
+
}
52
+
}
53
+
obj.x(); // value of `this` is referring to current object i.e. `obj`
54
+
```
55
+
56
+
## `call`, `apply` & `bind` methods
57
+
58
+
> For detail around call, apply and bind method. Refer [here](https://www.youtube.com/watch?v=75W8UPQ5l7k&ab_channel=AkshaySaini).
59
+
60
+
```js
61
+
conststudent= {
62
+
name:'Alok',
63
+
printName:function () {
64
+
console.log(this.name);
65
+
}
66
+
}
67
+
student.printName(); // Alok
68
+
69
+
conststudent2= {
70
+
name:'Kajal',
71
+
}
72
+
student2.printName(); // throw error
73
+
74
+
// ❓ how to re-use printName method from `student` object
75
+
student.printName.call(student2); // Kajal
76
+
// Above `call` method is taking the value of `this` keyword
77
+
// So, Inside `printName` method value of `this` is now `student2` object
78
+
79
+
// So, call, bind and apply is used to set the value of this keyword.
80
+
```
81
+
82
+
## `this` inside arrow function
83
+
84
+
Arrow function doesn't have their own `this` value, they take the value from enclosing lexical context.
85
+
86
+
```js
87
+
constobj= {
88
+
a:10,
89
+
x: () => {
90
+
console.log(this); // window object
91
+
// Above the value of `this` won't be obj anymore instead it will be enclosing lexical context i.e. window object in current scenario.
92
+
}
93
+
}
94
+
obj.x();
95
+
96
+
constobj2= {
97
+
a:10,
98
+
x:function () {
99
+
consty= () => {
100
+
console.log(this);
101
+
// Above the value of `this` will be obj2 as function y's enclosing lexical context is function `x`.
102
+
};
103
+
y();
104
+
}
105
+
}
106
+
obj2.x();
107
+
```
108
+
109
+
## `this` inside DOM
110
+
111
+
> It refers to HTML element.
112
+
113
+
```html
114
+
<buttononclick="alert(this)">Click Me</button>
115
+
<!-- [object HTMLButtonElement] Button element -->
0 commit comments