entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

herencia javascript, Cómo llamar al constructor padre en el constructor hijo?

Leyendo el libro de los princpios de el paradigma orientado a objetos de Nicholas C. Zakas, aplicando lo que explica tengo el problema de que no entiendo como llamar al constructor padreo en el constructor hijo:

Creo el objeto animal

function Animal(especie){
    this.especie = especie;
}
Animal.prototype.toString = function(){ return "Animal de la especie " + this.especie };

posteriormente creo el constructor de perro

function Perro(propietario){
    Animal.call(this, propietario); //aquí entiendo que se llama al constructor de animal
}

Aquí entiendo que es donde la herencia ocurre

Perro.prototype = Object.create(Animal.prototype, {
    constructor: {
        configurable: true,
        enumerable: true,
        value: Perro,
        writable: true
    }
});

aquí invoco al toString() de animal

Perro.prototype.toString = function(){
    var animalToString = Animal.prototype.toString.call(this) ;
     return animalToString + " y mi dueño es " + this.propietario + ".";
}

Creo un objeto perro y lo imprimo

var chucho = new Perro("Perro", "Juan");
console.log(chucho.toString());

y en la consola:

Animal de la especie Perro y mi dueño es undefined

Qué estoy haciendo mal para que no me imprima propietario?
Gracias de antemano.

1 Respuesta

2votos

Leonardo-Tadei Puntos227320

Hola Numen,

siempre me pareció más completo resolver la herencia con prototipos usando call()... te dejo un ejemplo de otra sintaxis que resuelve el mismo problema:

<!DOCTYPE html>
<html>
<head>
<title>Herencia en JavaScript</title>
<meta name="generator" content="Bluefish 2.2.3" />
<meta name="author" content="leo" />
<meta name="date" content="2014-09-10T14:47:54-0300" />
<meta name="copyright" content="Leonardo Tadei - GNU GPL V3 o superior"/>
<meta name="keywords" content="JavaScript, Herencia, Constructor"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<script type="text/javascript" >

function Animal (especie) {
  this.especie = especie || "";
}
Animal.prototype.toString = function(){ return "Animal de la especie " + this.especie };

function Perro (propietario) {
  this.base = Animal;
  this.base('perro');   
  this.propietario = propietario || "";
}
Perro.prototype.toString = function(){ return "Animal de la especie " + this.especie +" y el dueño es "+this.propietario };

a = new Animal('perro');

p = new Perro('Juan');

// Prueba
function probar(){
    document.getElementById('res').innerHTML = a;
}
function probar2(){
    document.getElementById('res').innerHTML = p;
}

</script>
</head>
<body>
    <h2>Probando Objetos JS</h2>
    <input type="button" onclick="javascript:probar();" value="Ejecutar" />
    <input type="button" onclick="javascript:probar2();" value="Ejecutar 2" />
    <br />
    <div id="res">@</div>
</body>
</html>

Fijate el artíuclo del MDN en dónde se explican estas cosas: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

Se explica tanto el mecanismo que estoy usando como el que vos proponés. Lo que parece que te está faltando en tu enfoque es que Perro tenga como atributo al propietario... ahora se los estás pasando a Animal, pero tiene en dónde recibirlo. No falla, pero el valor no queda y por tanto te da undefined.

Saludos!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta