Understanding Prototypal Inheritance

Modern JavaScript Using Objects
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
€95.09
List Price:  €133.13
You save:  €38.04
£78.94
List Price:  £110.52
You save:  £31.58
CA$140.36
List Price:  CA$196.51
You save:  CA$56.15
A$154.11
List Price:  A$215.76
You save:  A$61.65
S$134.55
List Price:  S$188.37
You save:  S$53.82
HK$778.37
List Price:  HK$1,089.75
You save:  HK$311.38
CHF 88.52
List Price:  CHF 123.93
You save:  CHF 35.41
NOK kr1,106.63
List Price:  NOK kr1,549.34
You save:  NOK kr442.70
DKK kr709.28
List Price:  DKK kr993.02
You save:  DKK kr283.74
NZ$169.82
List Price:  NZ$237.76
You save:  NZ$67.93
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,988.23
List Price:  ৳16,784.01
You save:  ৳4,795.77
₹8,467.97
List Price:  ₹11,855.50
You save:  ₹3,387.52
RM447.04
List Price:  RM625.88
You save:  RM178.83
₦166,528.34
List Price:  ₦233,146.34
You save:  ₦66,618
₨27,878.62
List Price:  ₨39,031.19
You save:  ₨11,152.56
฿3,448.65
List Price:  ฿4,828.25
You save:  ฿1,379.60
₺3,474.63
List Price:  ₺4,864.62
You save:  ₺1,389.99
B$606.07
List Price:  B$848.53
You save:  B$242.45
R1,812.25
List Price:  R2,537.23
You save:  R724.97
Лв185.87
List Price:  Лв260.23
You save:  Лв74.35
₩140,325.03
List Price:  ₩196,460.65
You save:  ₩56,135.62
₪363.29
List Price:  ₪508.62
You save:  ₪145.33
₱5,860.21
List Price:  ₱8,204.53
You save:  ₱2,344.32
¥15,003.24
List Price:  ¥21,005.14
You save:  ¥6,001.90
MX$2,037.82
List Price:  MX$2,853.03
You save:  MX$815.21
QR365.99
List Price:  QR512.40
You save:  QR146.41
P1,371.46
List Price:  P1,920.09
You save:  P548.63
KSh12,948.70
List Price:  KSh18,128.70
You save:  KSh5,180
E£4,972.73
List Price:  E£6,962.02
You save:  E£1,989.29
ብር12,708.79
List Price:  ብር17,792.82
You save:  ብር5,084.02
Kz91,367.63
List Price:  Kz127,918.34
You save:  Kz36,550.70
CLP$97,866.21
List Price:  CLP$137,016.61
You save:  CLP$39,150.40
CN¥728.56
List Price:  CN¥1,020.02
You save:  CN¥291.45
RD$6,062.22
List Price:  RD$8,487.35
You save:  RD$2,425.13
DA13,374.70
List Price:  DA18,725.11
You save:  DA5,350.41
FJ$226.89
List Price:  FJ$317.66
You save:  FJ$90.76
Q774.91
List Price:  Q1,084.90
You save:  Q309.99
GY$20,989.70
List Price:  GY$29,386.42
You save:  GY$8,396.72
ISK kr13,854.61
List Price:  ISK kr19,397.01
You save:  ISK kr5,542.40
DH1,003.07
List Price:  DH1,404.34
You save:  DH401.27
L1,829.81
List Price:  L2,561.81
You save:  L732
ден5,843.82
List Price:  ден8,181.59
You save:  ден2,337.76
MOP$804
List Price:  MOP$1,125.64
You save:  MOP$321.63
N$1,823.60
List Price:  N$2,553.11
You save:  N$729.51
C$3,691.46
List Price:  C$5,168.20
You save:  C$1,476.73
रु13,596.96
List Price:  रु19,036.28
You save:  रु5,439.32
S/375.10
List Price:  S/525.15
You save:  S/150.05
K404.87
List Price:  K566.84
You save:  K161.96
SAR375.70
List Price:  SAR525.99
You save:  SAR150.29
ZK2,700.55
List Price:  ZK3,780.88
You save:  ZK1,080.32
L473.26
List Price:  L662.58
You save:  L189.32
Kč2,399.05
List Price:  Kč3,358.77
You save:  Kč959.71
Ft39,367.58
List Price:  Ft55,116.19
You save:  Ft15,748.61
SEK kr1,100.06
List Price:  SEK kr1,540.13
You save:  SEK kr440.07
ARS$101,124.97
List Price:  ARS$141,579.01
You save:  ARS$40,454.03
Bs693.18
List Price:  Bs970.48
You save:  Bs277.30
COP$444,056.18
List Price:  COP$621,696.42
You save:  COP$177,640.23
₡50,965.01
List Price:  ₡71,353.06
You save:  ₡20,388.04
L2,538.71
List Price:  L3,554.30
You save:  L1,015.58
₲783,072.72
List Price:  ₲1,096,333.13
You save:  ₲313,260.41
$U4,316.99
List Price:  $U6,043.95
You save:  $U1,726.96
zł408.23
List Price:  zł571.54
You save:  zł163.31
Already have an account? Log In

Transcript

Object prototypes is another one of those topics in JavaScript that I get excited about. prototypes are the things that make the object oriented approach JavaScript takes so powerful. Now, every JavaScript object has at least a second JavaScript object that it inherits properties from. And this is called the prototype. So if the prototype of an object has certain properties, certain methods, well, the object itself can use those same properties and methods, it inherits those from the prototype. So basically, the way it works is if you call a property of an object, it will first look in its own object definition and see if it can find it.

If not, it will look in it prototype definition. If it can't find it in its immediate prototype, it will look in the next prototype. So that is the whole process of inheritance and the chaining of properties between objects. Let me pull up a diagram to help explain this even further. So prototypal inheritance, that's the term we use in JavaScript to talk about this whole concept. Here we have an object.

User one is the reference we use for it. That's the variable that points to the object. And then we have some properties in there we have username, age, address, city, and then we also have a method the full address method. Now if this object were created, using the object literal, or using the object constructor, either one, its prototype object would be object prototype. And so there would be a link, the object will have a link to its product Type in in this example we're showing here, the prototype actually has a property state. Now, user one object does not have a property state if it did, it would use that if I tried to address state, but since it does not have it, it links to its prototype and searches the prototype for that property.

Now, I also mentioned the property chaining, or the prototype chaining. Its prototype may also be linked to a prototype. And so it would continue to search through the prototypes and until it got to the prototype that is the highest level, which in JavaScript is the object dot prototype that's at the highest level. Now let me open up the console and we'll explore these concepts a little bit more. So I'm going to create an object using the object literal. This is one we used in the previous session.

Now I'm going to display that object by simply typing it in, I can press this down arrow to display the contents of the object, the different properties of the object. Now notice down here at the bottom, this protocol, this is the link to its prototype, this is where it shows that link. If I were to open that up, suddenly I get a whole lot of additional things that I can do with my object simply from the prototype. My object inherits all of these functions, etc, so that I can do more with my object. For example, there is a two string function. So the object I just created the customer object, I can type to string.

Now function there's nothing really exciting about it is simply indicates that this is an object. That's all it does. But I inherited that from its prototype, I did not have to create it. Now, as we've talked about arrays are also objects. And since they're objects, they link to a prototype as well. And so when we were doing things like array dot length, well, where does that length come from?

Well, it is available because of the array prototype, which all arrays link to, has the first prototype. The same thing for functions. When things are available within functions. It's because of the prototype. So if I were to type array dot, and then in our console, we see all the different things I can access from that array object. index.

Some of these, we've learned join, all of those are defined in the array prototype. So prototypes can be very powerful for JavaScript. And in the next movie, we're going to look at how you can specify the prototype of an object using another object. Therefore, you can set up an object with certain properties, certain methods that you want multiple objects to have. And you simply make that object, the prototype of those other objects. So let's move on to the next movie and talk about 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.