Programación orientada a objetos con JavaScript

Las funciones son la base de la programación orientada a objetos en JavaScript, por lo que es importante que partamos de un conocimiento firme de las mismas.

Las funciones anónimas no contienen nombre (por eso son anónimas) y las podemos asignar a variables, objetos, etcétera.

Las funciones no son otra cosa que datos asignados a una variable, por lo que pueden ser copiados, borrados y llamados como parámetros.

Otra característica de las funciones en JavaScript, es que las podemos "autoinvocar" por medio de los paréntesis, y podemos pasar valores a esta función autoinvocada con otros paréntesis al final.

Otra característica de las funciones en JavaScript es que podemos regresar y ejecutar una función en la sentencia return.

Aprovechando que podemos enviar una función de regreso en otra función, esto nos permitirá redefinir esta función en tiempo de ejecución del script.

Ambas funciones sirven para llamar a otra función.En ambas, el primer parámetro debe ser el objeto propietario.

En el método call, los parámetros se pasan separados por comas.En el método apply, los parámetros se pasan como un arreglo.

Apuntes a la sección de Funciones en JavaScript

En JavaScript “casi” todo es un objeto.

Los valores primitivos son: cadenas, números y booleanos.

Todos lo demás son objetos: arreglos, funciones, expresiones regulares y objetos.

Los objetos son variables que contienen variables, incluso arreglos, funciones y otros objetos.

Dentro de un objeto podemos añadir cualquier variables simple, como cadena, número o boleado, pero también podemos añadir otra objetos, arreglos y funciones.

JavaScript es un lenguaje dinámico, por lo cual podemos añadir, modificar y eliminar propiedades y métodos en tiempo de ejecución.

Por medio de una función podemos hacer un "molde" donde almacenamos las propiedades y métodos para poder replicarlos en instancias. Esa es la base de las clases en JavaScript.

Apuntes a la sección 3: Objetos en JavaScript

Las funciones son objetos que tienen propiedades (arguments, prototype y constructor) y métodos (call() y apply()).

prototype es una propiedad que tiene toda función y es de tipo objeto. En un inicio es un objeto vacío.

Por medio de la propiedad prototype podemos añadir métodos y propiedades a la función de clase o constructor.

El prototipo solo se utiliza cuando utilizas a la función como función constructora.

Cuando creas una función como constructora por medio de “new”, puedes hacer referencia al mismo por medio de “this” (la cual no es una variable).

A las propiedades añadidas con “this” se les conoce como “own properties”.A las propiedades añadidas con “prototype” se les conoce como “prototype properties”.

Como el prototipo es un objeto, cualquier modificación la pueden visualizar todas las instancias, incluso si fueron creadas antes de la modificación al prototipo.

Todo lo que se encuentre en el prototipo se pasa “por referencia”, por lo tanto, no se duplica en cada instancia.En cambio en las “own properties” si se duplican en cada instancia.

JS primero busca en la función la propiedad, y si no existe la busca en el objeto prototype.

Si hay una propiedad de la función y una propiedad en el objeto prototype, la propiedad de la función tiene precedencia.

Por medio de un ciclo for...in podemos enlistar todas las propiedades de un objeto.Por medio de l función hasOwnProperty() sabemos si son propiedades del objeto (true) o del objeto prototype (false).

Por medio de un ciclo for...in podemos enlistar todas las propiedades de un objeto.Por medio de l función hasOwnProperty() sabemos si son propiedades del objeto (true) o del objeto prototype (false).

Un objeto puede acceder a propiedades y métodos de las clases que se encuentran “arriba” dentro de la la cadena de herencias.

Podemos almacenar en prototype propiedades comunes, siempre y cuando no cambien en las diferentes instancias (constantes).

En este video veremos un ejemplo clásico de creación de objetos y de su herencia, así como algunas de sus ventajas.

Podemos “mover” las propiedades a “prototype” para que sea común a todas las instancias.Pero se puede sobreescribir la propiedad desde la instancia.

Los elementos que se comparten se almacenan en el prototipo. Por esta razón, muchas veces sólo se hereda el prototype, que es donde se debe almacenar los elementos reutilizables. Lo cual es más eficiente, pero las modificaciones son más complicadas, ya que modifican a todas las instancias de toda la cadena de herencia.

Una forma de solucionar el problema anterior es crear un constructor temporal.Con el constructor temporal se rompe la cadena de prototipos, pero se heredan los elementos entre las clases.

Herencia por medio del constructor

Herencia por medio de objetos

Usar prototipos

Copiar prototipos

Ambos

Prototype chaining (pseudo-classical)

Inherit only the prototype

Temporary constructor

Copying the prototype properties

Copy all properties (shallow copy)

Deep copy

Prototypal inheritance

Se deben de evitar tener variables globales sin relación. Para ello podemos crear un objeto y almacenar ahí las propiedades y métodos globales.

A ese objeto lo llamaremos NAMESPACE y por convención se escribe en mayúsculas.Podemos hacer propiedades para agrupar eventos, texto, elementos (DOM), etc.

En este video iniciaremos con las etiquetas de HTML y los estilos en cascada necesarios para nuestra aplicación de dibujo.

En este video haremos la estructura del objeto para el NAMESPACE.

En este video escribiremos el código para detectar el canvas y su contexto en la rutina de inicio()

En este video detectaremos las coordenadas que pulse el usuario en el canvas y las ajustaremos en la función correspondiente.

En este video escribiremos la rutina de dibujo y el método onmouseup

En este primer video daremos un vistazo a la aplicación que realizaremos en los siguientes vídeos.

En este video escribiremos las etiquetas HTML necesarias para la aplicación

En este video escribiremos las funciones constructoras que almacenarán las propiedades y los métodos de la aplicación.

En este video codificaremos los métodos inicio y cargar, con lo cual podremos visualizar las imágenes en el CANVAS de HTML5.

En este video escribiremos las rutinas de filtro y crearemos nuestro primer filtro: oscurecer

En este video escribiremos el código para el filtro negativo.

Con este video concluimos la aplicación. Escribiremos la rutina para el flip horizontal.

En este video repasaremos la aplicación de figuras geométricas en canvas HTML5 bajo el paradigma de la programación orientada a objetos en JavaScript.

En este video escribiremos los objetos de la aplicación y la herencia entre ellos.

Con rutinas muy sencillas realizaremos los métodos de las formas básicas.

En este video escribiremos las propiedades de las formas geométricas, como triángulo, cardado, rectángulo y círculo.

Escribir el código para dibujar las formas geométricas básicas

Por medio de la función de JavaScript "setInterval", lanzaremos al método para repetir el dibujo de a forma geométrica, y así concluiremos la aplicación.

Dentro de ECMAScript vamos a tener definición de clases. Nos alejamos de lo que son los prototipos y ahora nos acercamos más a la programación orientada a objetos más apegada a Java o C++ y ese tipo de lenguajes.

Vamos a ver poco a poco lo que son las partes de nuestra programación orientada a objetos con lo que es el ES6 que temen le llaman ECMA 2015.

Si tomamos el ejemplo anterior vamos a poner aquí nuestro charset. Estamos viendo que estamos creando lo que es nuestra clase y estamos haciendo una instancia de Gato.

Vamos a ver poco a poco lo que son las partes de nuestra programación orientada a objetos con lo que es el ES6 que también le llaman ECMA 2015. Así que lo vamos a ver cómo hacer una clase. Si tomamos el ejemplo anterior vamos a poner aquí nuestra etiqueta charset. Estamos viendo que estamos creando lo que es nuestra clase y estamos haciendo una instancia de Gato.

Otro punto de la programación orientada a objetos que nos va a simplificar mucho la nueva especificación ES6 van a ser los setter y los objetos que se utilizan para obtener y asignar valores a los atributos de nuestros objetos respectivamente.

En JavaScript ambos métodos se corresponden con los atajos sintácticos, que son funciones finalmente que no añaden funcionalidad adicional adicional alguna simplemente pues hay que tener cuidado con las referencias circulares así que si nos vamos a nuestro editor de código, vamos a partir de un archivo nuevo y vamos a guardarlo.

Otra característica que vamos a tener en la programación orientada a objetos dentro de lo que es el ES6 va a ser los métodos estáticos, los métodos estáticos. nosotros podemos llamarlos sin necesidad de crear una instancia. En los ejercicios anteriores creamos una instancia con el neón y después utilizamos propiedades y utilizamos métodos.

En este caso nosotros podemos sin necesidad de crear una instancia llamar alguno de los métodos por ejemplo la clase Math pues no necesitamos crear un objeto de tipo ni un math para utilizarlo.

Vamos a ver ahora lo que es el proceso de la herencia en lo que es la programación orientada a objetos con el ECMA 6 y en este caso vamos a utilizar la sentencia extends, que se utiliza pues en programación orientada a objetos como PHP o en otros lenguajes. Así que si nos vamos a nuestro editor de código. Vamos a trabajar con un archivo en blanco y vamos a guardarlo como JavaScript orientado a objetos herencia punto HTML y vamos a hacer nuestras etiquetas HTML.

Vamos a ver ahora a más detalle lo que es la sentencia súper cuando utilizamos la herencia. Entonces super va a llamar tanto propiedades o métodos de la clase padre a la clase hijo.

Hemos comentado de que en español la clase debería de ser hija y madre pero tomando como es en inglés pues dicen "Son and Father" pero bueno se puede ser como se quiera llamarlo la clase superior y la clase inferior heredada. En este caso nosotros podemos llamar de desde el método constructor de la clase padre con super() y después los argumentos, que fue lo que hicimos en el ejercicio anterior pero también podemos llamar a cualquier otro tipo de método que se encuentre en la clase padre hacia la clase hijo.

Apuntes de a sección ES6: Programación orientada a objetos (PDF)

• Un programa por lo general tiene tres clases principales:

  • Splash Screen o pantalla de inicio

  • Juego o game

  • Pantalla final o de resultados

Por medio de las instrucciones DOM podemos “incrustar” las reglas de estilo en cascada en la clase.

Por medio de las instrucciones DOM podemos llamar a una imagen como su fondo.

Utilizaremos los sprites de la página: gameart2d(.)com

Por medio de los estilos en cascada y de la función setInterval() podemos realizar una sencilla animación a nuestra pantalla inicial o splashScreen.

Podemos eliminar la pantalla principal si eliminamos el elemento de carátula y detenemos la instrucción setInterval().

Una vez que eliminamos la pantalla inicial, crearemos el tablero del juego.

Por medio de una plantilla podemos desplegar los elementos de un juego.

La bomba y la secuencia de la explosión

Para permitir la movilidad del personaje es mejor manejarlo en una división independiente.

• Por medio de las coordenadas, podemos mover a nuestro personaje (x,y).

• Necesitamos un objeto para indicar la dirección y una variable booleana para validar el movimiento.

• Por medio de las coordenadas, podemos mover a nuestro personaje (x,y).

• Necesitamos un objeto para indicar la dirección y una variable booleana para validar el movimiento.

• Por medio de las coordenadas, podemos mover a nuestro personaje (x,y).

• Podemos hacer una pequeña animación al personaje.

• Por medio de las coordenadas, podemos mover a nuestro personaje (x,y).

• Podemos hacer una pequeña animación al personaje.

• Una vez que activamos la bomba, debemos verificar los arbustos alrededor.

• No validaremos los arbustos diagonales.

Cambiar al siguiente nivel

El manejo de los sonidos en una clase.

El proceso de fin de juego o game over