1
00:00:01,124 --> 00:00:03,587
Here's another way to look at prototypes.

2
00:00:03,587 --> 00:00:05,716
First of all, when we created our person

3
00:00:05,716 --> 00:00:07,766
function, JavaScript also created another

4
00:00:07,766 --> 00:00:10,415
object in memory. This is essentially an

5
00:00:10,415 --> 00:00:13,539
empty object at this point. It does have a

6
00:00:13,539 --> 00:00:14,587
proto property that we'll talk about

7
00:00:14,587 --> 00:00:17,306
later, but other than that, this is just

8
00:00:17,306 --> 00:00:19,588
an empty object. After creating that

9
00:00:19,588 --> 00:00:21,365
object, JavaScript updates the function's

10
00:00:21,365 --> 00:00:24,844
prototype property to point to this new

11
00:00:24,844 --> 00:00:26,516
object. And note that we haven't even

12
00:00:26,516 --> 00:00:29,000
created a new person object yet, this is

13
00:00:29,000 --> 00:00:30,461
just the prototype object that was created

14
00:00:30,461 --> 00:00:32,476
for us when we created our person

15
00:00:32,476 --> 00:00:34,105
function. And we can manipulate the

16
00:00:34,105 --> 00:00:36,249
properties on that function's prototype

17
00:00:36,249 --> 00:00:38,981
object like this. When we add age to the

18
00:00:38,981 --> 00:00:41,192
person function's prototype, it adds that

19
00:00:41,192 --> 00:00:43,611
property to this object. Remember we

20
00:00:43,611 --> 00:00:45,762
haven't even created a person object from

21
00:00:45,762 --> 00:00:48,423
our function yet, this is just the hidden

22
00:00:48,423 --> 00:00:49,957
prototype object that the JavaScript

23
00:00:49,957 --> 00:00:52,482
created behind the scenes. So let's create

24
00:00:52,482 --> 00:00:54,662
a new person object from our function now.

25
00:00:54,662 --> 00:00:57,600
We do that like this. When we do that, the

26
00:00:57,600 --> 00:00:59,789
new object takes care of creating a new

27
00:00:59,789 --> 00:01:01,991
object, but the new keyword also does

28
00:01:01,991 --> 00:01:04,057
something else behind the scenes, it adds

29
00:01:04,057 --> 00:01:07,182
a proto property to our new object, and

30
00:01:07,182 --> 00:01:10,514
that property is a pointer to our person

31
00:01:10,514 --> 00:01:12,700
function's prototype object. Then the new

32
00:01:12,700 --> 00:01:14,599
keyword executes our Person function, and

33
00:01:14,599 --> 00:01:17,213
the this keyword in this context is

34
00:01:17,213 --> 00:01:20,509
pointing to our new Jim object, so it adds

35
00:01:20,509 --> 00:01:22,675
the firstName and lastName properties to

36
00:01:22,675 --> 00:01:25,384
our new object. And if we create another

37
00:01:25,384 --> 00:01:27,816
instance of person, the same process is

38
00:01:27,816 --> 00:01:30,896
followed, a new object is created, its

39
00:01:30,896 --> 00:01:33,657
proto property is created and is pointed

40
00:01:33,657 --> 00:01:35,707
to the function's prototype, and the

41
00:01:35,707 --> 00:01:37,703
instance properties are added. Notice at

42
00:01:37,703 --> 00:01:40,358
this point the Jim object itself does not

43
00:01:40,358 --> 00:01:42,444
have an age property, only its prototype

44
00:01:42,444 --> 00:01:44,903
does. So if we ask for Jim's age at this

45
00:01:44,903 --> 00:01:47,954
point, what's going to happen? When I do

46
00:01:47,954 --> 00:01:49,283
that, JavaScript will check the Jim object

47
00:01:49,283 --> 00:01:52,045
to see if it has an age property. Since it

48
00:01:52,045 --> 00:01:54,168
does not have an age property, it will

49
00:01:54,168 --> 00:01:57,051
then check its prototype parent to see if

50
00:01:57,051 --> 00:02:00,150
it has an age property, at which point it

51
00:02:00,150 --> 00:02:01,867
discovers that it does, so this console

52
00:02:01,867 --> 00:02:04,096
log would log 29. Now what happens if we

53
00:02:04,096 --> 00:02:06,742
want to update Jim's age? In code, we

54
00:02:06,742 --> 00:02:09,808
simply do that like this, and that adds an

55
00:02:09,808 --> 00:02:11,830
age property to our Jim instance here. Now

56
00:02:11,830 --> 00:02:15,034
if we ask for Jim's age, it will check to

57
00:02:15,034 --> 00:02:18,048
see if Jim has an age property, and it

58
00:02:18,048 --> 00:02:20,731
does, so it returns the value of 18

59
00:02:20,731 --> 00:02:22,339
without ever checking to see if the

60
00:02:22,339 --> 00:02:24,862
prototype has an age property. So the

61
00:02:24,862 --> 00:02:27,535
instance properties override the prototype

62
00:02:27,535 --> 00:02:29,540
properties. So what would happen if we

63
00:02:29,540 --> 00:02:31,928
updated the person function's prototypes

64
00:02:31,928 --> 00:02:34,622
age property? We could do that in two

65
00:02:34,622 --> 00:02:37,468
ways, either directly like this, or we

66
00:02:37,468 --> 00:02:40,797
could do it through Jim's proto property

67
00:02:40,797 --> 00:02:43,128
like this. As our code stands now, this

68
00:02:43,128 --> 00:02:45,342
would have the exact same effect. It is

69
00:02:45,342 --> 00:02:46,625
possible, however, for these two

70
00:02:46,625 --> 00:02:48,219
statements to have a different effect.

71
00:02:48,219 --> 00:02:50,561
We'll talk more about that later. For now,

72
00:02:50,561 --> 00:02:53,946
let's just stick with the more direct

73
00:02:53,946 --> 00:02:55,629
approach. So when this line of code

74
00:02:55,629 --> 00:02:57,133
executes, it will change the age property

75
00:02:57,133 --> 00:03:01,036
of our function's prototype here. Now what

76
00:03:01,036 --> 00:03:03,749
would we get if we asked for Jim's age? We

77
00:03:03,749 --> 00:03:05,774
would get 18 because the instance property

78
00:03:05,774 --> 00:03:08,718
overrides the prototype property. And what

79
00:03:08,718 --> 00:03:11,559
if we asked for Sofia's age? We would get

80
00:03:11,559 --> 00:03:14,812
25 because Sofia has no instance property

81
00:03:14,812 --> 00:03:17,007
for age. Now let's revisit the definitions

82
00:03:17,007 --> 00:03:18,989
we created earlier and see if they make a

83
00:03:18,989 --> 00:03:21,305
little more sense. So a function's

84
00:03:21,305 --> 00:03:25,476
prototype is the object instance that will

85
00:03:25,476 --> 00:03:26,444
become the prototype for all objects

86
00:03:26,444 --> 00:03:30,175
created using this function as a

87
00:03:30,175 --> 00:03:32,198
constructor. An object's prototype is the

88
00:03:32,198 --> 00:03:35,879
object instance from which the object is

89
00:03:35,879 --> 00:03:37,547
inherited. Hopefully these definitions are

90
00:03:37,547 --> 00:03:39,125
starting to make more sense now.

91
00:03:39,125 --> 00:03:41,580
Prototypes are not really that complex

92
00:03:41,580 --> 00:03:46,000
once you understand what's happening behind the scenes.

