WEBVTT 00:00:00.780 --> 00:00:06.234 En nuestra guía paso a paso anterior, aprendimos como hacer un tipo de objeto para representar nuestros dos objetos estilo "Winston", 00:00:06.234 --> 00:00:09.234 y luego inicializarlos con los constructores. 00:00:09.234 --> 00:00:13.472 Ahora, nuestro objeto no sólo puede estar asociado con propiedades, 00:00:13.472 --> 00:00:18.806 también puede estar asociado con funcionalidades. Piensa en el mundo y todos los tipos de objetos que hay en él, 00:00:18.806 --> 00:00:26.287 como los humanos. Todos tenemos estatura y edad, pero también tenemos cosas que podemos hacer, como dormir, comer y programar. 00:00:26.287 --> 00:00:30.939 Y queremos poder asociar esas funciones con esos tipos de objetos. 00:00:30.939 --> 00:00:35.949 En este programa, que está como lo dejamos la última vez, tenemos una función, 00:00:35.949 --> 00:00:43.066 "drawWinston", que llamamos con los dos objetos "Winston". ¿No estaría bien que ligaramos esa función 00:00:43.066 --> 00:00:48.569 al tipo de objeto "Winston"?, Bueno, podemos hacerlo y es fácil. 00:00:48.569 --> 00:00:55.725 Así que debajo de nuestro constructor, vamos a escribir "Winston", con "W" mayúscula, punto "prototype". 00:00:55.725 --> 00:00:59.232 "Prototype" (prototipo), es una palabra nueva que probablemente no habías visto antes. 00:00:59.232 --> 00:01:05.881 Y "prototype" es la propiedad de un objeto a la que podemos ligar funciones, 00:01:05.881 --> 00:01:13.309 y eso significa que cada objeto que sea una instancia de este objeto tendrá esas funciones. 00:01:13.309 --> 00:01:19.612 Así que podemos escribir: punto "prototype" y luego punto, y el nombre de la función, en este caso "draw", 00:01:19.612 --> 00:01:25.606 igual a... y podemos tomar el código de la función "drawWinston" y ponerlo aquí, 00:01:25.606 --> 00:01:32.951 moverlo aquí dentro. Muy bien, lo que hicimos fue ligar la función "draw" 00:01:32.951 --> 00:01:40.008 con nuestro prototipo "Winston". Y eso significa que podremos llamar la función "draw()" desde cualquier objeto tipo "Winston". 00:01:40.008 --> 00:01:45.411 Muy bien, entonces podemos llamar la función "draw()" en "winstonTeen" o en "winstonAdult". 00:01:45.411 --> 00:01:49.569 Y cuando tenemos una función como ésta, la podemos llamar en el objeto, 00:01:49.569 --> 00:01:54.833 y en realidad a esto lo llamamos "método", así que ahora me oirás decir "método". 00:01:54.833 --> 00:01:58.272 Entonces digamos que esto es "el método dibujar" ("the draw method"). Ok. 00:01:58.272 --> 00:02:04.103 Así que ahora borramos esto, y vamos a ver si podemos llamar a "draw()". 00:02:04.103 --> 00:02:07.069 "winstonTeen.draw()" 00:02:07.069 --> 00:02:13.697 Ok. Tenemos un error, tenemos este error aquí afuera que dice: "winstObject is not defined". 00:02:13.697 --> 00:02:20.530 Ok. Entonces, antes estábamos pasando este argumento a la función "drawWinston", que era el objeto "Winston", 00:02:20.530 --> 00:02:26.462 pero ahora ya no lo estamos pasando. Podríamos cambiar esto y pasarlo, 00:02:26.462 --> 00:02:30.819 y luego, déjenme ver, ¿qué deberíamos pasar aquí? Tenemos que pasar "winstonTeen". Ok. 00:02:30.819 --> 00:02:38.441 Esto funciona, pero es muy tonto hacer esto. Estoy llamando la función "draw" sobre el mismo objeto. 00:02:38.441 --> 00:02:43.965 No debería pasar el objeto. Esto es redundante. 00:02:43.965 --> 00:02:48.465 Y es cierto, no debemos hacer eso, vamos a borrar esto y pensemos un poco. 00:02:48.465 --> 00:02:54.404 Si estamos dentro del objeto, ¿qué podríamos usar para acceder a las propiedades del objeto? 00:02:54.404 --> 00:03:00.374 Bueno, deberíamos fijarnos en nuestro constructor y recordar la palabra clave "this" y pensar: "Ah, 00:03:00.374 --> 00:03:08.573 debemos cambiar esto por 'this'". Así que cambiamos "winstObject" por "this". 00:03:08.573 --> 00:03:12.951 Porque ahora estamos dentro del objeto. Esta función está siendo evaluada 00:03:12.951 --> 00:03:16.861 en el objeto, así que "this" se refiere al objeto actual. 00:03:16.861 --> 00:03:23.271 Y de esta manera podemos usar simplemente "this" y estaremos teniendo acceso a todas las propiedades del objeto actual. 00:03:23.271 --> 00:03:26.720 Y eso funciona totalmente, ¿Lo ven? ¿No es genial? 00:03:26.720 --> 00:03:31.907 Entonces ahora podemos escribir "winstonAdult.draw()". 00:03:31.907 --> 00:03:38.271 ¡Tan tan! Y tendrá acceso a las propiedades de "winstonAdult" porque es el objeto en el que se llama. 00:03:38.271 --> 00:03:45.752 Esto es lo bueno de esta palabra clave "this", aunque a veces puede ser un poco confuso usarla. 00:03:45.752 --> 00:03:52.028 Muy bien, esto ha sido muy divertido, así que añadamos otro método. Ok. ¿Qué más podría hacer "Winston"? 00:03:52.028 --> 00:04:01.078 Tal vez hablar. Así que haremos un "Winston.prototype.talk". Podemos ligar tantos métodos como queramos al prototipo. 00:04:01.078 --> 00:04:05.241 Así que vamos a decir: "I´m Winston" ("Soy Winston"). 00:04:05.241 --> 00:04:13.181 Y luego lo escribimos en "this.x+20" y "this.y+150". 00:04:13.181 --> 00:04:19.734 Entonces vemos que no pasa nada, pero es porque todavía no he llamado esa función. 00:04:19.734 --> 00:04:25.068 Así que hagamos hablar al adolescente, "winstonTeen.talk()", ok, 00:04:25.068 --> 00:04:30.479 "I´m Winston" ¡Tan tan! Y luego "winstonAdult.talk()". 00:04:30.479 --> 00:04:36.828 ¡Tan tan! Muy bien, ahora tenemos este tipo de objeto "Winston" que tiene propiedades: "nickname", 00:04:36.828 --> 00:04:45.026 "age"," x", "y"; y tiene funcionalidad: comportamiento, métodos, que actúan de forma diferente dependiendo de las propiedades. 00:04:45.026 --> 00:04:51.123 Y podemos crear tantas instancias de "Winston" como queramos, y llamar cualquiera de estos método en ellos. 00:04:51.123 --> 00:04:53.173 Bastante bien ¿o no?