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 por qué es realmente útil.

Así que puse aquí un programa que estará 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.

Ahora, 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 fució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. Este es un "Winston" adolescente, y este 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 adjuntar 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".