Herança de JavaScript para iniciantes

Código reutilizável é algo muito útil e grandes aplicativos seriam muito difíceis de alcançar sem ele. Mas como o JavaScript ainda não tem os melhores recursos de OOP, é um pouco incomum como herdar uma classe filha de uma classe pai para reutilizar seus métodos e propriedades. Vou tentar mostrar a você como você pode facilmente obter classes filhas em JavaScript e também verificar se uma classe é realmente uma classe e uma classe filha realmente é uma classe filha de seu pai.

Vamos começar:

Comentei um pouco a fonte para torná-la mais fácil de entender. Primeiro, vamos criar uma classe básica em javascript:

// parent class
        function pet() {
            // privileged property  
            this.name = 'Nyan';

            // privileged function
            this.getName = function() { return this.name; }

            // privileged function
            this.setName = function(_name) { this.name = _name; }
        }   

        // public method
        pet.prototype.whatPet = function() {
            return 'Im a meme cat!';
        }

Nada de especial aqui. Temos alguns métodos e propriedades privilegiados e um método público.

Agora vamos passar para sua nova classe filha

// child class magic
    function dog() {
        // call parent constructor
        pet.call(this);
                // override parents name-property
        this.name = 'Ceasar';
    }

    // is child of pet
    dog.prototype = new pet();
    // uses its own constructor
    dog.prototype.constructor = dog;

    // override public method: whatPet
    dog.prototype.whatPet = function() {
        return 'Im a flying superdog';
    }

Vamos tentar!

var myPet = new pet();

    document.write(myPet.whatPet()+' | My name is: '+myPet.getName()+'<br />');
    myPet.setName('Gandalf');
    document.write(myPet.whatPet()+' | My name is: '+myPet.getName()+'<br />');

    document.write('<br />');

    var mySecondPet = new dog();
    document.write(mySecondPet.whatPet()+' | My name is: '+mySecondPet.getName()+'<br />');
    mySecondPet.setName('Spot');
    document.write(mySecondPet.whatPet()+' | My name is: '+mySecondPet.getName()+'<br />');

    document.write('<br />');

    // Is myPet an instance of class pet?
    document.write('Is myPet instance of class pet: '+(myPet instanceof pet)+'<br />');
    // Is myPet an instance of class dog?
    document.write('Is myPet instance of class dog: '+(myPet instanceof dog)+'<br />');

    document.write('<br />');

    // is mySecondPet an instance of class pet?
    document.write('Is mySecondPet instance of class pet: '+(mySecondPet instanceof pet)+'<br />');
    // is mySecondPet an instance of class dog?
    document.write('Is mySecondPet instance of class dog: '+(mySecondPet instanceof dog)+'<br />');

Nada de especial, apenas atribuir nossas novas classes recém-criadas pete dog. Produzimos seu nome e tipo, reatribuímos o nome usando o método público e verificamos novamente. A parte mais interessante aqui é definitivamente a operadora. Esta pequena peça nos permite verificar se uma variável é uma instância de uma determinada classe. No nosso caso, seria , mas seria . , que é uma instância de nossa classe filha , seria gerada na classe pet e dog.setName()instanceofmyPet instanceof pettruemyPet instanceof dogfalsemySecondPetdogtrue

Resultado

Im a meme cat! | My name is: Nyan
Im a meme cat! | My name is: Gandalf

Im a flying superdog | My name is: Ceasar
Im a flying superdog | My name is: Spot

Is myPet instance of class pet: true
Is myPet instance of class dog: false

Is mySecondPet instance of class pet: true
Is mySecondPet instance of class dog: true

jsFiddle Demo