Confused about the correct form of Inheritance in Javascript

Question

I am studying ways to apply Object Orientation in Javascript. I realized that there are several ways to do Inheritance in Javascript. I did the one that I thought was simple and worked. But is it really within the standards? Is it correct?

Follows the Code:

    function humano(){
        var nome;
        this.pensar = function(){
            return "Estou pensando";
        }

    }

    function animal(){
        this.comer = function(){
            return "Vou COMER!";
        }
    }


    humano.prototype = new animal();

    var pablo = new humano();
    pablo.nome = "Pablo";

    console.log(pablo.pensar());
    console.log(pablo.comer());
    console.log("Meu nome é " + pablo.nome);

Studying further, I have now arrived at the following code for Inheritance, would this be an advanced form of inheritance in Javascript? (Obs.: The extra properties created were to test the passage of the properties by inheritance)

    var obj = {};
    var coisa = {
        nome: 'Rafael',
        idade: '35'
    };

    obj.y = 55;

    Object.defineProperty(obj,'x',{value: 1, writable: false, enumerable: false, configurable: true});

    Object.defineProperty(obj,'x',{get: function(){ return obj.y}});

    Object.defineProperty(Object.prototype,"extend",{
        writable: true,
        enumerable: false,
        configurable: true,
        value: function(o){

            var names = Object.getOwnPropertyNames(o);

            for(var i = 0; i < names.length; i++ ){
                if(names[i] in this) continue;

                var desc = Object.getOwnPropertyDescriptor(o,names[i]);

                Object.defineProperty(this,names[i],desc);
            }
        }
    })

    obj.extend(coisa);
    coisa.extend(obj);

What is the best way? Thank you

Answer 1

Like said Renan, there is no "correct" way, and this solution works well in your example. But I would like to show another that solves a common problem of your solution. The problem occurs when the constructor of the "superclass" ¹ expects a mandatory parameter. For example:

function Animal(caracteristicas) {
    this.classe = caracteristicas.classe
    this.patas = caracteristicas.patas
}
Animal.prototype = {
    comer: function() {}
}

function Humano() {
    // ...
}
Humano.prototype = new Animal({
    classe: "mamíferos",
    patas: 2
});

In the above example, to display an object Humano.prototype it is necessary to pass the parameters to the constructor as object. It will give error if you do not pass, because the constructor code tries to access the properties of this object. Of course it is possible to handle this error within the constructor Animal, but it is not a generic solution.

There is another way to create an object that has the method comer (therefore, an object that inherits from Animal.prototype) without invoking the constructor, avoiding the problem:

function Humano() {
    // ...
}
Humano.prototype = Object.create(Animal.prototype);
var pessoa = new Humano();
pessoa.comer(); // funciona!

This is a more flexible way of working the inheritance, because it does not depend on the invocation of the builders. If your prototype chain is long and several constructors have parameters that can cause the problem I mentioned, consider using this method.

---

^{(1) It is not exactly superclass in JS, since the language uses prototypical heritage.}

Answer 2

How you’re using it is right.

It might be interesting to work out a few details. For example, it can make the name internal property and thus be part of the human prototype:

function humano(nome) {
    this.nome = nome; 

So avoid doing

var pablo = new humano();
pablo.nome = "Pablo";  // aqui a propriedade "nome" é local ao pablo, e não a outros humanos

and can do only

var pablo = new humano('Pablo');

The same applies to what he’s eating, for example.
Passing food as argument here:

function animal(comida) {
    this.comer = function () {
        return "Vou comer " + comida + "!";
    }
}

then pablo.comer() will give more interesting answer.

Could still make this.comida a method that keeps what he eats. For example:

function animal() {
    this comida = function (comida){
        this.comer = 'Eu gosto de ' + comida;
    }
}

Take a look at the example below:

function Humano(nome) {
    this.nome = nome; 
    this.pensar = function () {
        return "Estou pensando";
    }

}

function Animal() {
        this.comida = function (comida){
            this.comer = 'Eu gosto de ' + comida;
        }
}

Humano.prototype = new Animal();
var pablo = new Humano('Pablo');
var coelho = new Animal();

pablo.comida('Lasanha');
coelho.comida('Cenoura');

console.log(pablo.pensar());
console.log(pablo.comer);
console.log("Meu nome é " + pablo.nome);
console.log(coelho.comer);

We usually use large letter at the beginning of a class name. This should be the case Humano and Animal.