Defining the Prototype with Object.create

Modern JavaScript Using Objects
9 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
€96.21
List Price:  €134.70
You save:  €38.49
£79.93
List Price:  £111.90
You save:  £31.97
CA$143.79
List Price:  CA$201.32
You save:  CA$57.52
A$160.48
List Price:  A$224.69
You save:  A$64.20
S$135.83
List Price:  S$190.17
You save:  S$54.33
HK$777.07
List Price:  HK$1,087.93
You save:  HK$310.86
CHF 89.45
List Price:  CHF 125.24
You save:  CHF 35.78
NOK kr1,141.95
List Price:  NOK kr1,598.78
You save:  NOK kr456.82
DKK kr717.64
List Price:  DKK kr1,004.72
You save:  DKK kr287.08
NZ$177.52
List Price:  NZ$248.53
You save:  NZ$71.01
د.إ367.25
List Price:  د.إ514.17
You save:  د.إ146.91
৳11,994.74
List Price:  ৳16,793.12
You save:  ৳4,798.37
₹8,496.63
List Price:  ₹11,895.62
You save:  ₹3,398.99
RM450.75
List Price:  RM631.07
You save:  RM180.32
₦155,628.43
List Price:  ₦217,886.03
You save:  ₦62,257.60
₨27,934.96
List Price:  ₨39,110.06
You save:  ₨11,175.10
฿3,444.45
List Price:  ฿4,822.37
You save:  ฿1,377.92
₺3,518.54
List Price:  ₺4,926.10
You save:  ₺1,407.55
B$617.53
List Price:  B$864.57
You save:  B$247.04
R1,837.80
List Price:  R2,572.99
You save:  R735.19
Лв188.31
List Price:  Лв263.64
You save:  Лв75.33
₩144,872.25
List Price:  ₩202,826.95
You save:  ₩57,954.69
₪364.89
List Price:  ₪510.86
You save:  ₪145.97
₱5,883.01
List Price:  ₱8,236.45
You save:  ₱2,353.44
¥15,672.80
List Price:  ¥21,942.55
You save:  ¥6,269.75
MX$2,028.91
List Price:  MX$2,840.56
You save:  MX$811.64
QR366.34
List Price:  QR512.89
You save:  QR146.55
P1,382.59
List Price:  P1,935.69
You save:  P553.09
KSh12,923.70
List Price:  KSh18,093.70
You save:  KSh5,170
E£5,091.27
List Price:  E£7,127.98
You save:  E£2,036.71
ብር12,764.56
List Price:  ብር17,870.89
You save:  ብር5,106.33
Kz91,790.82
List Price:  Kz128,510.82
You save:  Kz36,720
CLP$99,155.08
List Price:  CLP$138,821.08
You save:  CLP$39,666
CN¥729.81
List Price:  CN¥1,021.77
You save:  CN¥291.95
RD$6,104.52
List Price:  RD$8,546.58
You save:  RD$2,442.05
DA13,454.60
List Price:  DA18,836.98
You save:  DA5,382.37
FJ$232.11
List Price:  FJ$324.96
You save:  FJ$92.85
Q773.21
List Price:  Q1,082.52
You save:  Q309.31
GY$21,000.46
List Price:  GY$29,401.48
You save:  GY$8,401.02
ISK kr13,903.60
List Price:  ISK kr19,465.60
You save:  ISK kr5,562
DH1,007.40
List Price:  DH1,410.40
You save:  DH403
L1,841.78
List Price:  L2,578.57
You save:  L736.78
ден5,922.50
List Price:  ден8,291.74
You save:  ден2,369.23
MOP$803.42
List Price:  MOP$1,124.82
You save:  MOP$321.40
N$1,834.70
List Price:  N$2,568.66
You save:  N$733.95
C$3,694.32
List Price:  C$5,172.20
You save:  C$1,477.87
रु13,665.58
List Price:  रु19,132.35
You save:  रु5,466.77
S/374.71
List Price:  S/524.60
You save:  S/149.89
K406.86
List Price:  K569.63
You save:  K162.76
SAR375.72
List Price:  SAR526.02
You save:  SAR150.30
ZK2,777.96
List Price:  ZK3,889.25
You save:  ZK1,111.29
L478.81
List Price:  L670.35
You save:  L191.54
Kč2,418.25
List Price:  Kč3,385.65
You save:  Kč967.40
Ft39,800.47
List Price:  Ft55,722.25
You save:  Ft15,921.78
SEK kr1,103.66
List Price:  SEK kr1,545.17
You save:  SEK kr441.50
ARS$102,190.76
List Price:  ARS$143,071.15
You save:  ARS$40,880.39
Bs693.61
List Price:  Bs971.08
You save:  Bs277.47
COP$437,799.12
List Price:  COP$612,936.28
You save:  COP$175,137.16
₡50,480.33
List Price:  ₡70,674.48
You save:  ₡20,194.15
L2,548.03
List Price:  L3,567.35
You save:  L1,019.31
₲784,126.06
List Price:  ₲1,097,807.85
You save:  ₲313,681.79
$U4,460.41
List Price:  $U6,244.75
You save:  $U1,784.34
zł409.96
List Price:  zł573.96
You save:  zł164
Already have an account? Log In

Transcript

The concept of the prototype is a powerful idea in JavaScript, it expands what we're able to do with objects. And since JavaScript is made up of objects, it expands what we can do with JavaScript. As mentioned in the previous movie, we can specify a prototype for objects we're creating. We do that with object create. And I'll show you that in just a minute. But not only can we specify the prototype, we can modify or add to the prototype for objects that already exist.

And when we modify or add to that prototype, it affects all the objects that use or inherit from that prototype. So I'm going to show you an example of that first, and then we'll use the object create to define Our own prototype for a couple of objects. So let me open the console. And I'm going to create an array set at eat pool two, we'll just have three numbers in the array. I now have my array. Now what if I wanted to do a method to an array that simply says hi.

Well, obviously the Say hi method does not exist for arrays right now. However, I can change that. I can change that for as long as this code is available in the JavaScript engine, which in this case, is the browser window. So until this HTML page closes, or the browser window closes, I can make a function available for all of these arrays. And I do that by typing array dot prototype dot. Now I define the new property.

And it's a function. So I set it equal to function keyword, parentheses, and then in curly braces the code that will execute. Now I press return. Now arrays have a new method associated with them. So the array I created previously. Now if I do say hi, it comes back and says hi, it doesn't give me an error then say uncaught type error, because now it is defined.

So very powerful idea there. All right, let me clear this. Now let's use the object dot create to define our own prototype. So here's an example we have. We're going to create a company object The company object has the name of the company. And then it also has a function full name.

And all that function does is it returns the first name and the last name concatenated together. So I'm gonna go ahead and create that object. Now, I have several employee objects I want to create, and I want the prototype of those employee objects to be this company object I just created so that I don't have to repeat that information for every single object. So company name is available in each of them. And the full name method is available in each of them. So how would I go about doing that?

So employee one, here's one way equals object create. So I set up my variable, and then I set it equal to object dot create, and then I pass into object create the object that I want to use as the prototype. I press return. So what it does Let's look at employee one now. It creates an empty object. But the prototype of that empty object is the company object because here's company name, and here's the full name function.

All right, pretty cool. Now I can add to that object I've created. I can add additional properties. There's first name. There's last name. Now, we should be able to use the full name method.

And sure enough that concatenates them both together. So that's one way to create an object while you're defining its prototype. Is you first create the empty, empty object using object dot create. And then you add the additional properties you want to the object itself. Well We can also add those properties at the same time we're creating the object using object job object dot create. And let's look at how we would do that.

We'll do that with our second employee. So employee two equals dot create, and then we pass in company, right? Then we have a comma. Now the second argument for object dot create are the properties that I want to add to this new object. Now, it's not as simple as doing object literal notation. Here's how it works.

So we enter our curly braces. Oops, we enter our curly braces. We got to finish the statement before I press return and then we specify The property, the name of that name value pair. But then we have to put curly braces again and inside of there, we define certain things about that property, one of which is the value. And that's what we're going. That's the only part we'll do at this point is we'll simply define the value, we put it a closing curly braces to that, put a comma.

And we do the next line, I'm going to a new line in the console by pressing Shift Enter. That allows me to go to a new line without causing it to execute. Last name, we're also going to add a value there. And let's make that smart as well. Then, close the curly braces. Close the parentheses.

So here's what we have variables. Employee two is equal to object dot create, we pass in the company that will be the prototype, that's the object that will now be the prototype. And now we define some additional properties for that object. And we have to enclose all of that within curly braces. But for each property we define there are certain characteristics we define about that property that is that are enclosed within curly braces, one of which is the value there are also other things as well, which won't deal with it this time, but the value is obviously an important part of that definition. Now we press return.

Now employee two should be defined. And it has a first name as the last name. The prototype object is the company object. So I can execute full name with employee two as well. So in review, we've looked at three different ways to create objects the object literal. The object constructor, which is done using the new keyword.

And now we've used object create the first to accomplish the same thing. The prototype of objects created with object literal, or the object constructor is object dot prototype. With object dot create, we can specify what the prototype is, that prototype becomes the object we pass in. Now, you may wonder, well, what's the prototype of that prototype? Well, that would be object dot prototype in the case we've used here because when I created company clear up here, I did as an object literal. So its prototype would be object dot prototype.

So when I used it as the prototype for the employees, it became their prototype. And so the prototype chain would be the company object and then object dot prototype. So those are the three ways to create objects. We have another concept to deal with in the object section and that has to do with constructors. So let's move on to the next movie.

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.