Switching Context with .call() & .apply()

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

So let's find out what it means to switch context in JavaScript. Earlier, we learned that context refers to the object to which a method belongs. But sometimes, we may want to make a method think it belongs to a different object. For example, on the left side of the screen, I have an object called foo. On the right side of the screen, I have an object called bar. Each one of these objects has a greeting property.

And each one of these objects also has a Greek property. Now once again, in JavaScript when a property is a function, it's called a method. So in each case, the greet method returns this greeting. So if I were to execute, food dot greet, I would get I am foo and if I were to get execute bar dot greet, I would get I am bar and in each case, the greet method interacts directly with the greeting property of that object. Each greet method is executed in the context of its Object through Deke read is executed in the context of foo. And bar duck rate is executed in the context of bar.

Well, there's a way that we can jump in and we can change the context of each method. It's called context switching. So we can make the food greet method think it belongs to bar, and we can make the bar greet method think it belongs to foo. So as you can see here, food dot greet is now on the right it has that blue box and when execute, food creed, I get I am bar when I execute bar dot greet, I get I am foo. This may seem a little confusing, a little odd. So let's jump into some code and we can see how this really works.

In your examples folder, open up the context of folder and then open the file context call and apply to. So I've got two objects here, foo and bar. And both objects have a greeting property. And both objects have a greet method. In both cases, the greet method returns the value of that objects greeting property. So if I were to execute food dot greet, I should get Iam foo.

And if I were to execute bar dot greet, I should get I am bar. Let's make sure this works as we expect. So copy both of those objects, paste some new JavaScript console. And now I'll execute food dot greet. And I get I am foo. And if I execute, execute, bar dot greet, I get I am bars.

That's pretty much what we expect to happen down here on line 17, copy this code and execute this in your JavaScript console. So something pretty weird happens here. I executed food dot greet and I got I am bar which doesn't really make sense. But there's a little more going on here. I said foo dot greet call bar. What's happening is I'm using the call method to switch the context of the food greet method.

So the syntax is its object. method call new context. So foo dot greet call but do it in the, in the context of bar. And if I were to say bar dot greet dot call foo. I would get I am foo. I'm executing bar Creek, but I'm getting on food because I'm saying bar Dockery call in the context of foo.

So what happens with the call method is you temporarily take a method and move it into the context of another object. It's not literally what's happening, but it's effectively what's happening. So when I say food, cat food, greet call bar, I'm executing this method, but I'm making it think it belongs to this object. And when I'm saying bar greet call foo. I'm executing bar duck. But I'm making it think it belongs to foo just for the moment.

So if you copy this line 20 here, it's actually line 18. If I reopen this file, so line 18. And I run that I get the same thing as if I execute foo dot greet, apply. And bar, I get Im bar, because I switched the context of food agree to bar. Now the call and apply methods do the exact same thing. The only difference is passing arguments.

Let's say that the food greet method expected two arguments A and B and I want to pass those. Well, if I wanted to do that with call, I would pass the arguments in a comma separated list. And if I wanted to do that with apply, I pass the arguments as an array. So with food or greed call, I pass it the context of new contact which is bought comma and then all my arguments. And with food agree that apply I pass a bar and then an array of any arguments but in both cases the call and apply methods allow you to switch the context in which a method is executed.

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.