Haz llegado al final de este artículo pero, ¿Aún recuerdas la información más importante? Puedes encontrar retos para asegurarte de retener esta información antes de continua pon a prueba tus habilidades:

Aprendizaje activo: JavaScript orientado a objetos

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestro artículo Clases en JavaScript.

Nota:

Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como CodePen, jsFiddle o Glitch para trabajar en las tareas.

Si se queda atascado, pídanos ayuda; consulte la sección Evaluación o ayuda adicional al final de esta página.

Nota:

En los ejemplos siguientes, si hay un error en su código, se mostrará en el panel de resultados de la página para ayudarle a intentar encontrar la respuesta (o en la consola JavaScript del navegador, en el caso del archivo descargable).

En esta tarea le proporcionamos el inicio de una definición para una clase Shape. Tiene tres propiedades: nombre, lados y longitud del lado. Esta clase solo modela formas cuyos lados tienen la misma longitud, como un cuadrado o un triángulo equilátero.

OOJS 1

Nos gustaría que usted:

Agregue un constructor a esta clase. El constructor toma argumentos para las propiedades name, sides, y sideLength y los inicializa.
Agregue un nuevo método calcPerimeter() a la clase, que calcula su perímetro (la longitud del borde exterior de la forma) y registra el resultado en la consola.
Cree una nueva instancia de la clase Forma llamada square. Asígnale el nombre (name) de square, 4 sides, and a sideLength de 5.
Llame a su método calcPerimeter() en la instancia para ver si registra el resultado del cálculo en la consola del navegador como se esperaba.
Cree una nueva instancia de Forma (Shape) llamada triángulo (triangle), con un nombre (name) de triángulo (triangle), 3 sides y un sideLength de 3.
Llame a Triangle.calcPerimeter() para comprobar que funciona bien.

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

Realizar Autoevaluación

Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.

OOJS 2

A continuación, nos gustaría que creara una clase Cuadrado que herede de Forma y agregue un método calcArea() que calcule el área del cuadrado. También configure el constructor para que la propiedad de nombre (name) de las instancias del objeto Square se establezca automáticamente en cuadrado (square) y la propiedad de lados (sides) se establezca automáticamente en 4. Al invocar el constructor, por lo tanto, solo debería necesitar proporcionar la propiedad sideLength.

Cree una instancia de la clase Square llamada square con los valores de propiedad apropiados y llame a sus métodos calcPerimeter() y calcArea() para demostrar que funciona bien.

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

Realizar Autoevaluación

Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.

Evaluación o ayuda adicional

Puedes practicar estos ejemplos en los editores interactivos anteriores.

Puede colocar su trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puede escribir el código usted mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.