¿Cómo se hace la herencia en JavaScript sin compartir la misma instancia de la superclase entre todas las instancias de la subclase?

Question

me di cuenta de que cada tutorial sobre cómo hacer la herencia JavaScript hace esto:

SubClass.prototype = new SuperClass(); 

Pero esto creará una única instancia de la superclase y compartirlo entre todas las instancias de la clase sub.

El problema es que me gustaría pasar argumentos al constructor de la superclase que se originan a partir de los argumentos pasados ​​a la subclase.

En Java esto se haría así:

class SubClass extends SuperClass { 
    public SubClass(String s) { 
    super(s); 
    } 
} 

He intentado hacer algo como esto:

function SubClass(args) { 
    this.constructor.prototype = new SuperClass(args); 
} 

Pero esto no va a funcionar. Entonces, ¿hay alguna manera de hacer esto en JavaScript?

Answer 1

Así es como siempre lo he hecho.

// Parent object 
function Thing(options) 
{ 
    //do stuff 
} 

Thing.prototype.someMethod = function(){ 
    // some stuff 
    console.log('hello'); 
} 

// child object which inherits from the parent 
function OtherThing(options) 
{  
    Thing.call(this, options); 
    // do stuff for otherthing 
} 

OtherThing.prototype = new Thing(); 

OtherThing.prototype.someMethod = function(){ 
    // call things original function 
    Thing.prototype.someMethod.call(this); 

    // now do anything different 
    console.log('other thing says hi'); 
} 


var testObj = new OtherThing(); 
    testObj.someMethod(); 

Live Demo

Answer 2

Pero esto creará una sola instancia de la superclase y la compartirá entre todas las instancias de la subclase.

Sí, así es como funciona la herencia en JavaScript.

¿Hay alguna forma de hacer esto en JavaScript?

No sin horriblemente subvertir/torcer/mal usar el paradigma existente. Recomiendo tomar un enfoque diferente para implementar lo que sea que pretendas.

Answer 3

Un patrón común es el siguiente: se crea

Un constructor temporal, que hereda de prototipo del constructor de los padres. El prototipo del constructor hijo se establece en una instancia del constructor temporal.

function inherits(Child, Parent) { 
    var Tmp = function() {}; 
    Tmp.prototype = Parent.prototype; 
    Child.prototype = new Tmp(); 
    Child.prototype.constructor = Child; 
} 

dentro del constructor del niño y luego tienes que llamar al constructor del antecesor:

function Child(a, b, c) { 
    Parent.call(this, a, b); 
} 

inherits(Child, Parent); 

// add prototype properties here 

Dentro de esta llamada de función, this hará referencia al nuevo objeto que se crea cuando se llama new Child(), por lo tanto, cualquiera que sea la inicialización se realiza dentro de Parent, se aplica al nuevo objeto que pasamos.

Answer 4

Otra forma sería deshacerse de la herencia de clase (pero no basada en clases) que implica el uso de constructor.

Utilice Object.create junto con Object.defineProperties. Esto se basa en el sistema de herencia nativo basado en prototipos que JavaScript sigue internamente.

Puede encontrar más información sobre las especificaciones de MDN y ECMAScript.

Sin embargo, estos métodos solo funcionan en los navegadores compatibles con ECMAScript 5. Esto excluye IE8 y anteriores. Afortunadamente, IE9 lo admite y al igual que el resto de los principales navegadores. A largo plazo, creo que este sería el camino a seguir.