Tipos de Objetos (Versión en Video)

Ahora que entiendes los fundamentos de Javascript, quiero enseñarte una forma genial de usar Javascript.

Algo que llamamos "Programación Orientada a Objetos"

Pero primero debemos entender porqué es realmente útil.

Así que puse aquí un programa que quedará mejorado una vez que lo hagamos más orientado a objeto.

Ahora, éste es un buen programa para empezar. En la parte superior, tenemos dos variables que almacenan literales de objeto.

Los literales de objeto son un tipo de objetos que aprendimos antes y que creamos con dos llaves ({}),

y dentro de las cuales ponemos la información de los nombres y valores de las propiedades.

Así que aquí tenemos dos de esas variables literales de objeto, y aquí abajo tenemos esta función "drawWinston",

que espera recibir un argumento simple,

y después dibuja el argumento: dibuja una imagen basada en la "x" y "y" que son propiedades del objeto,

y luego un título basado en el sobrenombre y la edad que son propiedades del objeto.

Y finalmente hasta abajo, llamamos la función "drawWinston()" para el adolescente y para el adulto,

que es lo que hace que se muestren.

Muy bien. Ahora si vamos de este lado y vemos estas literales de objeto,

fíjense que se ven muy similares.

Las dos tienen el mismo conjunto de propiedades, y las dos pueden ser usadas por la misma función "drawWinston()".

De hecho, si piensas en esto, las dos están describiendo un tipo de "Winston", ¿cierto?

Y podríamos pensar que existe algo así como un tipo abstracto de "Winston" en el mundo,

y que cada "Winston" tiene el mismo conjunto de propiedades como un sobrenombre ("nickname"), edad ("age"), una "x" y una "y",

y aquí, hemos creado dos instancias de "Winston"

para describir un "Winston" particular. Éste es un "Winston" adolescente, y éste es un "Winston" adulto.

Pero los dos en realidad son muy similares, y hay muchas cosas que son similares entre ellos.

Y si lo piensas bien, así es como funciona el mundo, tenemos tipos de datos abstractos como seres humanos y gente,

y cada uno de nosotros somos instancias específicas de ellos con nuestras propias pequeñas propiedades.

Ahora, podemos usar técnicas orientadas a objetos en Javascript de tal forma que estas variables de "Winston"

sean instancias formales del objeto "Winston", de manera que ellos sepan que están compartiendo cosas en común.

Entonces, para hacer eso, en primer lugar tenemos que describir este tipo de dato abstracto llamado "Winston".

Y lo haremos con una variable.

Almacenaremos el tipo de dato en una variable. Así que "var Winston" y usaremos "W" mayúscula porque debemos iniciar nuestros objetos con mayúscula,

y lo igualaremos a una función.

Y esta función es una función especial que llamamos "función constructora",

porque vamos a llamar esta función cada vez que queramos crear una nueva instancia de "Winston".

Así que si queremos crear un "Winston" adolescente llamaremos esta función y si queremos crear un "Winston" adulto llamaremos esta función.

Esto significa que esta función debe tomar cualquier argumento que necesite saber para crear un "Winston" completo.

En este caso necesita conocer el sobrenombre ("nickname"), la edad ("age"), la "x" y la "y".

Ahora, una vez que tenemos esos argumentos, vamos a hacer algo con ellos,

tenemos que ligar esa información al objeto "Winston".

Para eso usaremos una nueva y especial palabra clave: "this". Y "this" se referirá a la instancia actual del objeto.

Así que escribimos "this.nickname", y esto significa que la propiedad "nickname" de este objeto es igual a

lo que sea que le pasemos a la función constructora, ¿ok?

Y "this.age" es igual a lo que le pasemos en "age", "this.x" es igual a la "x" que le pasemos, y "this.y"

es igual a la "y" que le pasemos.

Muy bien, ahora tenemos este tipo de dato abstracto llamado "Winston", y tiene una función constructora que podemos usar para crear un nuevo "Winston".

Así que probemos.

Vamos a crear un "winstonTeen" de nuevo, pero esta vez vamos a decir "winstonTeen" es igual,

y en lugar de poner llaves, vamos a escribir "new Winston".

Así que estamos diciendo que vamos a crear una nueva instancia de "Winston",

y vamos a pasar la información que necesita, "Winsteen", 15, 20, 50, ¿ok?

Y entonces podemos borrar este código anterior porque ya no lo necesitamos.

¿Correcto? Ahora hemos creado un nuevo "Winsteen".

Y ahora podemos decir "winstonAdult" es igual a "new Winston"

y por supuesto, su nombre es "Mr. Winst-a-lot", un nombre lindo,

tiene 30 años, y está en 229 y 50. ¿Cierto? Y entonces podemos borrar este literal de objeto.

¡Tan tan! Nuestro código sigue funcionando.

Lo que hicimos aquí fue hacer un tipo de dato abstracto que es este "Winston"

y podemos crear una nueva instancia de "Winston" que tenga esas propiedades que son únicas para ellos.

Y tenemos que recordar las propiedades que tiene.

Recordar es muy importante. Aquí tenemos "this.nickname" y "this.age",

si accidentalmente no ponemos este "this.age", fíjense que nos marca "undefined".

Y eso es porque aquí abajo, la función "drawWinston",

espera lo que el objeto le pase, espera tener algo en la propiedad edad.

Y si no escribimos "this.age",

entonces no va a tener esta propiedad, ¿ok? Se la pasamos en la función constructora

pero no hicimos nada con ella, en realidad tenemos que adjuntarla al objeto usando la palabra clave"this".

Así que lo arreglamos.

Ahora probablemente estés pensando, "ok, estás haciendo que este código funcione y estás haciendo estas cosas interesantes,

pero, en realidad sólo hemos logrado lo mismo que teníamos antes".

Bueno, aquí hay algo genial. Ahora todos nuestros "Winstons" pasan por la misma función constructora.

Y podemos cambiar las cosas, si queremos cambiar algo de "Winston"...

de todos los "Winstons", sólo cambiamos aquí dentro. Así que probablemente queramos modificar aquí y escribir "years old" ("años de edad").

Podemos poner esto aquí, y ahora todos los "Winstons" dicen "15 years old", "30 years old", ¿cierto?

Así que están tomando la parte que es única de cada uno de ellos pero también tienen cosas que comparten.

Y lo que es realmente interesante sobre la programación orientada a objetos es la idea de que

hay este tipo de objetos en el mundo, y puedes crear instancias de esos objetos

y que hay cosas que son similares entre ellos como tener las mismas propiedades,

pero hay cosas que son diferentes como el valor de las propiedades de cada uno, ¿cierto?

Pero podemos hacer el mismo tipo de cosas con ellos, como llamar las mismas funciones

y usarlos en formas similares. Así que éstas son algunas de las cosas geniales que podemos hacer con la programación orientada a objetos,

pero como te vas a dar cuenta, hay muchísimas cosas más que puedes hacer.

¡Así que sigue atento!