POO - Herencia

[opzina]

Alguien me podría indicar cómo podría realizar de otra manera la Herencia en el siguiente código:

Código Javascript:

var Person = (function(win, doc, undefined) {
    
    var Person = function(fname, lname) {
        this.fname = fname;
        this.lname = lname;
    };
 
    Person.prototype = {
        constructor : Person,
        toString : function() {
            return this.fname + " " + this.lname;
        },
        getName : function() {
            return this.fname;
        },
        setName : function(name) {
            this.fname = name;
        }
    };
 
    return Person;
 
 
})(window, document);
 
 
 
var User = (function(win, doc, undefined) {
    
    var User = function(role) {
        this.role = role;
    };
 
    User.prototype = {
        constructor : User,
        getRole : function() {
            return this.role;
        },
 
        setRole : function(role) {
            this.role = role;
        }
    };
 
    return User;
 
 
})(window, document);
 
// Aquí aplica la Herencia
User.prototype = new Person('Juan', 'Garcia');
 
var jc = new User('admin');
jc.setName('Juan Carlos');
 
console.log(jc);
 

Si tienen algun link, libro, para recomendar de JS y POO se los agradecería.

[Aijoona]

Por que necesitarias otra forma/manera?

[Nisrokh]

Yo me siento bastante cómodo utilizando este simple script:

Código Javascript:

/**
 * Simple JavaScript Inheritance
 * Inspired by base2 and Prototype
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
(function() {
    var initializing = false,
        fnTest = /xyz/.test(function(){xyz;})
            ? /\b_super\b/
            : /.*/;
    
    this.Class = function(){};
    
    Class.extend = function(prop)
    {
        var _super = this.prototype;
        
        initializing = true;
        var prototype = new this();
        initializing = false;
        
        for (var name in prop) {
            prototype[name] = typeof prop[name] == "function"
                && typeof _super[name] == "function"
                && fnTest.test(prop[name])
                ? (function(name, fn) {
                    return function() {
                        var tmp = this._super;
                        this._super = _super[name];
                        var ret = fn.apply(this, arguments);        
                        this._super = tmp;
                        
                        return ret;
                    };
                })(name, prop[name])
                : prop[name];
        }
        
        function Class() {
            if ( !initializing && this.init )
            this.init.apply(this, arguments);
        }
        
        Class.prototype = prototype;
        Class.prototype.constructor = Class;
        Class.extend = arguments.callee;
        
        return Class;
    };
})();
 

La propiedad "init" es el utilizada como constructor. Ejemplos:

Código Javascript:

var Person = Class.extend({
    init: function(isDancing){
        this.dancing = isDancing;
    },
    dance: function(){
        return this.dancing;
    }
});
 
var Ninja = Person.extend({
    init: function(){
        this._super( false );
    },
    dance: function(){
        // Call the inherited version of dance()
        return this._super();
    },
    swingSword: function(){
        return true;
    }
});
 
var p = new Person(true);
p.dance(); // => true
 
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
 
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class
 

Fuente: http://ejohn.org/blog/simple-javascript-inheritance/

Saludos.

[opzina]

Muchas Gracias por responder.

Iniciado por Aijoona

Por que necesitarias otra forma/manera?

Porque quiero tratar de ordenar el código JS, tener una mejor opción o alternativa ya probada y evitar usar alguna librería como Backbonejs. Por lo menos de momento.

-----------------------------

Acá les dejo unos cambios que hice sin utilizar métodos como los que plantea "Nisrokh". No se cuáles son las limitaciones de momento.

Ver princcipalmente la clase "Triangulo".

Código:

Código Javascript:

var Figura = (function(win, doc, undefined) {
    'use strict'
    
    var Figura = function(base, altura) {
        this.base = base;
        this.altura = altura;
    }
 
    
    Figura.prototype = {
            
        constructor : Figura,
        
        area : function() {
            return this.base * this.altura;
        },
        
        perimetro : function() {
            return ( (this.base * 2) + (this.altura * 2) );
        }
    };
    
    // Private
    var _perimetro = function(context) {
        return 'Perímetro';
    };
    
    return Figura;
    
})(window, document);
 
 
// Herencia, Polimorfismo y Sobrescritura -> ¿Cómo?
// class Circulo extends Figura {}; -> Java, PHP, etc.
 
var Circulo = (function(win, doc, undefined) {
    'use strict'
    
    var Circulo = function(radio) {
        this.radio = radio;
    } 
    
    Circulo.prototype = {
        constructor : Circulo,
        
        area : function() {
            return ( Math.pow( (Math.PI * this.radio), 2) );
        }
    };
    
    return Circulo;
    
})(window, document);
 
 
// Herencia
Circulo.prototype = new Figura(40, 80);
var circulito = new Circulo(5);
 
 
 
// Triangulo
var Triangulo = (function(win, doc, undefined) {
    'use strict'
    
    // Private Properties
    var name = "";
    
    // Constructor
    var Triangulo = function(base, altura, angulo, fname) {
        Figura.call(this, base, altura);
        
        // Set Private Property
        name = fname;
        
        // Set Public Property
        this.angulo = angulo;
        
        // Setters and Getters
        this.getName = function() {
            return name;
        }
        
        // Public Methods
        this.getAngulo = function() {
            return this.angulo;
        };
        
        // Sobreescritura ? - check
        // Si no esta este método se utiliza el de Figura
        this.area = function() {
            return ( (this.base * this.altura) / 2);
        },
        
        // Polimorfismo ? - check
        /*this.area = function(base, altura) {
            return ( (base * altura) / 2);
        },*/
        
        this.doSomething = function() {
            return _doSomethingFine();
        }
        
    } 
    
    // Private Methods
    
    var _doSomethingFine = function() {
        return 'Do something Fine';
    } 
    
    return Triangulo;
    
})(window, document);
 
// Herencia
Triangulo.prototype = new Figura();
var triangulo = new Triangulo(5, 8, 45, 'Nombre Completo');
console.log(triangulo)
console.log('Triangulo - Something => ', triangulo.doSomething());
console.log('Triangulo - Área   => ', triangulo.area());
console.log('Nombre-> ', triangulo.getName());
 

[Aijoona]

Tu implementación está rota, tenés una unica variable para multiples instancias (name):

Código Javascript:

var a = new Triangulo(10, 10, 60, 'a');
var b = new Triangulo(10, 10, 60, 'b');
 
a.getName(); // b
 

Te diría que te esfuerzes mas en entender como funciona JavaScript más que en manipularlo y aplastarlo para parecerse a otros lenguajes muy distintos.

Funciones privadas? Si algo es privado no lo accedas.
Polimorfismo? Si, un poco más laxo por falta de interfaces, pero igual de util.
Herencia? Si, hay mecanismos del lenguaje que lo permiten.
Override? Tan sencillo como declarar un metodo/property en el objeto actual o en algun prototipo mas cercano.

[opzina]

Override? Tan sencillo como declarar un metodo/property en el objeto actual o en algun prototipo mas cercano.

Figura.js

Código Javascript:

var Figura = (function(win, doc, undefined) {
    'use strict'
    
    var Figura = function(base, altura) {
        this.base = base;
        this.altura = altura;
    }
 
    
    Figura.prototype = {
            
        constructor : Figura,
        
        area : function() {
            return this.base * this.altura;
        },
        
        perimetro : function() {
            return ( (this.base * 2) + (this.altura * 2) );
        }
    };
 
    
    return Figura;
    
})(window, document);
 

Triangulo.js

Código Javascript:

var Triangulo = (function(win, doc, undefined) {
    'use strict'
    
    var Triangulo = function() {
        
    };
    
    Triangulo.prototype =  {
        constructor : Triangulo
        
        
    };
 
    return Triangulo;
    
})(window, document);
 

Main.js

Código Javascript:

Triangulo.prototype = new Figura(10, 20);
 
Triangulo.prototype.area = function() {
    alert('area triangulo');
}
 
var triangulo = new Triangulo();
 
triangulo.area();
 
console.log(triangulo)
 

¿De esta Manera Planteas hacer un Overwrait de un métodos?

Me recomiendas un libro o enlaces para ver todo eso que comentas.

[Aijoona]

Si definis el metodo area en Triangulo ya hiciste un override, ya que la instancia va llamar al codigo especifico de Triangulo en lugar del de Figura.

Graficamente el override seria como (vease metodo saludar):