When They "feel" the Same - Code - Part 4

What’s the Difference Between Scope and Context in JavaScript? When Scope and Context "feel" like the same thing (but they are not)
5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€94.93
List Price:  €132.91
You save:  €37.97
£79.03
List Price:  £110.65
You save:  £31.61
CA$140.06
List Price:  CA$196.09
You save:  CA$56.03
A$153.89
List Price:  A$215.46
You save:  A$61.56
S$134.42
List Price:  S$188.19
You save:  S$53.77
HK$778.15
List Price:  HK$1,089.44
You save:  HK$311.29
CHF 88.46
List Price:  CHF 123.85
You save:  CHF 35.38
NOK kr1,106.89
List Price:  NOK kr1,549.69
You save:  NOK kr442.80
DKK kr708.13
List Price:  DKK kr991.41
You save:  DKK kr283.28
NZ$169.76
List Price:  NZ$237.67
You save:  NZ$67.91
د.إ367.26
List Price:  د.إ514.19
You save:  د.إ146.92
৳11,913.94
List Price:  ৳16,679.99
You save:  ৳4,766.05
₹8,449.26
List Price:  ₹11,829.30
You save:  ₹3,380.04
RM444.65
List Price:  RM622.53
You save:  RM177.88
₦168,698.12
List Price:  ₦236,184.12
You save:  ₦67,486
₨27,703.14
List Price:  ₨38,785.50
You save:  ₨11,082.36
฿3,443.25
List Price:  ฿4,820.69
You save:  ฿1,377.44
₺3,462.60
List Price:  ₺4,847.78
You save:  ₺1,385.18
B$598.25
List Price:  B$837.57
You save:  B$239.32
R1,818.71
List Price:  R2,546.27
You save:  R727.55
Лв185.54
List Price:  Лв259.76
You save:  Лв74.22
₩139,623.30
List Price:  ₩195,478.21
You save:  ₩55,854.90
₪365.09
List Price:  ₪511.14
You save:  ₪146.05
₱5,872.56
List Price:  ₱8,221.82
You save:  ₱2,349.26
¥15,186.98
List Price:  ¥21,262.38
You save:  ¥6,075.40
MX$2,025.91
List Price:  MX$2,836.36
You save:  MX$810.44
QR363.39
List Price:  QR508.76
You save:  QR145.37
P1,362.02
List Price:  P1,906.89
You save:  P544.86
KSh12,948.70
List Price:  KSh18,128.70
You save:  KSh5,180
E£4,970.06
List Price:  E£6,958.29
You save:  E£1,988.22
ብር12,601.88
List Price:  ብር17,643.14
You save:  ብር5,041.25
Kz91,089.09
List Price:  Kz127,528.37
You save:  Kz36,439.28
CLP$97,725.22
List Price:  CLP$136,819.22
You save:  CLP$39,094
CN¥725.08
List Price:  CN¥1,015.15
You save:  CN¥290.06
RD$6,009.89
List Price:  RD$8,414.09
You save:  RD$2,404.19
DA13,359.34
List Price:  DA18,703.61
You save:  DA5,344.27
FJ$226.94
List Price:  FJ$317.73
You save:  FJ$90.78
Q769.20
List Price:  Q1,076.91
You save:  Q307.71
GY$20,858.96
List Price:  GY$29,203.38
You save:  GY$8,344.42
ISK kr13,737.62
List Price:  ISK kr19,233.22
You save:  ISK kr5,495.60
DH998.96
List Price:  DH1,398.59
You save:  DH399.62
L1,830.82
List Price:  L2,563.22
You save:  L732.40
ден5,834.63
List Price:  ден8,168.72
You save:  ден2,334.08
MOP$798.95
List Price:  MOP$1,118.57
You save:  MOP$319.61
N$1,808.86
List Price:  N$2,532.48
You save:  N$723.61
C$3,668.81
List Price:  C$5,136.49
You save:  C$1,467.67
रु13,468.97
List Price:  रु18,857.10
You save:  रु5,388.12
S/375.25
List Price:  S/525.36
You save:  S/150.11
K402.01
List Price:  K562.83
You save:  K160.82
SAR375.60
List Price:  SAR525.86
You save:  SAR150.25
ZK2,719.29
List Price:  ZK3,807.12
You save:  ZK1,087.82
L472.45
List Price:  L661.45
You save:  L189
Kč2,399.23
List Price:  Kč3,359.02
You save:  Kč959.78
Ft39,362.83
List Price:  Ft55,109.54
You save:  Ft15,746.71
SEK kr1,093.94
List Price:  SEK kr1,531.56
You save:  SEK kr437.61
ARS$100,789.45
List Price:  ARS$141,109.26
You save:  ARS$40,319.81
Bs688.98
List Price:  Bs964.60
You save:  Bs275.62
COP$439,886.78
List Price:  COP$615,859.09
You save:  COP$175,972.31
₡50,922.11
List Price:  ₡71,293
You save:  ₡20,370.88
L2,521.57
List Price:  L3,530.31
You save:  L1,008.73
₲779,303.12
List Price:  ₲1,091,055.54
You save:  ₲311,752.42
$U4,282.79
List Price:  $U5,996.09
You save:  $U1,713.29
zł409.03
List Price:  zł572.67
You save:  zł163.63
Already have an account? Log In

Transcript

Okay, let's look at an example ie the one that's titled foo is now a constructor. So on line 49, I have the Foo function. But you may notice that I've used a capital F when I named foo, not just lowercase fo but capital fo and that doesn't essentially change anything. But it's a convention that most programmers use that you want to capitalize the first letter of a function when you want it to be a constructor. And I do want it to be constructed because on line 56, I'm not just executing foo, I'm instantiating. It I'm saying var foo equals new foo.

And if you've worked with constructor func constructor functions in all JavaScript, you know that when you instantiate a constructor, you do execute it. So foo will be executed. But it's a little bit different because bar, the value bar winds up being the instance of the Foo class. foo is essentially acting as a class here. In bar is going to get an instance of the class. So inside of our controller After I create a speed variable to private to that constructor, and I alert this dot speed.

So let's execute this code in our console. And we'll see what what happens. So I alert it and I get undefined. Why is that? Well, if we go back to the code, will I, my first thought might have been that, well, I create the speed variable. So when I'm instantiating, foo, shouldn't the execution of food produce an instance of foo?

Well, it should. But the problem is that you may think that the word this references the instance of foo, and it does, it's true through the bar. This equals bar meaning that when you instantiate foo using bar, this keyword inside of the constructor references the instance has been returned so that that's true, but speed is not a problem. of the constructor. It's a variable. And that's one of the areas where scope and context can feel like the same thing.

But in this case, they're very much not the same thing. Speed is a variable when you think variables you think scope. But in this case, we're, we're trying to reference a we're trying to reference the speed property of this variable. But of this instance, but the instance doesn't have a speed variable. It has a speed doesn't have a speed property has a speed variable. So this dot speed is essentially undefined.

If I were to say let's see. Let's see return. Speed 5000. And then I alert bar dot speed. This should work. So let's copy this code and paste it and we get 5000.

The reason we get 5000 is because now the class food does have a screen Property Bar winds up with speed property. In fact, if I were to do a console d'oeuvre I will just type bar and in the console, I see I get an object with a speed property. So in that case, it would work. Now, the instance of food does have a speed property. Another way to do this would be if I wanted to keep the alert inside the constructor, I could say foo dot pro prototype, dot speed equal So let's say 10,000, just to prove our case here, so I'm gonna refresh the page. And oops, I should have said that.

See, there you go, typo. Okay, so let's refresh the page. And now I get 10,000. And the reason is because even though I don't declare a speed property when I create the constructor, as soon as I create the constructor, I create a speed property on the prototype object. Now, prototyping is again, that's that's, that's fuel for a whole nother class. But the point here is that I'm extending the constructor here, with I'm giving it a prototype aren't giving putting up a speed property on its prototype object, which means that when I instantiate foo bar will have a speed property.

So this dot speed does resolve to 10,000 So, but the original question did not have a prototype and it the reason why we got undefined is because this class constructor has a speed variable but not a speed property.

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.