1
00:00:01,187 --> 00:00:03,173
Estamos de regreso con nuestro programa para crear "Winstons"

2
00:00:03,173 --> 00:00:08,799
pero añadí un nuevo tipo de objeto "Hooper" porque "Hooper" se sentía un poco solo.

3
00:00:08,799 --> 00:00:11,924
Ahora, defino a "Hooper" de la misma manera que definí a "Winston", ya sabes,

4
00:00:11,924 --> 00:00:15,843
empezando con la función constructora y tomando las mismas propiedades y luego "draw" (dibujar)

5
00:00:15,843 --> 00:00:19,908
y luego "talk" (hablar), y luego también añadí otro método

6
00:00:19,908 --> 00:00:25,388
llamado "Horray" porque a los "Hoppers" realmente le gusta celebrar y a los "Winstons" en realidad no.

7
00:00:25,388 --> 00:00:27,924
Ahora, al final de la función he creado

8
00:00:27,924 --> 00:00:31,174
dos nuevos objetos "Hooper": "Little Hopper" y "Big Hooper",

9
00:00:31,174 --> 00:00:36,507
los dibujo y en uno llamo la función "talk" y en el otro "Horray".

10
00:00:36,507 --> 00:00:37,508
Eso está muy bien.

11
00:00:37,508 --> 00:00:39,928
Ahora, si miramos este código que está aquí arriba

12
00:00:39,928 --> 00:00:42,313
te darás cuenta de algo interesante.

13
00:00:42,313 --> 00:00:49,324
Y es que el código para "Hooper" es muy similar al código para "Winston". Particularmente el constructor.

14
00:00:49,324 --> 00:00:54,994
No se si recuerdes pero básicamente es el mismo código que nuestra función constructora de"Winston".

15
00:00:54,994 --> 00:01:00,748
Y luego en esta función "talk" el código es exactamente el mismo que en la función "talk" de "Winston",

16
00:01:00,763 --> 00:01:03,897
y ambos tienen funciones "draw",

17
00:01:03,897 --> 00:01:07,272
así que tienen muchas cosas en común en estos dos tipos de objetos,

18
00:01:07,272 --> 00:01:11,341
y eso tiene sentido porque ya sabes "Hooper" y "Winston" son dos tipos de objetos muy similares

19
00:01:11,341 --> 00:01:15,299
en nuestro mundo. Si piensas en eso, ya sabes, en el mundo real

20
00:01:15,299 --> 00:01:20,009
fuera de la computadora, muchos tipos de objetos tienen semejanzas

21
00:01:20,009 --> 00:01:21,293
con otros tipos de objetos.

22
00:01:21,293 --> 00:01:25,483
Como en el reino animal. Todos los animales son similares de alguna forma.

23
00:01:25,483 --> 00:01:29,422
Y luego tenemos diferentes tipos de animales como los humanos.

24
00:01:29,422 --> 00:01:31,588
Y los humanos comparten esas similitudes

25
00:01:31,588 --> 00:01:34,331
pero también tiene sus propias similitudes únicas.

26
00:01:34,331 --> 00:01:35,800
Así que podríamos decir que

27
00:01:35,800 --> 00:01:41,917
un animal es un tipo de objeto del que el tipo de objeto humano hereda funcionalidad.

28
00:01:41,917 --> 00:01:46,864
No iniciamos completamente de cero sino que agregamos a la funcionalidad que ya tenemos de ser un animal.

29
00:01:46,864 --> 00:01:49,196
Como que todos los animales hacen ruidos,

30
00:01:49,196 --> 00:01:51,407
pero los humanos también tienen lenguaje.

31
00:01:51,407 --> 00:01:54,123
Así que este concepto de herencia de objetos

32
00:01:54,123 --> 00:01:56,385
en realidad también es muy útil en programación.

33
00:01:56,385 --> 00:01:59,865
Y podemos crear una cadena de herencia de objetos en nuestro Javascript.

34
00:01:59,865 --> 00:02:02,529
Así que para hacer esto cuando piensas

35
00:02:02,529 --> 00:02:04,425
qué es lo que comparten nuestros tipos de objetos,

36
00:02:04,425 --> 00:02:06,633
y tienes un nombre para ello,

37
00:02:06,633 --> 00:02:08,675
porque vamos a crear un tipo de objeto

38
00:02:08,675 --> 00:02:10,576
que representa el objeto base

39
00:02:10,576 --> 00:02:13,724
así que vamos a llamarle "Creatures" (criaturas). Ambos son criaturas.

40
00:02:13,724 --> 00:02:17,973
Así que decimos "var Creature = ". Y ahora necesitamos nuestra función constructora.

41
00:02:17,973 --> 00:02:22,811
Así que solamente vamos y copiemos la de "Hopper" para que tenga lo mismo que "Winston" tiene.

42
00:02:22,811 --> 00:02:23,772
Muy bien.

43
00:02:23,772 --> 00:02:26,632
Y luego, vamos a ver.

44
00:02:26,632 --> 00:02:27,792
Ahora queremos,

45
00:02:27,792 --> 00:02:29,425
¿Qué es lo que queremos ahora?

46
00:02:29,425 --> 00:02:32,846
Tal vez queremos añadirle la función "talk".

47
00:02:32,846 --> 00:02:39,726
Así que para la función "talk", sólo la copiamos de "Hooper". Pero por supuesto necesitamos que diga "Creature.prototype" en lugar de esto.

48
00:02:39,726 --> 00:02:41,253
Ok, genial.

49
00:02:41,253 --> 00:02:45,623
Así que ahora tenemos este tipo de objeto "Creature".

50
00:02:45,623 --> 00:02:48,870
Pero en realidad necesitamos decirle a "Hooper" que

51
00:02:48,870 --> 00:02:52,600
"Hooper" debe basar su funcionalidad en "Creature".

52
00:02:52,600 --> 00:02:55,331
Así que podemos hacer eso escribiendo esta línea aquí.

53
00:02:55,331 --> 00:03:02,589
Decimos "Hopper.prototype = Object.create"

54
00:03:02,589 --> 00:03:04,827
"(Creature.prototype);"

55
00:03:04,827 --> 00:03:09,857
Entonces, lo que hace esta línea es decirle a Javascript que base el prototipo de "Hopper", es decir,

56
00:03:09,857 --> 00:03:15,027
toda la funcionalidad de "Hopper" en el prototipo de "Creature".

57
00:03:15,027 --> 00:03:22,307
Y entonces esto significa que cada vez que busque una función en "Hooper" buscará primero en el prototipo de "Hooper"

58
00:03:22,307 --> 00:03:26,782
pero si no lo encuentra lo buscará en el prototipo de "Creature".

59
00:03:26,782 --> 00:03:29,849
Y esto es a lo que llamamos cadena de prototipos.

60
00:03:29,849 --> 00:03:33,926
Ahora una vez que hemos hecho esto deberíamos poder borrar la función "talk".

61
00:03:33,926 --> 00:03:35,332
En "Hooper".

62
00:03:35,332 --> 00:03:37,374
Porque ya existe en "Creature".

63
00:03:37,374 --> 00:03:39,572
Que está más arriba en la cadena de prototipos.

64
00:03:39,572 --> 00:03:41,621
¿Listo? ¡Tan tan tan!

65
00:03:41,621 --> 00:03:42,861
¡Funcionó!

66
00:03:42,861 --> 00:03:48,954
Y funcionó porque encuentra la función en el prototipo de "Creature".

67
00:03:48,954 --> 00:03:53,674
Mmm. Así que tratemos de borrarla de "Winston" también.

68
00:03:53,674 --> 00:03:57,864
Ok. No funcionó, nos dice que el objeto no tiene método "talk".

69
00:03:57,864 --> 00:04:00,890
¿Y por qué es eso? Bueno, tenemos nuestro constructor de "Winston",

70
00:04:00,890 --> 00:04:02,853
y "draw" y borramos la función "talk".

71
00:04:02,853 --> 00:04:07,117
Bueno, notarás que en realidad olvidamos decirle que el prototipo de "Winston" debe estar basado

72
00:04:07,117 --> 00:04:08,474
en el prototipo de "Creature".

73
00:04:08,474 --> 00:04:10,229
Así que necesitamos esa línea tan importante.

74
00:04:10,229 --> 00:04:13,571
"Winston.prototype = Object.create"

75
00:04:13,571 --> 00:04:18,043
"(Creature.prototype);"

76
00:04:18,043 --> 00:04:18,974
¡Tan tan!

77
00:04:18,974 --> 00:04:20,530
Y fíjense en algo importante.

78
00:04:20,530 --> 00:04:25,396
Tengo esta línea después de la función constructora pero antes de añadir cualquier cosa

79
00:04:25,396 --> 00:04:27,147
al prototipo de "Winston".

80
00:04:27,147 --> 00:04:28,638
Eso es lo que generalmente quieres hacer.

81
00:04:28,638 --> 00:04:30,764
Quieres decírselo inmediatamente cuando empiezas

82
00:04:30,764 --> 00:04:34,270
en esto se basa tu prototipo inicial.

83
00:04:34,270 --> 00:04:37,300
Pero luego seguimos añadiendo más cosas al prototipo.

84
00:04:37,300 --> 00:04:41,824
Porque habrá alguna cosa que es única a los "Winstons" o única a los "Hoopers"

85
00:04:41,824 --> 00:04:42,953
que no tiene los "Creatures".

86
00:04:42,953 --> 00:04:46,319
Y es genial que puedas definir esas cosas.

87
00:04:46,319 --> 00:04:49,845
Muy bien. Ahora, si miramos esto, todavía tenemos código repetido.

88
00:04:49,845 --> 00:04:51,296
El código constructor.

89
00:04:51,296 --> 00:04:54,184
¿Cierto? Tenemos todo esto tres veces.

90
00:04:54,184 --> 00:04:58,056
¿Podríamos simplemente borrarlo?

91
00:04:58,056 --> 00:05:01,048
Tratemos.

92
00:05:01,048 --> 00:05:03,670
Ok, mmm. No parece haber funcionado.

93
00:05:03,670 --> 00:05:07,959
Porque nuestro "Hooper" aparece en la esquina superior izquierda, parece que olvidó todo sobre él.

94
00:05:07,959 --> 00:05:16,230
Y esto es porque Javascript no asume que quieres el mismo constructor incluso si quieres basar el prototipo en él.

95
00:05:16,230 --> 00:05:19,304
Ya sabes, te permite definir tu propio constructor para esos objetos.

96
00:05:19,304 --> 00:05:26,019
Pero también te da una forma fácil de llamar al constructor de un objeto.

97
00:05:26,019 --> 00:05:27,648
Así que la forma en que haremos esto es

98
00:05:27,648 --> 00:05:36,656
escribiendo "Creature.call(this, nickname, age, x, y);"

99
00:05:36,656 --> 00:05:40,780
Ahora, lo que esto hace (Nota que funcionó. Sí), lo que hizo es

100
00:05:40,780 --> 00:05:44,268
que en realidad está llamando a la función "Creature", la función constructora.

101
00:05:44,268 --> 00:05:50,329
Está llamando esa función pero está pasando y está diciendo: "ok, debes llamar la función constructora como

102
00:05:50,329 --> 00:05:54,349
si la estuviera llamando este objeto 'Hooper'

103
00:05:54,349 --> 00:05:57,004
y como si la estuviera llamando con estos argumentos".

104
00:05:57,004 --> 00:05:59,498
Estos son argumentos con los que se llamó "Hooper".

105
00:05:59,498 --> 00:06:03,797
Y terminará ejecutando este código como si estuviera justo aquí.

106
00:06:03,797 --> 00:06:06,489
Y es exactamente lo que queremos. Y funcionó.

107
00:06:06,489 --> 00:06:07,827
Y podemos continuar y

108
00:06:07,827 --> 00:06:11,679
copiar esta línea en la función constructora

109
00:06:11,679 --> 00:06:15,165
de "Winston" también.

110
00:06:15,165 --> 00:06:17,087
Y funcionó. ¡Sí!

111
00:06:17,087 --> 00:06:22,177
Muy bien. Revisemos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades

112
00:06:22,177 --> 00:06:24,671
en este tipo de objeto base, "Creature".

113
00:06:24,671 --> 00:06:28,411
Y hemos hecho dos tipos de objeto que provienen de este tipo de objeto base.

114
00:06:28,411 --> 00:06:31,397
Ellos heredan la funcionalidad pero añaden la suya propia también.

115
00:06:31,397 --> 00:06:36,261
Y lo interesante de esto es que podemos cambiar la funcionalidad compartida en un sólo lugar.

116
00:06:36,261 --> 00:06:41,369
Como si quisiéramos cambiar la edad de nuevo, podríamos decir más "years old" (años de edad).

117
00:06:41,369 --> 00:06:44,112
Ahora todos tienen "years old" al final.

118
00:06:44,112 --> 00:06:53,178
O podríamos cambiar la función "talk" y poner "SUPPP!?!?!?!?". Y ahora los "Winstons" y los "Hoopers" dirán "SUP".

119
00:06:53,178 --> 00:06:56,781
Entonces, ahora has visto como crear tipos de objetos y heredar de los tipos de objetos,

120
00:06:56,781 --> 00:07:01,464
puedes empezar a pensar cómo sería útil esto en tus dibujos, animaciones, simulaciones y juegos.

121
00:07:01,464 --> 00:07:05,048
Por ejemplo, tal vez tienes un juego y tienes muchos tipos de personajes en él,

122
00:07:05,048 --> 00:07:07,447
y todos ellos pueden correr pero sólo algunos de ellos pueden saltar.

123
00:07:07,447 --> 00:07:12,073
Ese es un lugar perfecto para usar algunos tipos de objetos y algo de herencia.

124
00:07:12,073 --> 00:07:15,630
Pero apuesto a que puedes pensar en muchas más formas de hacerlo.