Herencia y constructor

[Pantaláimon]

Buenas.

Acabo de encontrar un comportamiento que me parece extraño en Javascript y que no encuentro una respuesta.
Defino una clase B y una clase C que hereda de B.
Creo una instancia de C llamada c.
Llamo al método constructor desde c y, sin saber por qué, llama al constructor de B.

Aquí el código:

Código Javascript:

function B(){ 
    this.b = 2;
    console.log("B constructor"); 
}
B.prototype.fbb = function() { this.b++; }
 
function C(){ 
    this.c = 3;
    console.log("C constructor");
}
C.prototype = Object.create(B.prototype);
C.prototype.fcc = function() {  this.c++ }
 
var c = new C(); // C constructor : OK
console.log(c instanceof B); // ok
console.log(c instanceof C); // ok
c.constructor(); // B constructor : ????
 

¿Alguna explicación?

[marlanga]

La orientación a objetos de javascript siguiendo el paradigma de JAVA es emulada, pero no real. En la línea 12 estás machacando todos los atributos pertenecientes al prototipo de C por los de B, entre ellos, el atributo "constructor". Por eso los métodos de C hay que crearlos después de esa línea, sobre todo si tienen el mismo nombre que otro atributo de B (porque si lo declaras antes, el de B lo machacaría por la misma razón).

Si quieres recuperar el atributo "constructor" original, pon un C.prototype.constructor = C; justo después de la línea 12, aunque yo no uso nunca el constructor; directamente hago un new C(...) y a correr.

[stock]

Código Javascript:

C.prototype = Object.create(B.prototype);
 

Esa línea es la responsable, en lugar de eso deberías copiar cada propiedad de B a C individualmente, utilizando un for in por ejemplo.

Saludos

[Pantaláimon]

Gracias a los dos! Me quedo con la versión de marlanga Pues emula mejor la herencia:

Código Javascript:

Function.prototype.extend = function (base) {
    this.prototype = Object.create(base.prototype);
    this.prototype.constructor = this;
}
 
function B(){ 
    this.b = 2;
    console.log("B constructor"); 
}
B.prototype.fbb = function() { this.b++; }
 
function C(){ 
    this.c = 3;
    console.log("C constructor");
}
 
C.extend(B);
C.prototype.fcc = function() {  this.c++ }
 
var c = new C(); // C constructor : OK
console.log(c instanceof B); // ok
console.log(c instanceof C); // ok
c.constructor(); // C constructor : ok
 

En la de stock me devuelve falso al comprobar si c es una instancia de B.

Código Javascript:

Function.prototype.extend = function (base) {
    for( var method in base.prototype ) {
        this.prototype[method] = base.prototype[method];
    }
}
 
function B(){ 
    this.b = 2;
    console.log("B constructor"); 
}
B.prototype.fbb = function() { this.b++; }
 
function C(){ 
    this.c = 3;
    console.log("C constructor");
}
 
C.extend(B);
C.prototype.fcc = function() {     this.c++ }
 
var c = new C(); // C constructor : OK
console.log(c instanceof B); // false <--- no emula bien la herencia
console.log(c instanceof C); // ok
c.constructor(); // C constructor : ok
 

Y ya que estamos. He leído ya varias veces que es una mala práctica modificar el prototype de los las clases preestablecidas de Javascript (cosa que he hecho con Function en este caso). La razón que se da es que le estamos dando un comportamiento nuevo a esas clase y otro programador que use el código se podría sentir confuso ante las variaciones. Yo no soy tan radical pues entiendo que añadiendo un método que no existe previamente no se puede generar ninguna confusión. ¿Alguna objeción a este razonamiento?

Un saludo!

[stock]

La razón que tiene mas peso en mi opinión es compatibilidad, imagínate si todos comenzáramos a agregar funciones al prototype? sería complicado compartir nuestro código, eso sucedía con la famosa librería Prototype, Mootools y otras (hace algunos años), modificaban el prototipo y era imposible usar ambas en un mismo proyecto, jQuery desde un principio soluciono este problema usando su propio namespace.

Mi consejo es que utilices tu propio namespace en lugar de modificar el prototipo.

Saludos

[Pantaláimon]

Cierto, no lo había pensado así. Ahora mi duda es como se implementa un nuevo namespace. Intentando imitar lo que hace JQuery me ha salido esto:

Código Javascript:

function X(f) {
    if( f instanceof Function) {
        return new X.Function(f);
    }
}
 
X.Function = function(f) {
    this.f = f;
}
 
X.Function.prototype.extend = function (base) {
    this.f.prototype = Object.create(base.prototype);
    this.f.prototype.constructor = this.f;
}
 
function B(){ 
    console.log("B constructor");
}
B.prototype.fbb = function() {}
 
function C(){ 
    console.log("C constructor");
}
 
X(C).extend(B);
C.prototype.fcc = function() {}
 
var c = new C(); // C constructor : OK
console.log(c instanceof B); // ok
console.log(c instanceof C); // ok
c.constructor(); // C constructor : ok
 

Primeramente he intentado que la clase X.Function, en vez de tener una propiedad f de la clase Function, fuera una clase extendida de Function. Pero de esta manera no he conseguido hacerlo:

Código Javascript:

function X(e){
    if( e instanceof Function) {
        return new X.Function(e);
    }
}
 
X.Function = function() {
    Function.apply(this, arguments);
}
X.Function.prototype = Object.create(Function.prototype);
X.Function.prototype.constructor = X.Function;
 
X.Function.prototype.extend = function (base) {
    this.prototype = Object.create(base.prototype);
    this.prototype.constructor = this;
}
 

Un saludo!