javascript - herencia - ¿Cuál es la diferencia entre this.function y prototype.function?

javascript prototype vs class

Question

Dada la simple herencia de JS, ¿cuál es la diferencia práctica en la función básica entre estos dos ejemplos? En otras palabras, ¿cuándo debería una persona elegir definir una función en "esto" en lugar de en el prototipo (o al revés)?

Para mí, el segundo ejemplo es más fácil de digerir, pero ¿cuánto más hay para esto?

Función definida en esto:

//base
var _base = function () {
this.baseFunction = function () {
console.log("Hello from base function");
}
};
//inherit from base
function _ctor() {
this.property1 = "my property value";
};
_ctor.prototype = new _base();
_ctor.prototype.constructor = _ctor;
//get an instance
var instance = new _ctor();
console.log(instance.baseFunction);

Función definida en el prototipo:

//base
var _base = function () {};
_base.prototype.baseFunction = function () {
console.log("Hello from base function");
}
//inherit from base
function _ctor() {
this.property1 = "my property value";
};
_ctor.prototype = new _base();
_ctor.prototype.constructor = _ctor;
//get an instance
var instance = new _ctor();
console.log(instance.baseFunction);

Answer 1

Las funciones en el prototipo solo se crean una vez y se comparten entre cada instancia. Las funciones creadas en el constructor se crean como nuevos objetos para cada nuevo objeto creado con el constructor.

Como regla general, las funciones deben estar en el prototipo, ya que generalmente no se modificarán para diferentes objetos del mismo tipo, y esto tiene un ligero beneficio de memoria / rendimiento. Otras propiedades, como los objetos y las matrices, deben definirse en el constructor, a menos que desee crear una propiedad estática compartida, en cuyo caso debe usar el prototipo.

Es más fácil ver las distinciones con objetos o matrices normales en lugar de funciones

function Foo(){
this.bar = [];
}
var fooObj1 = new Foo();
var fooObj2 = new Foo();
fooObj1.bar.push("x");
alert(fooObj2.bar) //[]

Opuesto a:

function Foo(){
}
Foo.prototype.bar = []
var fooObj1 = new Foo();
var fooObj2 = new Foo();
fooObj1.bar.push("x");
alert(fooObj2.bar) //["x"]