W3docs

JavaScript instanceof

Aprende a usar el operador instanceof de JavaScript para verificar tipos, recorrer cadenas de prototipos e implementar polimorfismo.

Introducción al operador instanceof

El operador instanceof en JavaScript es una herramienta poderosa para determinar si un object es una instancia de una clase o función constructora específica. Ayuda a los desarrolladores a verificar el tipo de un object en tiempo de ejecución, facilitando la verificación de tipos e implementando el polimorfismo de manera efectiva. Este operador comprueba la cadena de prototipos de un object contra el prototipo de una función constructora, ofreciendo un resultado boolean que indica si el object hereda del prototipo.

Sintaxis y uso

La sintaxis del operador instanceof es sencilla:

object instanceof Constructor
javascript— editable

Donde object es el object que se prueba contra el Constructor. El operador devuelve true si el object es una instancia del Constructor o ha heredado de él; de lo contrario, devuelve false.

Ejemplo de código: uso básico

Considera el siguiente ejemplo donde definimos una clase Vehicle y creamos una instancia de ella:

javascript— editable

Aplicaciones avanzadas

Más allá de la verificación básica de tipos, el operador instanceof desempeña un papel crucial en escenarios más complejos que involucran herencia y polimorfismo. Exploremos un escenario con herencia:

Ejemplo de código: herencia

javascript— editable

Este ejemplo ilustra cómo instanceof confirma que myCar no solo es una instancia de Car, sino también una instancia de Vehicle, demostrando la capacidad del operador para reconocer la cadena de herencia.

Cómo instanceof recorre la cadena de prototipos

instanceof no comprueba directamente qué constructor creó el object. En su lugar, recorre la cadena de prototipos del object y pregunta: ¿aparece Constructor.prototype en algún lugar de ella? En cuanto encuentra una coincidencia, devuelve true; si llega al final de la cadena (null) sin encontrar una coincidencia, devuelve false.

javascript— editable

Por esta razón, puedes romper o cambiar un resultado de instanceof reasignando la cadena de prototipos — la comprobación tiene que ver únicamente con la pertenencia a la cadena, no con el constructor que se ejecutó. Para entender la cadena en sí, consulta Herencia prototípica y Sintaxis básica de clases.

Personalizar instanceof con Symbol.hasInstance

Puedes sobreescribir lo que devuelve obj instanceof Constructor definiendo un método estático [Symbol.hasInstance] en el constructor. Cuando está presente, instanceof lo llama con el operando de la izquierda y usa su resultado boolean, ignorando por completo la cadena de prototipos.

javascript— editable

Esto es útil para el duck-typing — tratar cualquier object que "tenga el aspecto correcto" como miembro de un tipo — sin forzarlo a través de la jerarquía de clases.

instanceof vs typeof vs constructor

Estas tres herramientas responden preguntas distintas, y elegir la incorrecta es una fuente común de errores.

  • typeof devuelve un string para categorías de tipos primitivos. Es ideal para primitivos, pero devuelve "object" para casi todo (arrays, null, fechas, objetos planos), por lo que no puede distinguir tipos de object.
  • instanceof comprueba la pertenencia a la cadena de prototipos y respeta la herencia — pero falla entre contextos de ejecución (ver más abajo) y no funciona con primitivos.
  • obj.constructor apunta a la función que creó el object, pero es simplemente una propiedad editable que solo refleja la clase más específica, no toda la cadena.
javascript— editable

Los constructores integrados utilizados arriba se tratan en Prototipos nativos.

El problema de los contextos de ejecución (iframe/window)

Cada contexto de navegación — cada iframe o ventana emergente — tiene su propio conjunto de constructores integrados y sus propios Array.prototype, Object.prototype, etc. Un array creado en un iframe es un array real, pero no hereda del Array.prototype de tu ventana. Como resultado, arrayFromIframe instanceof Array devuelve false en la ventana padre, aunque el valor sea genuinamente un array. Esta es la razón más común por la que instanceof "miente."

Para valores que pueden cruzar contextos de ejecución, prefiere comprobaciones independientes del contexto como Array.isArray(value).

Etiquetas de tipo fiables con Object.prototype.toString

Cuando necesitas una verificación de tipo robusta, segura entre contextos de ejecución y que también funcione con primitivos, Object.prototype.toString devuelve un string de etiqueta interna con la forma [object Type]. No puede ser engañado por prototipos reasignados como lo haría constructor, y funciona entre contextos de ejecución.

javascript— editable

Úsalo mediante .call(value) para que el valor se convierta en this. Una clase incluso puede controlar su propia etiqueta con la propiedad Symbol.toStringTag.

Buenas prácticas y consideraciones

Aunque el operador instanceof es invaluable, es esencial usarlo con criterio:

  • Sensibilidad a la cadena de prototipos: El operador instanceof se basa en la cadena de prototipos, lo que significa que los cambios en el prototipo de un object pueden afectar el resultado de las comprobaciones con instanceof.
  • Uso en polimorfismo: Es particularmente útil en escenarios donde se desea un comportamiento polimórfico, permitiendo un código flexible que puede manejar objects de distintos tipos de manera unificada.
  • Problemas entre contextos: Ten cuidado al usar instanceof con objects provenientes de diferentes contextos de JavaScript (por ejemplo, iframes o diferentes ventanas), ya que cada contexto tiene su propia cadena de prototipos.

Ejemplo práctico: polimorfismo

Así es como podrías usar instanceof para implementar un comportamiento polimórfico:

javascript— editable

Conclusión

Comprender y utilizar eficazmente el operador instanceof es fundamental para dominar los aspectos de programación orientada a objetos de JavaScript. No solo ayuda en la verificación de tipos y garantiza la corrección de tu código, sino que también te permite escribir código más flexible y mantenible a través del polimorfismo. Al integrar el operador instanceof de manera inteligente en tus prácticas de desarrollo, puedes mejorar significativamente la solidez y escalabilidad de tus aplicaciones JavaScript.

Práctica

Práctica
¿Cuáles son afirmaciones verdaderas sobre el operador 'instanceof' en JavaScript?
¿Cuáles son afirmaciones verdaderas sobre el operador 'instanceof' en JavaScript?
Was this page helpful?