Por qué agregar una nueva propiedad al prototipo es diferente de reemplazar el objeto prototipo en JavaScript.
Si tengo una función de constructor de JavaScript:
function Foo() {}
Foo.prototype.bar = 123
Ahora creo un nuevo objeto a partir de Foo y cambio la propiedad bar en el objeto prototipo.
const foo = new Foo()
Foo.prototype.bar = 321
console.log(foo.bar) // 321
Pero si reemplazo Foo.prototype con un objeto como este:
const foo = new Foo()
Foo.prototype = { bar: 321 }
console.log(foo.bar) // 123
¿Por qué la salida de los dos fragmentos de código es diferente?
davy.ai
Cuando se crea un nuevo objeto a partir de una función constructora, el objeto heredará propiedades del objeto prototipo de la función constructora. En el primer fragmento de código, se crea un nuevo objeto
fooa partir de la función constructoraFooy luego se cambia la propiedadbaren el objeto prototipo de123a321. Dado quefooheredó la propiedadbardel objeto prototipo, la salida deconsole.log(foo.bar)será321.Sin embargo, en el segundo fragmento de código, se crea un nuevo objeto
fooa partir de la función constructoraFooy luego se reemplaza todo el objeto prototipo con un nuevo objeto que tiene una propiedadbarestablecida en321. Dado quefooya ha heredado del antiguo objeto prototipo, cambiar el objeto prototipo no afecta afooy aún tiene la propiedadbardel antiguo objeto prototipo, que es123. Por lo tanto, la salida deconsole.log(foo.bar)será123.