JAVASCRIPT · APUNTES DE CLASE

CUADERNO DE PROGRAMACIÓN

Clases y programación
orientada a objetos
JavaScript
Definiciones completas · código reconstruido · explicaciones paso a paso

CÓMO USAR ESTE CAPÍTULO

Lee primero la definición, después revisa el ejemplo y termina con la explicación de lo
que está ocurriendo. Los bloques de código son editables y se pueden copiar
directamente desde Word.

Versión corregida y actualizada a partir de las transcripciones del curso

CLASES Y POO · 1
JAVASCRIPT · APUNTES DE CLASE

Ruta del capítulo

Estas nueve lecciones siguen el mismo orden lógico de las clases originales, pero
los términos técnicos y los ejemplos fueron reconstruidos.

• Por qué aparecen las clases

• Crear clases, constructores e instancias
• Métodos de instancia
• Getters y setters
• Propiedades y métodos estáticos
• Herencia con extends y super()
• Campos y métodos privados
• Patrón Singleton
• Métodos fábrica como constructores alternativos
IMPORTANTE
No se redujeron las definiciones a frases sueltas. Se eliminaron repeticiones propias
del video y acciones como abrir archivos o recargar el navegador, pero se conservó la
explicación necesaria para comprender por qué existe cada concepto.

CLASES Y POO · 2
JAVASCRIPT · APUNTES DE CLASE

LECCIÓN 01

Por qué aparecen las clases

Del objeto literal a la función constructora

El problema que intentamos resolver

Un objeto literal permite agrupar información relacionada mediante propiedades y
métodos. Es suficiente cuando necesitamos representar uno o pocos elementos,
pero copiar el mismo objeto varias veces comienza a producir repetición y errores.
● ● ● JAVASCRIPT · EJEMPLO
const fernando = {
nombre: 'Fernando',
edad: 30
};

const melissa = {
nombre: 'Melissa',
edad: 35
};

Nada obliga a que ambos objetos tengan exactamente las mismas propiedades.
Podemos escribir nombre en uno y nombres en otro, olvidar un método o modificar
solamente una copia. Mientras más objetos tengamos, más difícil será mantenerlos
sincronizados.
IDEA CLAVE
Una clase funciona como una estructura común para crear objetos que comparten
propiedades y comportamientos. Cada objeto creado a partir de esa estructura es una
instancia.

El papel de this
Dentro de un método, this permite referirse al objeto que está ejecutando ese
método. Así evitamos escribir directamente el nombre de una variable externa.
● ● ● JAVASCRIPT · EJEMPLO
const persona = {
nombre: 'Melissa',
edad: 35,

imprimir() {
[Link](`Nombre: ${[Link]}`);
[Link](`Edad: ${[Link]}`);
}
};

[Link]();

CLASES Y POO · 3
JAVASCRIPT · APUNTES DE CLASE

EN PALABRAS SIMPLES
this significa «este objeto» dentro de este contexto. En el ejemplo, [Link] busca
la propiedad nombre del objeto que ejecutó imprimir().

Funciones constructoras antes de class

Antes de que la sintaxis class se incorporara en ES6 —también llamado ECMAScript
2015— era habitual utilizar funciones constructoras. Siguen siendo JavaScript válido
y todavía pueden aparecer en proyectos antiguos.

Por convención, el nombre de una función constructora comienza con mayúscula y

se escribe en PascalCase. No es una obligación del lenguaje, pero ayuda a recordar
que debe utilizarse con new.
● ● ● JAVASCRIPT · EJEMPLO
function Persona(nombre, edad) {
[Link] = nombre;
[Link] = edad;
}

[Link] = function () {
[Link](`Nombre: ${[Link]}`);
[Link](`Edad: ${[Link]}`);
};

const maria = new Persona('María', 18);

const melissa = new Persona('Melissa', 35);

[Link]();
[Link]();

Qué hace new

1. Crea un objeto nuevo.
2. Hace que this apunte temporalmente a ese objeto.
3. Relaciona el objeto nuevo con [Link].
4. Ejecuta la función constructora con los argumentos recibidos.
5. Devuelve el objeto creado, salvo que la función retorne explícitamente otro
objeto.
NOTA ACLARATORIA
prototype no es exactamente el «ADN» del objeto, aunque esa comparación ayuda a
imaginarlo. Es el objeto que JavaScript consulta cuando una propiedad o un método
no existe directamente en la instancia.

Forma Qué ocurre

Ejecuta una función normal. No crea automáticamente una

Persona('María', 18)
instancia.

new Persona('María', 18) Crea y devuelve una nueva instancia relacionada con

CLASES Y POO · 4
JAVASCRIPT · APUNTES DE CLASE

Forma Qué ocurre

[Link].

LECCIÓN 02

Crear clases, constructores e instancias

La sintaxis moderna introducida con ECMAScript 2015

Qué es una clase

Una clase es una plantilla para crear objetos que comparten una estructura y
determinados comportamientos. La clase describe qué información tendrá cada
instancia y qué acciones podrá realizar.
DEFINICIÓN
Una instancia es un objeto concreto creado a partir de una clase mediante el
operador new.

● ● ● JAVASCRIPT · EJEMPLO
class Persona {
constructor(nombre, codigo, frase) {
[Link] = nombre;
[Link] = codigo;
[Link] = frase;
}
}

const spiderMan = new Persona(

'Peter Parker',
'Spider-Man',
'Tu amigable vecino Spider-Man'
);

const ironMan = new Persona(

'Tony Stark',
'Iron Man',
'Yo soy Iron Man'
);

[Link](spiderMan);
[Link](ironMan);

El constructor
constructor es un método especial que se ejecuta automáticamente cuando
utilizamos new. Su trabajo habitual es recibir los datos iniciales y guardarlos en la
nueva instancia.

CLASES Y POO · 5
JAVASCRIPT · APUNTES DE CLASE

Una clase puede tener solamente un método llamado constructor. Si declaramos

dos constructores dentro de la misma clase, JavaScript produce un error de sintaxis.
QUÉ ESTÁ PASANDO
En new Persona(...), JavaScript crea el objeto, ejecuta constructor con ese objeto
como this y finalmente devuelve la instancia resultante.

Campos de clase y valores predeterminados

Los campos públicos pueden declararse en el cuerpo de la clase. Si un campo se
declara sin valor, comienza como undefined. Cuando su valor depende de los
argumentos, normalmente se asigna dentro del constructor.
● ● ● JAVASCRIPT · EJEMPLO
class Persona {
comida = '';

constructor(
nombre = 'Sin nombre',
codigo = 'Sin código',
frase = 'Sin frase'
) {
[Link] = nombre;
[Link] = codigo;
[Link] = frase;
}
}

const desconocido = new Persona();

[Link](desconocido);

OJO
Los campos de una clase no se separan con comas. Podemos usar punto y coma
después de cada declaración, pero no estamos escribiendo una lista de variables ni
un objeto literal.

Clases y modo estricto

El código que se ejecuta dentro del cuerpo de una clase utiliza automáticamente las
reglas del modo estricto. Por ejemplo, no podemos crear accidentalmente una
variable sin declararla.
● ● ● JAVASCRIPT · EJEMPLO
class Ejemplo {
constructor() {
codigo = 'ABC'; // ReferenceError: codigo no está declarado
[Link] = 'ABC'; // Correcto: propiedad de la instancia
}
}

CLASES Y POO · 6
JAVASCRIPT · APUNTES DE CLASE

ACLARACIÓN
El constructor normalmente devuelve la instancia de forma implícita. Si retorna un
valor primitivo, ese valor se ignora; si retorna explícitamente otro objeto, ese objeto
puede reemplazar la instancia resultante.

LECCIÓN 03

Métodos de instancia
Acciones que puede realizar cada objeto

Qué es un método
Un método es una función definida dentro de una clase. Los métodos de instancia
se comparten mediante el prototype de la clase y se ejecutan utilizando una
instancia concreta.
● ● ● JAVASCRIPT · EJEMPLO
class Persona {
constructor(nombre, codigo, frase) {
[Link] = nombre;
[Link] = codigo;
[Link] = frase;
}

quienSoy() {
return `Soy ${[Link]} y mi identidad es ${[Link]}.`;
}

decirFrase() {
[Link]([Link]());
[Link](`${[Link]} dice: ${[Link]}`);
}
}

const spiderMan = new Persona(

'Peter Parker',
'Spider-Man',
'Tu amigable vecino Spider-Man'
);

[Link]();

Referenciar no es lo mismo que ejecutar

● ● ● JAVASCRIPT · EJEMPLO
const referencia = [Link]; // Guarda la función
const resultado = [Link](); // Ejecuta el método

Los paréntesis indican que deseamos ejecutar el método. Sin paréntesis, solamente
obtenemos una referencia a la función.

CLASES Y POO · 7
JAVASCRIPT · APUNTES DE CLASE

OJO CON THIS

Si separamos un método de su objeto y lo ejecutamos como una función
independiente, puede perder su valor de this. Por eso referencia() no necesariamente
conserva a spiderMan como contexto.

Llamar otro método de la misma clase

Dentro de decirFrase() utilizamos [Link](). El prefijo this es necesario porque
quienSoy es un método de la instancia, no una función local del bloque.
● ● ● FRAGMENTO DENTRO DE LA CLASE
decirFrase() {
const presentacion = [Link]();
[Link](presentacion);
}

EN PALABRAS SIMPLES
Los datos guardados en la instancia son sus propiedades. Las acciones que puede
ejecutar son sus métodos.

LECCIÓN 04

Getters y setters
Controlar cómo se consulta o modifica una propiedad

Para qué sirven

Un setter permite controlar qué sucede antes de guardar un valor. Un getter
permite controlar qué sucede cuando ese valor se consulta. Aunque se definen de
forma parecida a los métodos, se utilizan como propiedades y no llevan paréntesis
al llamarlos.

CLASES Y POO · 8
JAVASCRIPT · APUNTES DE CLASE

● ● ● JAVASCRIPT · EJEMPLO
class Persona {
constructor(nombre) {
[Link] = nombre;
this._comida = '';
}

set comidaFavorita(comida) {
this._comida = [Link]();
}

get comidaFavorita() {
return `La comida favorita de ${[Link]} es ${this._comida}.`;
}
}

const spiderMan = new Persona('Peter Parker');

[Link] = 'pay de cereza de la tía May';

[Link]([Link]);

Cómo leer el ejemplo

1. La asignación [Link] = ... activa el setter.
2. El setter recibe un solo valor y lo transforma con toUpperCase().
3. El valor real se guarda en _comida.
4. La lectura [Link] activa el getter.
5. El getter construye y devuelve un mensaje.
POR QUÉ USAMOS _COMIDA
Si el setter comidaFavorita asignara [Link], volvería a activar el mismo
setter y produciría una llamada recursiva. Usamos otro nombre para guardar el valor
interno.

Elemento Uso

Método Se ejecuta con paréntesis: [Link]().

Getter Se consulta como propiedad: [Link].

Setter Se activa con una asignación: [Link] = 'pizza'.

MAYÚSCULAS Y MINÚSCULAS
toUpperCase() devuelve una cadena nueva en mayúsculas. toLowerCase() devuelve
una cadena nueva en minúsculas. Ninguno modifica directamente el string original.

CLASES Y POO · 9
JAVASCRIPT · APUNTES DE CLASE

LECCIÓN 05

Propiedades y métodos estáticos

Información que pertenece a la clase, no a cada instancia

Qué significa static

Una propiedad o método static pertenece a la clase. Se utiliza escribiendo el
nombre de la clase y no requiere crear una instancia. Es útil para contadores,
configuraciones compartidas, cachés y funciones auxiliares relacionadas con la
clase.
● ● ● JAVASCRIPT · EJEMPLO
class Persona {
static _conteo = 0;

constructor(nombre) {
[Link] = nombre;
Persona._conteo++;
}

static get conteo() {

return `${Persona._conteo} instancia(s)`;
}

static mensaje() {
return 'Soy un método estático.';
}
}

const spiderMan = new Persona('Peter Parker');

const ironMan = new Persona('Tony Stark');

[Link]([Link]);
[Link]([Link]());

Pertenece a Ejemplo de acceso

La instancia [Link]

La clase [Link]

this dentro de un método estático

Dentro de un método estático, this normalmente hace referencia a la clase que
recibió la llamada. No representa una instancia particular, por lo que no puede
obtener automáticamente valores como nombre o edad de un objeto concreto.

CLASES Y POO · 10
JAVASCRIPT · APUNTES DE CLASE

● ● ● JAVASCRIPT · EJEMPLO
class Persona {
static descripcion() {
[Link](this === Persona); // true
}
}

[Link]();

OJO
JavaScript permite agregar propiedades a la clase después de declararla, por ejemplo
[Link] = 'Hola'. Aunque es válido, declarar los elementos static
dentro de la clase facilita encontrar y documentar su comportamiento.

LECCIÓN 06

Herencia con extends y super()

Reutilizar propiedades y métodos de otra clase

Qué es la herencia
La herencia permite crear una clase nueva a partir de otra existente. La clase hija
recibe los métodos públicos de la clase padre y puede añadir propiedades o
comportamientos propios. En JavaScript se declara mediante extends.

CLASES Y POO · 11
JAVASCRIPT · APUNTES DE CLASE

● ● ● JAVASCRIPT · EJEMPLO
class Persona {
constructor(nombre, codigo, frase) {
[Link] = nombre;
[Link] = codigo;
[Link] = frase;
}

quienSoy() {
return `Soy ${[Link]}; mi identidad es ${[Link]}.`;
}
}

class Heroe extends Persona {

constructor(nombre, codigo, frase, clan = 'Sin clan') {
super(nombre, codigo, frase);
[Link] = clan;
}

quienSoy() {
const presentacion = [Link]();
return `${presentacion} Pertenezco a ${[Link]}.`;
}
}

const spiderMan = new Heroe(

'Peter Parker',
'Spider-Man',
'Tu amigable vecino Spider-Man',
'Avengers'
);

[Link]([Link]());

Qué hace cada palabra

• extends Persona indica que Heroe hereda de Persona.
• super(nombre, codigo, frase) ejecuta el constructor de Persona.
• [Link] se ejecuta después de super() porque pertenece a la nueva instancia
de Heroe.
• [Link]() llama la versión del método definida en Persona.
REGLA IMPORTANTE
En el constructor de una clase hija debemos ejecutar super(...) antes de utilizar this.
La llamada al constructor padre es la que inicializa la parte heredada de la instancia.

Sobrescribir un método
Cuando la clase hija declara un método con el mismo nombre que la clase padre, la
versión hija reemplaza ese comportamiento para sus instancias. Si todavía
necesitamos el comportamiento anterior, podemos llamarlo mediante
[Link]().

CLASES Y POO · 12
JAVASCRIPT · APUNTES DE CLASE

EN PALABRAS SIMPLES
La clase hija no copia físicamente todo el código de la clase padre. JavaScript conecta
ambas mediante la cadena de prototipos y busca allí los métodos heredados.

LECCIÓN 07

Campos y métodos privados

Proteger detalles internos de una clase

ACTUALIZACIÓN DEL CURSO

La transcripción decía que los métodos privados todavía no eran aceptados por
JavaScript. Esa información quedó antigua: actualmente podemos declarar campos,
métodos, getters y setters privados con el prefijo #.

Qué significa privado

Un elemento privado solo puede utilizarse dentro del cuerpo de la clase que lo
declara. JavaScript impide acceder a él directamente desde fuera, incluso si
conocemos su nombre. Esto permite proteger valores calculados y detalles internos
que no deberían modificarse libremente.
● ● ● JAVASCRIPT · EJEMPLO
class Rectangulo {
#base;
#altura;
#area;

constructor(base = 0, altura = 0) {
this.#base = base;
this.#altura = altura;
this.#calcularArea();
}

#calcularArea() {
this.#area = this.#base * this.#altura;
}

get area() {
return this.#area;
}
}

const rectangulo = new Rectangulo(10, 15);

[Link]([Link]); // 150

// rectangulo.#area = 100; // SyntaxError

Reglas principales
• El signo # forma parte del nombre privado: #area y area son elementos
distintos.

CLASES Y POO · 13
JAVASCRIPT · APUNTES DE CLASE

• Los nombres privados deben declararse dentro de la clase.

• No pueden consultarse mediante rectangulo.#area desde el exterior.
• Tampoco pueden recuperarse dinámicamente con rectangulo['#area'].
• Una subclase no puede acceder directamente a los elementos privados de su
clase padre.
POR QUÉ ES ÚTIL
El área depende de la base y la altura. Al mantener #area privada, evitamos que
alguien guarde un resultado incoherente como 100 cuando 10 × 15 realmente
produce 150.

LECCIÓN 08

Patrón Singleton
Mantener una única instancia compartida

Qué es un Singleton
Singleton es un patrón de diseño que limita una clase a una sola instancia. Si el
programa intenta crearla nuevamente, recibe la instancia que ya existía en lugar de
un objeto independiente.

Puede utilizarse cuando toda la aplicación necesita compartir el mismo servicio o

estado, por ejemplo una configuración global, un registro de eventos o una
conexión administrada por una sola instancia.
● ● ● JAVASCRIPT · EJEMPLO
class Singleton {
static instancia;

constructor(nombre) {
if ([Link]) {
return [Link];
}

[Link] = nombre;
[Link] = this;
}
}

const instancia1 = new Singleton('Iron Man');

const instancia2 = new Singleton('Spider-Man');
const instancia3 = new Singleton('Black Panther');

[Link]([Link]); // Iron Man

[Link]([Link]); // Iron Man
[Link]([Link]); // Iron Man
[Link](instancia1 === instancia2); // true

CLASES Y POO · 14
JAVASCRIPT · APUNTES DE CLASE

Cómo funciona
1. static instancia guarda la referencia compartida en la propia clase.
2. La primera llamada no encuentra una instancia previa y guarda this.
3. Las llamadas siguientes detectan el valor existente y lo retornan
inmediatamente.
4. Todas las variables apuntan al mismo objeto; por eso comparten sus cambios.
ACLARACIÓN IMPORTANTE
El objetivo principal del Singleton es controlar que exista una sola instancia y
compartir su estado. No deberíamos elegirlo únicamente como una técnica para
ahorrar memoria.

Truthy, falsy y doble negación

La transcripción utiliza !! para convertir un valor a booleano. Es válido, pero no es
necesario para esta condición. if ([Link]) ya comprueba si existe un
valor truthy.
● ● ● JAVASCRIPT · EJEMPLO
const valor = undefined;

[Link](valor); // undefined
[Link](!valor); // true
[Link](!!valor); // false

USO RESPONSABLE
El estado global puede dificultar pruebas y producir dependencias ocultas. Conviene
usar Singleton solamente cuando la aplicación realmente necesita una única instancia
compartida.

LECCIÓN 09

Métodos fábrica
Crear instancias desde diferentes formatos de datos

Por qué necesitamos otra forma de crear objetos

JavaScript permite un solo constructor por clase. Sin embargo, a veces recibimos la
misma información en formatos diferentes: valores separados, un objeto
proveniente de un formulario o una respuesta JSON obtenida mediante HTTP.

Un método fábrica es una función que prepara los datos y devuelve una nueva
instancia. Cuando pertenece directamente a la clase, suele declararse como static.

CLASES Y POO · 15
JAVASCRIPT · APUNTES DE CLASE

● ● ● JAVASCRIPT · EJEMPLO
class Persona {
constructor(nombre, apellido, pais) {
[Link] = nombre;
[Link] = apellido;
[Link] = pais;
}

static desdeObjeto({ nombre, apellido, pais }) {

return new Persona(nombre, apellido, pais);
}

obtenerInfo() {
return `${[Link]} ${[Link]} — ${[Link]}`;
}
}

const persona1 = new Persona(

'Melissa',
'Flores',
'Honduras'
);

const datos = {
nombre: 'Fernando',
apellido: 'Herrera',
pais: 'Costa Rica'
};

const persona2 = [Link](datos);

[Link]([Link]());
[Link]([Link]());

Qué está haciendo el método fábrica

1. desdeObjeto() recibe un objeto completo.
2. La desestructuración extrae nombre, apellido y pais.
3. El método llama al constructor existente con esos valores.
4. Finalmente devuelve una instancia real de Persona.
NO LLEVA NEW
[Link]() es un método estático, no un constructor. El new se utiliza
dentro del método cuando este crea la instancia.

● ● ● JAVASCRIPT · EJEMPLO
// Incorrecto: el método no es un constructor
// const persona = new [Link](datos);

// Correcto
const persona = [Link](datos);

CLASES Y POO · 16
JAVASCRIPT · APUNTES DE CLASE

APLICACIÓN COMÚN
Los métodos fábrica resultan útiles al transformar respuestas de una API en objetos
con métodos propios, sin obligar al resto del programa a conocer cómo deben
ordenarse los argumentos del constructor.

CLASES Y POO · 17
JAVASCRIPT · APUNTES DE CLASE

Glosario rápido
Término Significado

Clase Plantilla que describe propiedades y comportamientos compartidos.

Instancia Objeto concreto creado a partir de una clase.

constructor Método especial ejecutado al crear una instancia con new.

Referencia determinada por el contexto de ejecución; en un método

this
de instancia suele ser el objeto receptor.

Objeto utilizado para compartir y buscar propiedades y métodos

prototype
heredados.

static Elemento que pertenece a la clase y no a una instancia particular.

extends Palabra que crea una clase hija a partir de otra clase.

Llamada al constructor de la clase padre dentro de una clase

super()
derivada.

get / set Accesores que controlan la lectura y la escritura de valores.

#privado Elemento que solo puede utilizarse dentro de la clase que lo declara.

Singleton Patrón que mantiene una única instancia compartida.

Método fábrica Método que prepara datos y devuelve una instancia.

Referencias para continuar

[Link]
[Link]
Private_elements
[Link]
[Link]
CIERRE
La programación orientada a objetos no consiste solamente en escribir class. La idea
es reunir datos y comportamientos relacionados, crear instancias coherentes y decidir
con claridad qué pertenece a cada objeto, qué pertenece a la clase y qué debe
permanecer privado.

CLASES Y POO · 18