Comportamiento extraño: Require.js y herencia javascript

[Pantaláimon]

Buenas.

Editado: el título habla de Require.js pero lo he obviado y he simplificado el código, pues el problema es inherente al uso de Require.js

El problema está con dos clases TableX y OutputX que heredan de NodeX. Este es el código:

Código Javascript:

function NodeX(){};
 
    function OutputX(){}
 
    OutputX.prototype = NodeX.prototype;
    OutputX.prototype.foo = function(){
        console.log("OutputX.prototype.foo");
    }
 
    function TableX(){};
 
    TableX.prototype = NodeX.prototype;
 
    TableX.prototype.foo = function(){
        console.log("TableX.prototype.foo");
    }
    TableX.prototype.bar = function(){
        console.log("TableX.prototype.bar");
    }
 
    var o = new OutputX;
    o.foo();
    o.bar();
 

En principio como OutputX no extiende a la clase TableX, o.foo() no debería devolver "TableX.prototype.foo" por consola y o.bar() debería dar un error. Sin embargo no es este el caso.

¿Que se me está escapando para no entender este comportamiento, a mi ver, tan extraño?

Un saludo y gracias!

[marlanga]

Código Javascript:

OutputX.prototype = NodeX.prototype;
TableX.prototype = NodeX.prototype;
 

Esto no sirve para heredar. Estás igualando prototipos, has hecho que los tres "objetos" tengan el mismo prototipado. El comportamiento es raro, pero es fácil de evitar.

Cambialos por la mejor forma de heredar que he visto de momento:

Código Javascript:

OutputX.prototype = Object.create(NodeX.prototype);
TableX.prototype = Object.create(NodeX.prototype);
 

Ejemplo completo:

Código Javascript:

function NodeX(){};
NodeX.prototype.bla = function(){
    console.log("NodeX.prototype.bla");
}
 
function OutputX(){}
 
OutputX.prototype = Object.create(NodeX.prototype);
 
OutputX.prototype.foo = function(){
    console.log("OutputX.prototype.foo");
}
 
function TableX(){};
 
TableX.prototype = Object.create(NodeX.prototype);
 
TableX.prototype.foo = function(){
    console.log("TableX.prototype.foo");
}
TableX.prototype.bar = function(){
    console.log("TableX.prototype.bar");
}
 
var o = new OutputX;
o.foo();
o.bla();
o.bar();
 

[jp91]

Asi como esta el codigo de arriba pues arrojaria un error ya que uno de esos metodos no existe en la funcion y si vas a usar este metodo deberias tener cuidado ya que se puede perder la referencia al constructor que esperarias que apunte.

[Pantaláimon]

Gracias marlanga.

Estaba obcecado en que se heredaba por ese sistema.

Por cierto, en algun lugar he mirado que también explican la herencia así:

Código Javascript:

TableX.prototype = new NodeX;
 

Pero veo que no son equivalentes:

Código Javascript:

function Base( x ){
    this.a = x;
};
 
function A(){};
function B(){};
 
A.prototype = new Base;
B.prototype = Object.create( Base.prototype );
 
console.log( A.prototype );
console.log( B.prototype );
 

Me quedo con Object.create

Un saludo!

[marlanga]

Ésa es la forma que yo usaba antes de conocer los métodos del objeto Object, que se pueden usar para simular la programación orientada a objetos mediante clases de otros lenguajes, pero tiene un defecto: Cuando la función que haga de Clase base acepte argumentos, tirará una advertencia "invisible" que los navegadores ignoran.
O peor aún, si haces algún tratamiento "avanzado" de esos argumentos (por ejemplo, uno de los argumentos esperas que sea una instancia de un objeto tuyo determinado, al que le ejecutas algún método) entonces dará error porque en esa llamada no le mandas nada.

Aunque creo recordar de haber leído por haí que el futuro EcmaScript 6 ya trae orientación a objetos mediante clases, muy parecida ala sintaxis de java, con lo que al final se crearán crearán clases con métodos y atributos públicos y privados sin romperse uno la cabeza como ahora (donde hay tropecientos mil formas distintas de implementar clases).

[Pantaláimon]

O peor aún, si haces algún tratamiento "avanzado" de esos argumentos (por ejemplo, uno de los argumentos esperas que sea una instancia de un objeto tuyo determinado, al que le ejecutas algún método) entonces dará error porque en esa llamada no le mandas nada.

Exacto, en ese caso habría que preocuparse de implementar el constructor para los casos en que los parámetros pasados sean undefined. Y habiendo Object.create, para qué preocuparse de eso!

Edit: Ah! que con los métodos de Object también ocurre? Vaya pues...

[marlanga]

¿El qué ocurre?

Código Javascript:

function A(arr){
    this.arr=arr;
    this.arr.push("d");
}
 
A.prototype.getArr=function(){ return this.arr; };
 
function B(){
    A.call(this, ["a","b","c"]); //Llamada al constructor padre
};
 
function C(){
    A.call(this, ["a","b","c"]); //Llamada al constructor padre
};
 
B.prototype=Object.create(A.prototype);
var b=new B();
console.log(b.getArr());
 
C.prototype=new A;
var c=new C();
console.log(c.getArr());
 

B funciona bien, C tira error por ejecutar un push sobre un argumento "undefined" en la llamada de la línea 20.
No olvidar que aunque buscamos que B y C hereden todo de A, al constructor del padre hay que llamarlo explícitamente (porque en realidad no hay herencia, la estamos simulando).

[Pantaláimon]

los métodos del objeto Object, que se pueden usar para simular la programación orientada a objetos mediante clases de otros lenguajes, pero tiene un defecto: Cuando la función que haga de Clase base acepte argumentos, tirará una advertencia "invisible" que los navegadores ignoran.

Entendí que con los métodos de Object también ocurre que tira la advertencia. Pero claro, ahora entiendo que mejor que sea una advertencia invisible a otra que no.

Un saludo!