Comprobación de instancias en JS (Operador instanceof)

El operador instanceof es la herramienta definitiva para validar herencias y asegurar que tu lógica fluya sin errores inesperados. Domina el arte de la cadena de prototipos y descubre cómo verificar el origen de cada instancia con precisión quirúrgica.

1. ¿Qué significa que un objeto sea una instancia?

Primero debemos entender qué es una instancia en JavaScript.

Una instancia es un objeto creado a partir de una función constructora o una clase (ver que es una clase en JS).

En otras palabras:
Es un objeto que hereda propiedades y métodos definidos en un “molde” (constructor o clase).

Objetos vs Clases (idea clave)

• Objeto literal → no es instancia de tu propia estructura
• Clase / función constructora → actúa como “plantilla”
• Instancia → el resultado de usar esa plantilla

1.1. Creación de una instancia con new (Sin usar clases)

Vamos a ver este punto con un ejemplo, y usando una función constructora

// Definimos una función constructora (plantilla)
function Persona(nombre, edad) {
  // 'this' hace referencia al nuevo objeto que se va a crear
  this.nombre = nombre;
  this.edad = edad;
}

// Creamos una instancia usando 'new'
const persona1 = new Persona("Juan", 30);

// 👉 persona1 es una INSTANCIA de Persona

console.log(persona1.nombre); // "Juan"
console.log(persona1.edad);   // 30Lenguaje del código: JavaScript (javascript)

🔍 ¿Qué hace internamente new?

Cuando usás new Persona(...), JavaScript hace esto:

// 1. Crea un objeto vacío
const nuevoObjeto = {};

// 2. Conecta ese objeto al prototype del constructor
nuevoObjeto.__proto__ = Persona.prototype;

// 3. Ejecuta la función constructora con 'this' apuntando al nuevo objeto
Persona.call(nuevoObjeto, "Juan", 30);

// 4. Devuelve el objeto creado
return nuevoObjeto;Lenguaje del código: JavaScript (javascript)

👉 Esto es CLAVE para entender instanceof después.

1.2. Creación de una instancia con new (Usando una clase)

// Definimos una clase (forma moderna)
class Persona {
  constructor(nombre, edad) {
    // Se ejecuta automáticamente al usar 'new'
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
}

// Creamos una instancia
const persona1 = new Persona("Ana", 25);

// Uso de la instancia
console.log(persona1.saludar()); // "Hola, soy Ana"Lenguaje del código: JavaScript (javascript)

2. ¿Qué es instanceof?

El operador instanceof se usa para verificar si un objeto es instancia de una función constructora o clase.

👉 Devuelve:

• true → si el objeto proviene de esa clase/constructor
• false → si no

2.1. Sintaxis básica

objeto instanceof ConstructorLenguaje del código: JavaScript (javascript)

👉 Se lee como:
“¿objeto es instancia de Constructor?”

2.2. ¿Cómo funciona?

Cuando escribes objeto instanceof Clase, JavaScript no solo mira si el objeto se hizo con esa clase exacta; busca en toda su «herencia». Si el objeto tiene a esa clase en su árbol genealógico (cadena de prototipos), devolverá true.

2.3. Ejemplo simple con clase

// Definimos una clase
class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }
}

// Creamos una instancia
const persona1 = new Persona("Juan");

// Verificamos si es instancia de Persona
console.log(persona1 instanceof Persona); // trueLenguaje del código: JavaScript (javascript)

Explicación:

• persona1 fue creado con 'new Persona'
• → por eso pertenece a esa clase y nos devuelve true

2.4. Ejemplo donde da false

class Animal {}

const perro = new Animal();

// Verificamos contra otra clase
console.log(perro instanceof Array); // falseLenguaje del código: JavaScript (javascript)

Aquí, perro no tiene relación con Array, por ese nos da false

2.5. Ejemplo utilizando herencia

Aquí tienes un ejemplo práctico utilizando herencia (al usar un extends) para que veas cómo instanceof identifica las jerarquías:

/**
 * 1. Definimos una jerarquía de Clases
 */
class Animal {
  constructor(nombre) {
    this.nombre = nombre;
  }
}

// 'Perro' hereda de 'Animal' (es una subclase)
class Perro extends Animal {
  ladrar() {
    return "¡Guau!";
  }
}

/**
 * 2. Creamos las instancias
 */
const miMascota = new Perro("Fido");
const unObjetoCualquiera = { nombre: "Fido" }; // Un objeto literal común

/**
 * 3. Pruebas con el operador 'instanceof'
 * Sintaxis: (objeto) instanceof (Constructor/Clase)
 */

// CASO A: Verificación directa
// Retorna true porque 'miMascota' fue creado explícitamente con la clase Perro.
console.log(miMascota instanceof Perro); // true

// CASO B: Verificación por Herencia
// Retorna true porque, aunque es un Perro, un Perro TAMBIÉN es un Animal.
// 'instanceof' recorre la cadena de prototipos hacia arriba.
console.log(miMascota instanceof Animal); // true

// CASO C: La base de todo
// Casi todo en JS hereda de 'Object', por lo que esto también es true.
console.log(miMascota instanceof Object); // true

// CASO D: El impostor
// Aunque 'unObjetoCualquiera' tiene la misma estructura (propiedad nombre),
// no fue creado por la clase Perro, por lo tanto es false.
console.log(unObjetoCualquiera instanceof Perro); // false
Lenguaje del código: JavaScript (javascript)

2.6. Diferencia clave: typeof vs instanceof

Es muy común confundirlos, pero tienen propósitos distintos:

NOTA! Si haces typeof miMascota, JavaScript te dirá simplemente "object". No es muy útil si quieres saber si es un Perro o un Gato. Ahí es donde instanceof brilla, permitiéndote ser mucho más específico.

3. ¿Cómo funciona internamente el operador instanceof?

Internamente, el operador instanceof no mira el nombre de la clase ni sus propiedades, sino que actúa como un rastreador que sigue un camino de migas de pan llamado Cadena de Prototipos (Prototype Chain).

.🔹EL FUNCIONAMIENTO INTERNO: El algoritmo de búsqueda:

Cuando ejecutas objeto instanceof Constructor, JavaScript realiza los siguientes pasos:

1. Toma el prototipo del Constructor (su propiedad .prototype).
2. Toma el prototipo interno del objeto (su enlace __proto__).
3. Compara: ¿Son el mismo?
   • Si sí, devuelve true.
   • Si no, sube un escalón en la jerarquía del objeto (mira el prototipo del prototipo) y vuelve a comparar.
4. Si llega al final de la cadena (null) y no encontró coincidencia, devuelve false.

3.1. Ejemplo Sencillo: La Herencia Familiar

Imagina una jerarquía donde un Gato es un Animal. instanceof verificará si el ADN de «Animal» está presente en el «Gato».

// 1. Definimos la base: Todos los animales tienen un reino
class Animal {}

// 2. Definimos la especialidad: Un Gato es un Animal (herencia)
class Gato extends Animal {}

// 3. Creamos la instancia (el objeto real)
const miMichi = new Gato();

/**
 * EXPLICACIÓN DEL FUNCIONAMIENTO INTERNO:
 */

// PRUEBA 1: ¿Es miMichi un Gato?
// Internamente: ¿El prototipo de Gato está en la cadena de miMichi? 
// Sí, porque se creó directamente con 'new Gato()'.
console.log(miMichi instanceof Gato); // true

// PRUEBA 2: ¿Es miMichi un Animal?
// Internamente: JavaScript busca el prototipo de Gato... no es Animal.
// ENTONCES SUBE: Mira el prototipo del padre de Gato. 
// ¡Ahí está Animal! Por eso devuelve true.
console.log(miMichi instanceof Animal); // true

// PRUEBA 3: ¿Es miMichi un Array?
// Internamente: Sube por toda la cadena hasta llegar a null. 
// Nunca encontró el prototipo de Array.
console.log(miMichi instanceof Array); // falseLenguaje del código: JavaScript (javascript)

Para verlo más claro, inspeccionamos su caden prototípica:

miMichi.prototype
  ↓
Gato.prototype
  ↓
Animal.prototype
  ↓
Object.prototype
  ↓
nullLenguaje del código: CSS (css)

En JavaScript, la herencia funciona de abajo hacia arriba. Aquí está el orden de quién hereda de quién:

1. miMichi (La instancia): Es el objeto concreto. Hereda de Gato.
2. Gato (La subclase): Hereda de Animal.
3. Animal (La clase base): Hereda de Object.
4. Object: Es el «ancestro común» de casi todo en JavaScript. Hereda de null.
5. null: El fin del camino. Aquí termina la cadena.

4. Aplicación de instanceof en proyectos reales con el DOM

Esta es una de las aplicaciones más útiles de instanceof en el mundo real. En el desarrollo web, el DOM (Document Object Model) no es solo una «sopa de etiquetas HTML»; es una jerarquía de clases de JavaScript muy compleja.

Por ejemplo, un <div> no es solo un objeto, es una instancia de HTMLDivElement, que a su vez es instancia de HTMLElement, que a su vez es un Node, y así hasta llegar a Object.

4.1. ¿Para qué sirve en el DOM?

Imagina que creas una función que procesa clics. Quieres que haga algo especial si el usuario hace clic en un botón, algo distinto si es un input de texto, y que ignore el resto. Ahí es donde instanceof brilla.

4.2. Ejemplo Real: Un controlador de eventos inteligente

En este ejemplo, crearemos una función que analiza qué elemento se ha tocado y actúa según su «ADN» o clase de interfaz:

/**
 * 1. Función para manejar interacciones de UI
 * Recibe un 'elemento' que puede ser cualquier cosa del DOM.
 */
function procesarElemento(elemento) {
  
  // VERIFICACIÓN 1: ¿Es un campo de entrada de texto?
  // HTMLInputElement es la clase de la que nacen todos los <input>
  if (elemento instanceof HTMLInputElement) {
    console.log(`Escribiste: ${elemento.value}`);
    elemento.style.borderColor = "blue"; // Cambiamos el borde solo si es input
  } 
  
  // VERIFICACIÓN 2: ¿Es un botón?
  // HTMLButtonElement es la clase específica para <button>
  else if (elemento instanceof HTMLButtonElement) {
    console.log("¡Botón presionado!");
    elemento.innerText = "Procesando...";
    elemento.disabled = true;
  } 
  
  // VERIFICACIÓN 3: ¿Es un elemento HTML genérico?
  // HTMLElement es la clase "madre" de casi todas las etiquetas visibles.
  // Si no es un input ni un botón, pero sigue siendo HTML (como un <div> o <p>)
  else if (elemento instanceof HTMLElement) {
    console.log("Hiciste clic en un contenedor o texto.");
    elemento.classList.toggle("resaltado");
  }
  
  // FALLBACK: Si no es nada de lo anterior (puede ser texto suelto o el document)
  else {
    console.warn("El objeto no es un elemento HTML válido.");
  }
}

/**
 * 2. Aplicación en un evento real
 */
document.addEventListener("click", (evento) => {
  // 'evento.target' es el objeto que recibió el clic
  procesarElemento(evento.target);
});Lenguaje del código: JavaScript (javascript)

4.3. ¿Por qué usar instanceof en lugar de nodeName?

Muchos programadores usan elemento.nodeName === "BUTTON", pero instanceof es superior por dos razones:

1. Herenciacompleta:
   • Puedes preguntar si algo es un HTMLElement para aplicar lógica general a cualquier etiqueta, sin importar si es un div, span o section.
2. Seguridad de tipos:
   • Si trabajas con librerías externas o Web Components personalizados, instanceof verifica que el objeto realmente tenga las propiedades y métodos de esa clase, evitando errores de «undefined».