Hasta ahora, hemos estado declarando variables, recorriendo datos y escribiendo ‘si’ y otras declaraciones condicionales. Estas operaciones comprenden el paradigma de «programación imperativa» en el que describimos «cómo» funciona un programa paso a paso (o, más específicamente, declaración por declaración).
A menudo, en la programación del mundo real, queremos poder describir objetos del mundo real. Por ejemplo, en una base de datos de empleados, debemos poder describir «empleados», y tal vez incluso tipos específicos de empleados, como programadores, gerentes, vendedores, etc. En un videojuego, debemos poder describir al héroe, los enemigos, las balas, las armas, el equipo y otros elementos. Esta necesidad dio lugar al paradigma de la programación orientada a objetos (POO), sobre todo con el lenguaje de programación C++ (aunque la propia OOP es anterior a C++) y luego se extendió a Java, Python, C#, PHP, Objective-C, Swift y muchos otros. lenguajes modernos.
JS++ proporciona acceso a la programación orientada a objetos (POO) a través de clases, que también crean tipos definidos por el usuario. JS ++ es una extensión de la especificación ECMAScript 3 de JavaScript, que no proporcionó soporte de clase. Además, las clases JS++ son únicas de los sistemas de clases y las bibliotecas que intentaron agregar programación orientada a objetos a JavaScript, un lenguaje de «tipo dinámico», donde los tipos de datos se determinan en tiempo de ejecución (como exploramos anteriormente). En su lugar, las clases de JS++ funcionan de forma natural con muchos conceptos en tiempo de compilación en los que se utilizan la tipificación y el análisis estáticos (donde los tipos de datos y los errores se analizan y verifican en el momento de la compilación): tipificación nominal, sobrecarga de métodos, polimorfismo paramétrico (programación genérica), compilación. resolución de sobrecarga de tiempo, métodos virtuales, etc. De este modo, La programación orientada a objetos en JS++ es muy similar a la OOP disponible en C++, Java y C#. Por lo tanto, los patrones de diseño y las mejores prácticas que se desarrollaron durante décadas de experiencia en los lenguajes de programación antes mencionados, desde la banca hasta la cohetería, también se aplican de inmediato a JS++.
En este capítulo, presentaremos la programación orientada a objetos básica en JS++ mediante la creación de objetos animales que representaremos en una página web. Luego agregaremos progresivamente interactividad a estos objetos animales para ilustrar los conceptos centrales de OOP. También cubriremos los cuatro fundamentos de OOP: abstracción, encapsulación, herencia y polimorfismo.
Clases y tipos definidos por el usuario
Las clases son la base básica de la programación orientada a objetos en JS++. Podemos declarar una clase usando la palabra clave ‘clase’:
class Animal
{
}
Al declarar una clase, también está creando su propio tipo de datos definido por el usuario. Para usar una analogía de desarrollo de juegos, si desea declarar una función que opera en viñetas, no desea que los datos que representan objetos de pociones se operen potencialmente. Esto se remonta a las garantías de corrección que proporciona JS++ como exploramos anteriormente.
Dado que las clases nos permiten crear nuestros propios tipos de datos definidos por el usuario, exploremos cómo se puede usar esto en la práctica. Cree una carpeta llamada ‘OOP’. Dentro de la carpeta ‘OOP’, cree un archivo llamado error.jspp e ingrese el siguiente código:
class Animal
{
}
class Chair
{
}
void startWalking(Animal a) {
}
Animal dog = new Animal();
Chair chair = new Chair();
startWalking(chair); // intentional, let's see the error
Intenta compilar. Debería ver este error de compilación:
[ ERROR ] JSPPE5024: No overload for `startWalking' matching signature `startWalking(Chair)' at line 13 char 0 at error.jspp
Queremos que nuestra función ‘startWalking’ haga que un objeto de tipo ‘Animal’ comience a caminar. No queremos pasar accidentalmente o potencialmente un objeto del tipo ‘Silla’. Cambie la llamada a la función ‘startWalking’:
// startWalking(chair); // intentional, let's see the error // to: startWalking(dog);
Aunque nuestra función ‘startWalking’ es una función vacía que no hace nada (por ejemplo, hace que un objeto ‘Animal’ camine), podemos ver los conceptos básicos de cómo se pueden usar los tipos definidos por el usuario en el código del mundo real. para prevenir errores. Si compila el error.jspp revisado para pasar el objeto ‘perro’, debería compilarse correctamente sin errores.
Ahora puede eliminar error.jspp. Ya no lo necesitaremos. Siempre es bueno mantener el código limpio y eliminar el código que ya no se usa.
instanciación
Es posible que haya notado que usamos la palabra clave ‘nuevo’ un par de veces en nuestro código anterior:
Animal dog = new Animal(); Chair chair = new Chair();
La palabra clave ‘nuevo’ se usa para un proceso llamado «instanciación». Las clases son como “planos” para los objetos. Los objetos son las «instancias» de la clase. En las dos líneas de código anteriores, ‘perro’ es la instancia de objeto del plano ‘Animal’ (clase) y ‘silla’ es una instancia del plano ‘Silla’. Dado que podemos tener múltiples «instancias» de la clase, esto nos permite crear múltiples perros con diferentes atributos, como perros con diferentes nombres, diferentes pesos, descendientes de diferentes razas, etc.
Para recapitular: la palabra clave ‘clase’ crea el modelo, y la palabra clave ‘nuevo’ crea un objeto/instancia de ese modelo.
Configuración de nuestro proyecto OOP
Ahora vamos a comenzar nuestro proyecto OOP. Crearemos clases para diferentes animales, las mostraremos en una página web, haremos que hablen con globos de diálogo y más.
Primero, necesitamos descargar algunos recursos. Dentro de la carpeta del proyecto ‘OOP’, cree cuatro subcarpetas: ‘build’, ‘libs’, ‘src’ y ‘style’.
Dirígete a Icofont.com para descargar Icofont . Icofont es una «fuente de icono». Para aquellos de ustedes que están familiarizados con la fuente «Wingdings» de Windows, esta es la misma idea. Las fuentes de íconos nos brindan gráficos e íconos, en forma de caracteres de fuente, que podemos usar en nuestras aplicaciones. Las fuentes de iconos tienen la ventaja añadida de que podemos cambiar el color del icono simplemente cambiando el color de la fuente. Esto hace que las fuentes de iconos sean ideales para la web y las interfaces de usuario.
Descargue y descomprima Icofont en su subcarpeta ‘libs’. Su estructura de directorio ahora debería verse así:
OOP
|_ build
|_ libs
|_ Icofont
|_ css
|_ fonts
|_ src
|_ style
En la subcarpeta ‘estilo’, cree un archivo ‘estilo.css’ vacío.
En su subcarpeta ‘src’, cree un archivo main.jspp vacío. Ahora, nuevamente en la subcarpeta ‘src’, cree una carpeta llamada ‘Animals’ y coloque los siguientes archivos *vacíos* dentro:
- Animal.jspp
- Cat.jspp
- Perro.jspp
- Panda.jspp
- Rhino.jspp
Finalmente, en nuestra carpeta raíz del proyecto ‘OOP’, cree un archivo ‘index.html’ con el siguiente código:
<!DOCTYPE html> <head> <title>JS++ Animals OOP Project</title> <link rel="stylesheet" type="text/css" href="lib/icofont/css/icofont.css"> <link rel="stylesheet" type="text/css" href="style/style.css"> </head> <body> <div id="content"></div> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="build/app.jspp.js"></script> </body> </html>
El HTML debería ser sencillo por ahora. Creamos un elemento ‘div’ que será el contenedor del contenido que generaremos dinámicamente a través de jQuery y JS++. Las nuevas etiquetas son para incluir nuestros archivos CSS utilizados para diseñar. También vale la pena señalar la etiqueta ‘script’ que apunta a «build/app.jspp.js», que contendrá nuestra aplicación JS++ generada. (Cuando JS++ compila varios archivos fuente de entrada, el nombre de salida predeterminado suele ser ‘app.jspp.js’).
Su estructura de directorio final debería verse así:
OOP
|_ build
|_ libs
|_ Icofont
|_ css
|_ icofont.css
|_ fonts
|_ icofont.eot
|_ icofont.svg
|_ icofont.ttf
|_ icofont.woff
|_ src
|_ Animals
|_ Animal.jspp
|_ Cat.jspp
|_ Dog.jspp
|_ Panda.jspp
|_ Rhino.jspp
|_ main.jspp
|_ style
|_ style.css
index.html