1
00:00:01,187 --> 00:00:03,173
Volvimos con nuestro programa que crea Winstons

2
00:00:03,173 --> 00:00:07,589
pero he agregado un nuevo tipo de objeto "Hopper" porque Hopper se sentía un poco

3
00:00:07,589 --> 00:00:11,924
solo. Así ahora defino "Hopper" de la misma forma que defino "Winston", tu sabes,

4
00:00:11,924 --> 00:00:15,843
empezando con la función constructora y tomando las mismas propiedades y después "dibujar"

5
00:00:15,843 --> 00:00:20,498
y después "hablar" y después agrego otro método llamado

6
00:00:20,498 --> 00:00:23,808
"Hooray" porque a los "Hoppers" les gusta celebrar y a los "Winstons" nó.

7
00:00:23,808 --> 00:00:27,924
Ahora, abajo de la función he creado

8
00:00:27,924 --> 00:00:31,174
2 nuevos objetos "Hopper": el pequeño Hopper y el grán Hopper

9
00:00:31,174 --> 00:00:35,347
y los dibujo y llamo la función "talk" (hablar) en uno y "Hooray" en el otro.

10
00:00:35,347 --> 00:00:37,508
Eso es excelente.

11
00:00:37,508 --> 00:00:39,928
Ahora, si vemos éste codigo aquí arriba

12
00:00:39,928 --> 00:00:41,823
notarás algo interesante. Es que

13
00:00:41,973 --> 00:00:52,324
el código para l "Hopper" es muy similar al codigo para "Winston". Particularmente el constructor. No sé si recuerdas pero ésa es basicamente el mismo código del constructor de "Winston"

14
00:00:52,324 --> 00:01:00,748
Y después la función "talk" (hablar) es igual al "talk" del Winston.

15
00:01:00,763 --> 00:01:03,897
y ambos tienen función "draw" (dibujar).

16
00:01:03,897 --> 00:01:07,922
así que hay muchas cosas en común acerca de estos dos tipos de objetos

17
00:01:07,922 --> 00:01:11,341
y tiene sentido porque sabes que Hopper y Winston son 2 tipos de objeto muy similares

18
00:01:11,341 --> 00:01:15,299
en nuestro mundo. Si lo consideras, sabes, el mundo real

19
00:01:15,299 --> 00:01:20,009
fuera de la computadora muchos objetos comparten similaridades

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

21
00:01:21,423 --> 00:01:23,643
Como en el reino animal. Todos los animales

22
00:01:23,643 --> 00:01:26,812
son simliares en algunas formas. Y después tenemos diferentes tipos de animales

23
00:01:26,812 --> 00:01:31,588
como los humanos. Y los humanos comparten esas similarides

24
00:01:31,588 --> 00:01:34,331
pero tambien tienen sos propias similaridades únicas.

25
00:01:34,331 --> 00:01:35,820
Así que podríamos decir que

26
00:01:36,205 --> 00:01:38,967
un animal es un tipo de objeto del cual el tipo de objeto "humano" hereda funcionalidad.

27
00:01:38,967 --> 00:01:46,864
No empezamos de cero, sino agregamos a la funcionalidad que ya tenemos de ser un animal.

28
00:01:46,864 --> 00:01:49,196
como todos los animales que hacen ruido.

29
00:01:49,196 --> 00:01:51,407
pero los humanos tambien tienen lenguaje

30
00:01:51,407 --> 00:01:54,673
Así que este tipo de herencia de objetos

31
00:01:54,673 --> 00:01:56,695
es realmente útil en la programación también.

32
00:01:56,695 --> 00:01:59,865
y podemos crear una cadena de herencia de objetos en nuestro Javascript

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

34
00:02:02,529 --> 00:02:04,425
lo que comparten nuestros objetos.

35
00:02:04,425 --> 00:02:06,633
Y se te ocurre un nombre para ella.

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

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

38
00:02:10,576 --> 00:02:12,094
así que llamémoslo "Creature" (criatura)

39
00:02:12,094 --> 00:02:13,873
ambos son criaturas

40
00:02:13,873 --> 00:02:17,831
Así que decimos "var creature =" y ahora necesitamos nuestra función constructora.

41
00:02:17,831 --> 00:02:22,342
Vamos y simplemente copiemos la del "Hopper" que igual a la de "Winston"

42
00:02:22,342 --> 00:02:23,762
Está bien

43
00:02:23,762 --> 00:02:27,172
y despues... vamos

44
00:02:27,172 --> 00:02:28,135
ahora quiero...

45
00:02:28,135 --> 00:02:29,506
¿Qué queremos ahora?

46
00:02:29,506 --> 00:02:31,966
Talvez queremos agregar la función de arriba

47
00:02:31,966 --> 00:02:39,303
y solo copiamos la de "Hopper". Pero por supuesto que necesitamos tenerla en el prototipo de la "Creature" en vez de eso.

48
00:02:39,303 --> 00:02:41,683
OK, excelente.

49
00:02:41,683 --> 00:02:45,300
ahora tenemos el tipo de objeto "creature" (criatura).

50
00:02:45,300 --> 00:02:47,810
Pero necesitamos decirle a "Hopper" que debería

51
00:02:47,810 --> 00:02:51,141
basar su funcionalidad según "Creature".

52
00:02:51,248 --> 00:02:51,249
Podemos hacer eso escribiendo ésta línea

53
00:02:53,816 --> 00:02:58,595
y diremos "Hopper.prototype"

54
00:02:58,595 --> 00:03:01,967
es igual a "object.create"

55
00:03:01,967 --> 00:03:04,977
"creature.prototype"

56
00:03:04,977 --> 00:03:14,197
Lo que hace esta linea es decirle a Javascript que base la funcionalidad del prototipo de "Hopper" en la del prototipo de "Creature".

57
00:03:14,197 --> 00:03:22,342
y eso significa que cada vez que busque una función en "Hopper", buscara el prototipo de Hopper

58
00:03:22,342 --> 00:03:26,429
primero, pero si no lo encuentra entonces buscara en el prototipo de "Creature".

59
00:03:26,429 --> 00:03:29,196
Y eso es lo que llamamos una cadena de prototipos.

60
00:03:29,196 --> 00:03:34,032
Ahora, una vez que hemos hecho esto deberíamos de poder borrar la funcion "talk"

61
00:03:34,032 --> 00:03:35,634
en "Hopper"

62
00:03:35,634 --> 00:03:38,302
Porque ya existe en "Creature".

63
00:03:38,302 --> 00:03:40,231
He está mas arriba en la cadena del prototipo.

64
00:03:40,231 --> 00:03:42,541
Listo?

65
00:03:42,541 --> 00:03:43,924
¡Funcionó!

66
00:03:43,924 --> 00:03:46,804
Y funciona porque encuentra la función en el prototipo de "Creature".

67
00:03:46,804 --> 00:03:51,234
Intentémoslo borrándolo en "Winston" también.

68
00:03:51,234 --> 00:03:57,680
OK. No funcionó porque dice que no tiene método "talk".

69
00:03:57,680 --> 00:04:01,263
¿Porqué es eso? Bueno, tenemos nuestro constructor "Winston"

70
00:04:01,263 --> 00:04:03,517
y "draw" y eliminamos el "talk".

71
00:04:03,517 --> 00:04:07,924
Bueno, notarás que se nos olvidó decirle al prototipo de "Winston" decirle que se base

72
00:04:07,924 --> 00:04:09,409
en el prototipo de "Creature".

73
00:04:09,409 --> 00:04:10,711
Necesitamos esa línea muy importante

74
00:04:10,711 --> 00:04:13,043
"Winston.prototype=object.create"

75
00:04:13,043 --> 00:04:15,194
"creature.prototype."

76
00:04:15,194 --> 00:04:19,290
:)

77
00:04:19,290 --> 00:04:20,426
Y notamos algo importante.

78
00:04:20,426 --> 00:04:26,097
Tengo ésta línea después de la función constructora pero antes de agregar cualquier otra cosa

79
00:04:26,097 --> 00:04:28,638
al prototipo constructor.

80
00:04:28,638 --> 00:04:29,334
Eso es algo que usualmente quieres hacer.

81
00:04:29,334 --> 00:04:31,230
Debes decírselo justo

82
00:04:31,230 --> 00:04:33,860
cuando empiezas inmediatamente. esto es en lo que se basará tu prototipo inicial

83
00:04:33,860 --> 00:04:36,804
Pero después seguimos agregando mas cosas a su prototipo

84
00:04:36,804 --> 00:04:41,673
Porque podría habar algo que es único a los "Winstons" o "Hoppers"

85
00:04:41,673 --> 00:04:43,909
que no está en los "Creatures".

86
00:04:43,909 --> 00:04:45,405
Y es muy bueno que también puedes definir eso.

87
00:04:45,405 --> 00:04:50,256
Esta bien. Ahora, si miramos esto, todavía hay código repetido

88
00:04:50,256 --> 00:04:51,524
el código constructor.

89
00:04:51,524 --> 00:04:53,366
¿Verdad? Lo tenemos 3 veces.

90
00:04:53,366 --> 00:04:56,638
¿Podríamos borrarlo?

91
00:04:56,638 --> 00:04:57,840
Intentémoslo.

92
00:04:57,840 --> 00:05:03,509
OK. MMM... no parece haber funcionado.

93
00:05:03,509 --> 00:05:07,340
Porque nuestro "Hopper" salió en el rincón superior izquierdo y parece habérsele olvidado lo demás.

94
00:05:07,340 --> 00:05:15,264
Ésto es porque Javascript no asume que quieres el mismo constructor aún si quieres basar el prototipo de allí.

95
00:05:15,264 --> 00:05:19,359
Te permite definir tu propio constructor para éstos objetos.

96
00:05:19,359 --> 00:05:23,978
Pero también te da una forma fácil de llamar un constructor de un objeto.

97
00:05:23,978 --> 00:05:28,926
La forma en que haremos esto es

98
00:05:28,926 --> 00:05:35,470
escribiendo "Creature.call, this, [apodo], [edad], x, y"

99
00:05:35,470 --> 00:05:40,598
Ahora, lo que esto hace (Nota que funciono. ¡Sí!) Y lo que hizo es que

100
00:05:40,598 --> 00:05:43,679
ahora esta llamando la funcion "Creature", su función constructora

101
00:05:43,679 --> 00:05:50,339
Está llamando la función pero esta pasando y diciendo: "OK, debes llamar este constructor como si..

102
00:05:50,339 --> 00:05:53,764
...estuviera siendo llamada del objeto 'Hopper'"

103
00:05:53,764 --> 00:05:56,968
y como si está siendo llamado con éstos argumentos.

104
00:05:56,968 --> 00:05:59,427
Éstos son los argumentos con los que se llamó "Hopper"

105
00:05:59,427 --> 00:06:03,589
Y eso acabará ejecutando el código como si estuviera allí mismo.

106
00:06:03,589 --> 00:06:05,397
Que es lo que queremos. Y funcionó.

107
00:06:05,397 --> 00:06:09,709
y podemos proceder y hacer

108
00:06:09,709 --> 00:06:11,515
una copia de ésta línea en el constructor

109
00:06:11,515 --> 00:06:13,757
de "Winston" también.

110
00:06:13,757 --> 00:06:16,531
Y funciona. :D

111
00:06:16,531 --> 00:06:24,901
Esta bien. Miremos esto. Hemos encapsulado todas nuestras propiedades compartidas y funcionalidades en un solo objeto base, "Creature".

112
00:06:24,901 --> 00:06:28,207
Y hemos hecho 2 tipos de objeto que extienden el objeto base.

113
00:06:28,207 --> 00:06:30,981
Heredan la funcionalidad pero agregan la propia suya también.

114
00:06:30,981 --> 00:06:36,339
Y lo excelente es que podemos cambiar la funcionalidad compartida en un solo lugar

115
00:06:36,339 --> 00:06:40,302
Como si quisiéramos cambiar la edad de nuevo podríamos agregar el texto "years old" (años de edad).

116
00:06:40,302 --> 00:06:43,908
Ahora todos dicen "years old" al final.

117
00:06:43,908 --> 00:06:49,871
O Podríamos la función "talk" y decir "woo". Y Ahora los "Winstons" y "Hoppers" dirían "sup".

118
00:06:49,871 --> 00:06:57,174
Ahora que has visto como crear tipos de objetos y heredar de otros tipos

119
00:06:57,174 --> 00:07:01,348
puedes empezar a pensar en como esto podría ser útil en tus dibujos y animaciones y simulaciones y juegos.

120
00:07:01,348 --> 00:07:05,257
Por ejemplo, talvez tienes un juego y tienes diferentes personaejs en el.

121
00:07:05,257 --> 00:07:07,683
y todos pueden correr pero solo algunos pueden saltar

122
00:07:07,683 --> 00:07:11,970
ese el el perfecto lugar para los tipos de objetos y algo de herencia.

123
00:07:11,970 --> 00:07:15,970
Pero apuesto a que puedes pensar en más formas de hacerlo al igual.