Programación orientada a objetos en JavaScript

Clase 51 de 99 • 30 días de JavaScript

La programación orientada a objetos (POO) es un paradigma de programación que se enfoca en el uso de objetos para representar conceptos del mundo real y manipular datos. JavaScript es un lenguaje orientado a objetos basado en prototipos, lo que significa que los objetos en JavaScript tienen una relación de prototipo entre ellos, en lugar de tener una relación de clase como en lenguajes como Java o C#.

Una de las principales diferencias entre JavaScript y otros lenguajes orientados a objetos es el uso de clases en lugar de prototipos. Aunque JavaScript no tiene una sintaxis específica para definir clases, a partir de ECMAScript 6 se pueden utilizar las palabras clave "class" y "extends" para simular una estructura de clase. Sin embargo, debajo de esta sintaxis se sigue utilizando prototipos para la herencia. Por ejemplo:

class Animal {
    constructor(especie) {
        this.especie = especie;
    }
    respirar() {
        console.log("Respirando...");
    }
}

class Perro extends Animal {
    ladrar() {
        console.log("Guau!");
    }
}

const perro = new Perro("Canino");
console.log(perro.especie); // Output: "Canino"
perro.respirar(); // Output: "Respirando..."
perro.ladrar(); // Output: "Guau!"

Como habrás visto, en este pequeño ejemplo hay muchas keywords nuevas como: new, this, extends, constructor. Posiblemente sea tu primer acercamiento a estos conceptos, por lo que es momento de entender cada uno de estos.

Empecemos por this , this se refiere al objeto actual en el cual se está ejecutando un método o accediendo a una propiedad. En una función constructora, thisse refiere al nuevo objeto que se está creando. Por ejemplo:

function Animal(especie) {
  // Función constructora
  this.especie = especie;
}

Animal.prototype.respirar = function() {
  // En este scope no existe "especie"
	// Pero con "this" estamos accediendo directamente a "Animal"
	// Por lo que esto vendría siendo "Animal.especie"
  console.log(`La especie ${this.especie} está respirando...`);
}

const perro = new Animal("Canino");
perro.respirar(); // Output: "La especie Canino está respirando..."

Este ejemplo es muy parecido al anterior, básicamente es lo que hace JavaScript para convertir las clases en prototipos, si bien ahora existen las clases como lo viste al principio de esta lectura, debes de comprender como funciona el lenguaje por debajo sin toda esa sugar syntax.

Con clases, esto se vería mejor 👇

// TODAS las clases empizan por mayúscula por convención
class Animal{
	constructor(especie){
		// Con clases la función constructora es más explicita, aquí se asignan
    // los valores recibidos
		// Parecido a las funciones, se recibe como parametro cualquier valor necesario
		// y lo pasamos al scope de la clase con "this.valor = valor"
		this.especie = especie
	}

	respirar(){
		// Directamente podemos crear los métodos dentro de las clases
		// básicamente una función cualquier pero sin la keyword "function"
		console.log(`La especie ${this.especie} está respirando...`)
	}	
}

const perro = new Animal("Canino");
perro.respirar(); // Output: "La especie Canino está respirando..."

Pero ambas practicas, vienen siendo igual a lo que modifica el prototype.

Ahora, cuando estamos declarando la variable perro usamos la keyword new que se usa para crear una nueva instancia de una función constructora. Cuando se usa new con una función constructora, se crea un nuevo objeto, se establece su prototipo y se ejecuta el código dentro de la función constructora con this apuntando al nuevo objeto. Por ejemplo:

// Aquí estamos creando una copia de la clase Animal o mejor dicho creando una instancia
// Por lo que perro, es una instancia de Animal que tiene como especie el valor de "Canino"
const perro = new Animal("Canino"); 
// De esta manera podemos acceder a todos los métodos creados en la clase
perro.respirar(); // Output: "La especie Canino está respirando..."

Solo falta conocer un concepto nuevo, extends

class Perro extends Animal {
		// Aquí no es necesario el agregar el constructor si no se esperan
		// nuevos parametros
    ladrar() {
        console.log("Guau!");
    }
}

Esto se le conoce como una subclase, que se refiere a una clase que hereda de otra clase.

La keyword extends nos ayuda a copiar todo de la clase que extiende a la nueva clase y así evitar ser redundante y tener una buena jerarquía. Por lo que anterior viene siendo igual a lo siguiente

class Perro {
		constructor(especie) {
        this.especie = especie;
    }
    respirar() {
        console.log("Respirando...");
    }
    ladrar() {
        console.log("Guau!");
    }
}

Y la forma que es interpretada por JavaScript es de la siguiente manera

const animal = {
  respirar: function() {
    console.log("Respirando...");
  }
};

const perro = Object.create(animal);

perro.ladrar = function() {
  console.log("Guau!");
}

perro.respirar(); // Output: "Respirando..."
perro.ladrar(); // Output: "Guau!"

Object.create() que se usa para crear un nuevo objeto con un prototipo específico. Este método recibe un objeto como primer parámetro y devuelve un nuevo objeto con ese objeto como su prototipo.

Te invito a que ejecutes este código en la consola de tu navegador y veas hasta a que lugar te lleva el prototype de los objetos 😉

Todo esto y más lo puedes aprender en el Curso Básico de Programación Orientada a Objetos con JavaScript

Luis Castro

student•

Programación Orientada a Objetos (POO):

. La programación orientada a objetos (POO) es un paradigma de programación que se basa en la creación de objetos que encapsulan datos y funcionalidades relacionadas. En JavaScript, se puede implementar la POO utilizando prototipos y clases. . Los prototipos son objetos que contienen propiedades y métodos que se comparten entre varios objetos. En cambio, las clases son una forma más moderna de implementar la POO en JavaScript. . En JavaScript, los objetos se crean utilizando la sintaxis de llaves {}. Por ejemplo, para crear un objeto que represente un coche, se podría escribir:

let car = {
  make: "Toyota",
  model: "Corolla",
  year: 2021,
  startEngine: function() {
    console.log("Engine started");
  }
};

Este objeto tiene tres propiedades (make, model y year) y un método (startEngine). Para acceder a una propiedad de un objeto, se puede utilizar la notación de punto o la notación de corchetes. Por ejemplo:

console.log(car.make); // Toyota
console.log(car["model"]); // Corolla

Para crear un objeto que sea una instancia de una clase, se utiliza la palabra clave new. Por ejemplo:

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
  
  startEngine() {
    console.log("Engine started");
  }
}

let car = new Car("Toyota", "Corolla", 2021);
console.log(car.make); // Toyota
console.log(car.model); // Corolla
car.startEngine(); // Engine started

La programación orientada a objetos en JavaScript es una herramienta poderosa que permite crear código más modular, mantenible y escalable. Con la POO, se pueden encapsular datos y funcionalidades en objetos que se pueden reutilizar en diferentes partes del código.

Reinaldo Mendoza

student•

Prefiero las clases, los prototipos se ven como algo muy forzado para usar POO

class Animal {
    constructor(especie) {
        this.especie = especie;
    }
    respirar() {
        console.log("Respirando...");
    }
}

class Perro extends Animal {
    ladrar() {
        console.log("Guau!");
    }
}

const perro = new Perro("Canino");
console.log(perro.especie); // Output: "Canino"
perro.respirar(); // Output: "Respirando..."
perro.ladrar(); // Output: "Guau!"

function Animal(especie) {
  // Función constructora
  this.especie = especie;
}

Animal.prototype.respirar = function() {
  // En este scope no existe "especie"
	// Pero con "this" estamos accediendo directamente a "Animal"
	// Por lo que esto vendría siendo "Animal.especie"
  console.log(`La especie ${this.especie} está respirando...`);
}

const perro = new Animal("Canino");
perro.respirar(); // Output: "La especie Canino está respirando..."

// TODAS las clases empizan por mayúscula por convención
class Animal{
	constructor(especie){
		// Con clases la función constructora es más explicita, aquí se asignan
    // los valores recibidos
		// Parecido a las funciones, se recibe como parametro cualquier valor necesario
		// y lo pasamos al scope de la clase con "this.valor = valor"
		this.especie = especie
	}

	respirar(){
		// Directamente podemos crear los métodos dentro de las clases
		// básicamente una función cualquier pero sin la keyword "function"
		console.log(`La especie ${this.especie} está respirando...`)
	}	
}

const perro = new Animal("Canino");
perro.respirar(); // Output: "La especie Canino está respirando..."

// Aquí estamos creando una copia de la clase Animal o mejor dicho creando una instancia
// Por lo que perro, es una instancia de Animal que tiene como especie el valor de "Canino"
const perro = new Animal("Canino"); 
// De esta manera podemos acceder a todos los métodos creados en la clase
perro.respirar(); // Output: "La especie Canino está respirando..."

const animal = {
  respirar: function() {
    console.log("Respirando...");
  }
};

const perro = Object.create(animal);

perro.ladrar = function() {
  console.log("Guau!");
}

perro.respirar(); // Output: "Respirando..."
perro.ladrar(); // Output: "Guau!"

Programación orientada a objetos en JavaScript

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios