This

JavaScript for Newbies Advanced Topics
12 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$39.99
List Price:  $79.99
You save:  $40
€38.34
List Price:  €76.69
You save:  €38.35
£31.81
List Price:  £63.63
You save:  £31.81
CA$57.41
List Price:  CA$114.84
You save:  CA$57.43
A$63.97
List Price:  A$127.96
You save:  A$63.98
S$54.21
List Price:  S$108.43
You save:  S$54.22
HK$310.92
List Price:  HK$621.91
You save:  HK$310.99
CHF 35.74
List Price:  CHF 71.50
You save:  CHF 35.75
NOK kr452.69
List Price:  NOK kr905.49
You save:  NOK kr452.80
DKK kr285.99
List Price:  DKK kr572.05
You save:  DKK kr286.06
NZ$70.70
List Price:  NZ$141.42
You save:  NZ$70.72
د.إ146.88
List Price:  د.إ293.80
You save:  د.إ146.92
৳4,759.62
List Price:  ৳9,520.44
You save:  ৳4,760.81
₹3,397.10
List Price:  ₹6,795.05
You save:  ₹3,397.95
RM180.27
List Price:  RM360.59
You save:  RM180.32
₦61,792.91
List Price:  ₦123,601.28
You save:  ₦61,808.36
₨11,086.54
List Price:  ₨22,175.86
You save:  ₨11,089.31
฿1,367.71
List Price:  ฿2,735.76
You save:  ฿1,368.05
₺1,402.52
List Price:  ₺2,805.39
You save:  ₺1,402.87
B$243.37
List Price:  B$486.81
You save:  B$243.44
R732.54
List Price:  R1,465.27
You save:  R732.72
Лв74.93
List Price:  Лв149.89
You save:  Лв74.95
₩57,842.33
List Price:  ₩115,699.13
You save:  ₩57,856.80
₪145.51
List Price:  ₪291.06
You save:  ₪145.55
₱2,352.81
List Price:  ₱4,706.21
You save:  ₱2,353.40
¥6,256.23
List Price:  ¥12,514.03
You save:  ¥6,257.80
MX$803.05
List Price:  MX$1,606.30
You save:  MX$803.25
QR145.19
List Price:  QR290.43
You save:  QR145.23
P550.51
List Price:  P1,101.16
You save:  P550.64
KSh5,142.14
List Price:  KSh10,285.57
You save:  KSh5,143.43
E£2,034.81
List Price:  E£4,070.14
You save:  E£2,035.32
ብር4,965.06
List Price:  ብር9,931.37
You save:  ብር4,966.30
Kz36,710.82
List Price:  Kz73,430.82
You save:  Kz36,720
CLP$39,506.29
List Price:  CLP$79,022.46
You save:  CLP$39,516.17
CN¥291.78
List Price:  CN¥583.63
You save:  CN¥291.85
RD$2,425.42
List Price:  RD$4,851.45
You save:  RD$2,426.03
DA5,393.73
List Price:  DA10,788.81
You save:  DA5,395.08
FJ$92.63
List Price:  FJ$185.29
You save:  FJ$92.66
Q306.89
List Price:  Q613.86
You save:  Q306.97
GY$8,332.99
List Price:  GY$16,668.06
You save:  GY$8,335.07
ISK kr5,538.46
List Price:  ISK kr11,078.31
You save:  ISK kr5,539.84
DH400.86
List Price:  DH801.83
You save:  DH400.96
L734.57
List Price:  L1,469.33
You save:  L734.75
ден2,358.54
List Price:  ден4,717.67
You save:  ден2,359.13
MOP$318.86
List Price:  MOP$637.80
You save:  MOP$318.94
N$733.28
List Price:  N$1,466.76
You save:  N$733.47
C$1,465.68
List Price:  C$2,931.72
You save:  C$1,466.04
रु5,417.88
List Price:  रु10,837.11
You save:  रु5,419.23
S/148.31
List Price:  S/296.66
You save:  S/148.35
K161.51
List Price:  K323.07
You save:  K161.55
SAR150.21
List Price:  SAR300.46
You save:  SAR150.25
ZK1,102.28
List Price:  ZK2,204.85
You save:  ZK1,102.56
L190.81
List Price:  L381.67
You save:  L190.86
Kč963.45
List Price:  Kč1,927.14
You save:  Kč963.69
Ft15,873.63
List Price:  Ft31,751.23
You save:  Ft15,877.60
SEK kr441.19
List Price:  SEK kr882.49
You save:  SEK kr441.30
ARS$40,705.74
List Price:  ARS$81,421.67
You save:  ARS$40,715.92
Bs275.23
List Price:  Bs550.54
You save:  Bs275.30
COP$174,344.67
List Price:  COP$348,732.94
You save:  COP$174,388.27
₡20,095.61
List Price:  ₡40,196.26
You save:  ₡20,100.64
L1,011.06
List Price:  L2,022.38
You save:  L1,011.31
₲310,574.38
List Price:  ₲621,226.44
You save:  ₲310,652.05
$U1,776.52
List Price:  $U3,553.49
You save:  $U1,776.96
zł163.49
List Price:  zł327.04
You save:  zł163.54
Already have an account? Log In

Transcript

Now I'm going to explain the this keyword. I know it's very confusing, and I still face many programmers who tell me that they did not completely understand the this keyword, despite the fact that they are no longer beginners. I remember back in the day, I extremely struggled to understand this keyword. And yes, I admitted, it's confusing. And after this tutorial, I promise I am going to make it super easy for you to understand it too. So first of all, what is this really is, this keyword actually refers to the object that is currently calling the function or the object that we are currently using.

So let's now take some examples and see what it means. So first of all, I want you to open an empty tab in your Google Chrome so that we are going to work in the console instead. So here I'm going to use, I'm going to open a new tab, and then I'm going to click on expecting inspect. And then I'm going to click on console. And I'm going to give myself a big space here. And now let's begin with an example.

Let's first just print the base keyword using the console log and see what it means. First of all, I'm going to use the console console dot log. And then I'm going to print the vis inside and see the result. Don't forget the semicolon, then hit enter. And as you can see, what you are going to get is the window object. As you can see, this is the window object.

And of course, it has many, many properties and functions. And what the window object means is that it's the window itself. The bigger or the biggest object in the browser. So always in JavaScript, the bigger object that you are going to work with if there is no object is the window object in any browser, or the global object in Sublime Text or any text editor. So if I get to Sublime Text, and use exactly the same if I use the console dot log, and just print this key word, what I'm going to get is that I'm going to get an empty object. But here it did not say global, but it's actually the global.

It's the global object. And why is that? Because there is no other object. Here. This refers to the global object. Always in JavaScript, there is a be the biggest object here.

And this object is the global object. As long as there is no other object, then this key word is will refer to the global object in sublime, or in the window object in Google Chrome or any browser. Now, if I get back to Google Chrome, now I'm going to close this window object because it has a lot of functions. And let's take other examples so that we understand what this actually refers to. Here, what what I'm going to tell you is that I'm going to create a simple object like we learned before. So for example, let foot baller equals to object.

And then it's going to take two parameters. The first one is name. And here, Ronaldo. And then the second property is a function, which is called speed, the speed of that player. And here it's a function and it's gonna take it's gonna take you Just it's going to just print console dot log, and it's just going to print this, I'm not going to create this PDF, I'm not going to create it, but let's just try this, this printing here and see what we get. And by the way, don't hit enter at all, because if you hit enter, it's gonna just execute incomplete function, you need to write everything in the same line here.

And once you finish just click, just hit enter. It's gonna just create this object. And now if I call football, or if I call the speed functions speed, and then parentheses, and then semicolon, don't forget the semicolon, and then hit enter. Guess what I'm going to get? What I'm going to get is that the object itself, I'm going to get the complete object of a football or object, because here I told this speed method to just print out the this keyword. So this keyword inside an object refers to the object itself.

So here it means this keyword, as you can see here refers to the complete object to this object, this complete object from here to hear from the, from the far left to the far right. So what this refers in an object to the object itself, so when whenever you use it inside an object, it refers to that object. But there is a third way that this refers to. So this also refers to the object when we use when we create an object from a constructor function. So let's try this but we are not going to try it here. Because here it will not we will not be able to create a big A B code.

Let's get back to Sublime Text. So here in Sublime Text, what I'm going to tell you is that I'm going to create it constructor function. And also I'm going to call it foot bowler. And this function is going to have, let's say it's going to have this on name. And as we know, as we learned in the when we create the construct when we created the constructor function, this now refers to the object that we are going to create from this constructor function. So it refers to this footballer.

So this name equals to, let's say, Ronaldo, and I am going here to just console just print out this from inside the constructor function this right and what I'm going to do here is I am going to create an object from this constructor function. So I'm going to create let throught baller one equals two. And to create an object from this constructor function, you type new and then footballer, as we learned, and that's it. If now I save and run, guess what I'm going to get, what I'm gonna get is that the footballer object, as you can see, it has one property now, because now when you created an object here from this constructor, this now refers to this object, because once you create a new footballer, it immediately creates an object. And this now refers to this object. So whenever you use this inside, inside this function, it refers to this object.

And even if I make this more complicated than this, if here suppose that I create another function in that inside this constructor function that says speed, and then equals to function and then parentheses curly braces and then console dot log. And I'm going to just log the this keyword and see what it refers to. Now if I call this function here, I would use the footballer object and then call this function which is going to which is going to print this keyword. What I'm going to get guess what I'm going to get. What I'm going to get is that I am again going to get the complete object because he or this refers to the object that we have created. So always remember that this keyword refers to the object that we are currently using or the or the object that is calling this function the function that we are calling.

So you need to trace back the object the object now is the football or object. So the football or object here the context is that this football or object, as this name has With speed, and now this refers to this object. But suppose now suppose now if I delete all of this, and create just a function without not an unconstructed function, just a simple function, let's say function, display name, display name. And this function, what it's going to do is just going to console, it's just going to display the this keyword. Now, if I call this function, display name, if I save and run, guess what I'm going to get what I'm going to get as you can see, what I am going to get is the global object, I am going to get the global object because the reason for that because now this function is a member of the global object.

It doesn't refer to any constructor function or it doesn't refer to any constructor function or any object, it's just a function of the global object. here behind the scenes. There is some global here, glow Bell object that calls this method, but it's not seen here you can see it. It's just, it's, it's available. It's there, but you can see it. It's like using the footballer when we use the footballer, we created new object, we created new, and then footballer, foot baller, and then we stored that into a variable, any variable, maybe let f equals to this and then we use this F, we use this F to call any function inside this football or so here, put ball right to call any any function inside this football.

So for example, the speed we can call the speed right here, here. Let me just comment these out. Here. What we did is the same But this function refers to the global object. It's a sign of the global object. So whenever you call this function, this keyword refers to the object of this function the object is the global object.

So to recap, this refers to either the window object, the window, in any browser, or the global, global in any text editor, or it refers to the constructor function or the object that we are going to create from the constructor function, the new and then the constructor function. Or it refers to the object that we used or we created, for example, var, a equals to the object, and then we use the this keyword. So this keyword always refers to the object that we are currently using there is always remember that there is always some object that you are using either the biggest object which is the global or the window object, or the object that you have created yourself by using just a simple object or an object from a constructor function. So hopefully now you understand the this keyword much, much better, and you can use them much easier.

And I recommend you that you practice these a lot, create your own function, or create your own functions, either just simple functions or constructor functions and try to use the this keyword and I'm going to also help you with that.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.