Guia completa de Prototips, Constructors i Herència en JavaScript

Guia clara de JavaScript: herència prototipal, prototips, constructors i ES6, amb bones pràctiques per crear objectes eficients i depurar cadenes de prototips.

domingo, 17 de agosto de 2025 • 6 min de lectura • Equip Q2BSTUDIO

Intel·ligència-Artificial-

Introducció

JavaScript destaca entre els llenguatges de programació per utilitzar herència prototipal en lloc d'herència basada en classes tradicionals. Aquesta diferència pot generar confusió al principi però, en comprendre com funcionen els prototips, s'obté una visió més profunda del potent sistema d'objectes de JavaScript. En aquest article revisem de manera clara i pràctica els conceptes d'objectes, prototips, funcions constructores i herència, i mostrem bones pràctiques que t'ajudaran a escriure codi més eficient.

La base: objectes en JavaScript

Tot en JavaScript és un objecte o hereta d'Object.prototype. La forma més comuna de crear un objecte és mitjançant literal d'objecte. Per exemple: let person = { name: John, age: 30, greet() { return Hola soc plus this.name } } i després accedir a person.name o invocar person.greet. Tècnicament let person = {} és equivalent a let person = new Object i tots dos hereten d'Object.prototype, per això disposen de mètodes incorporats com toString i valueOf.

Entenent els prototips

Cada objecte en JavaScript té una propietat interna oculta anomenada [[Prototype]] que enllaça a un altre objecte i permet heretar propietats i mètodes. Per inspeccionar el prototip d'un objecte es recomana utilitzar Object.getPrototypeOf(obj). Encara que en molts exemples es veu la propietat no estàndard __proto__, el seu ús no és recomanat en codi de producció.

La cadena de prototips

Diferents tipus d'objectes posseeixen diferents prototips formant cadenes d'herència. Per exemple un array myArray té com a prototip Array.prototype i després Object.prototype i finalment null. Un string myString té String.prototype i després Object.prototype. Aquestes cadenes expliquen per què els arrays tenen push i pop mentre que els strings tenen charAt o slice.

Funcions constructores

Les funcions constructores actuen com a plantilles per crear objectes similars quan s'utilitzen amb la paraula clau new. En invocar new Constructor args JavaScript crea un objecte enllaçat al prototype del constructor, executa la funció constructor amb this apuntant a aquest nou objecte i retorna l'objecte resultant llevat que la funció retorni un objecte diferent. Per això les funcions constructores solen començar amb majúscula per convenció.

Exemple conceptual de new

Quan fem const car = new Car make model year internament es crea un objecte enllaçat a Car.prototype, s'executa Car amb this apuntant a aquest objecte i es retorna l'objecte. Per això és comú afegir mètodes compartits a Car.prototype per evitar duplicació i estalviar memòria.

Instàncies versus propietats del prototip

Les propietats pròpies de la instància pertanyen directament a l'objecte i són úniques per a cada instància. Les propietats del prototip són compartides entre totes les instàncies. Per exemple car1.make i car2.make són propietats d'instància diferents mentre que car1.drive i car2.drive poden apuntar a la mateixa funció definida a Car.prototype.

Relació prototype i __proto__

prototype és una propietat de les funcions constructores que apunta a l'objecte prototip que heretaran les instàncies. __proto__ o el seu reemplaçament estàndard Object.getPrototypeOf permeten accedir al prototip d'una instància. Tots dos poden referir-se al mateix objecte prototip però s'utilitzen en contextos diferents: un a la funció constructora i l'altre a la instància.

Propietat constructor

Cada prototip té una propietat constructor que apunta de tornada a la funció constructora original. Quan es reassigna manualment prototype és bona pràctica restaurar Child.prototype.constructor igual a Child per mantenir la referència correcta.

Herència prototipal

Per crear relacions d'herència entre tipus es recomana utilitzar Object.create sobre el prototip del pare i després restaurar el constructor del fill. A més dins del constructor del fill convé invocar el constructor del pare amb call this per inicialitzar les propietats pròpies. Evita utilitzar Object.setPrototypeOf sobre objectes ja existents perquè trenca optimitzacions de motors JS.

Control directe amb Object.create

Object.create permet crear un objecte que hereta directament d'un altre objecte sense necessitat de funcions constructores. És útil per a patrons de prototips simples i per a composició quan es volen crear instàncies que comparteixin comportament base sense la sintaxi de new.

Cerca de propietats i shadowing

En accedir a una propietat JavaScript busca primer a l'objecte mateix, després al seu prototip i puja per la cadena fins trobar-la o arribar a null. El shadowing ocorre quan un objecte fill defineix una propietat amb el mateix nom que una propietat del pare; la cerca s'atura a la primera coincidència.

Inspecció i eines de depuració

Per comprovar si una propietat pertany a la instància utilitzar hasOwnProperty propName. Per verificar relacions d'herència utilitzar instanceof o isPrototypeOf. Object.getPrototypeOf ofereix la forma recomanada d'accedir al prototip. Una funció d'ajuda útil itera Object.getPrototypeOf de manera segura fins a un límit per mostrar la cadena de prototips.

Classes modernes ES6

La sintaxi class introduïda a ES6 és sucre sintàctic sobre el sistema de prototips. class i extends faciliten la lectura i manteniment del codi i sota el capó creen exactament les mateixes relacions prototipals que les funcions constructores tradicionals. super en una classe equival a invocar call sobre el constructor pare.

Bones pràctiques ràpides

Utilitzar Object.create per establir herència, restaurar la propietat constructor en reassignar prototypes, preferir Object.getPrototypeOf sobre __proto__, afegir mètodes al prototip en lloc de dins del constructor i evitar Object.setPrototypeOf en objectes existents. Considerar ES6 classes per a codi més net mantenint en ment que la mecànica subjacent continua sent prototipal.

Resum de conceptes clau

Objects constitueixen la base, els constructors generen instàncies, els prototips permeten compartir comportament, l'herència crea jerarquies i la cadena de prototips habilita la cerca de mètodes. En comprendre prototype versus Object.getPrototypeOf es domina com JavaScript resol la majoria de les qüestions d'herència.

Aplicació pràctica i propers passos

Practica creant jerarquies amb funcions constructores i amb ES6 classes, inspecciona cadenes de prototips i optimitza definint mètodes en prototips quan convingui. Experimenta també amb Object.create per a patrons de composició i reutilització.

Q2BSTUDIO i com t'ajudem

A Q2BSTUDIO som una empresa de desenvolupament de programari i aplicacions a mida especialitzada en solucions innovadores. Oferim serveis de programari a mida, aplicacions a mida i consultoria en intel·ligència artificial per a empreses. El nostre equip implementa agents IA, solucions d'ia per a empreses i plataformes analítiques com power bi per a serveis intel·ligència de negoci. A més proporcionem ciberseguretat integral i desplegament i administració en serveis cloud aws i azure per garantir disponibilitat, escalabilitat i seguretat. Si necessites integrar intel·ligència artificial en processos, construir aplicacions a mida o millorar la teva estratègia de ciberseguretat, a Q2BSTUDIO dissenyem solucions adaptades a la teva organització.

Paraules clau per a posicionament

aplicacions a mida, programari a mida, intel·ligència artificial, ciberseguretat, serveis cloud aws i azure, serveis intel·ligència de negoci, ia per a empreses, agents IA, power bi

Conclusió

Comprendre el sistema de prototips és essencial per dominar JavaScript. Encara que la sintaxi moderna de classes fa el codi més llegible, els prototips continuen sent la base. Amb aquests conceptes podràs crear jerarquies d'objectes més eficients, depurar problemes d'herència i dissenyar arquitectures que aprofitin al màxim els avantatges de JavaScript. Si busques suport professional per portar aquestes idees a producció, Q2BSTUDIO ofereix experiència en desenvolupament de programari a mida, intel·ligència artificial i ciberseguretat per ajudar-te a transformar els teus projectes en solucions reals i segures.

ELS NOSTRES SERVEIS

Com et podem ajudar

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.