Skip to main content
3 de 4
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/

O problema de se fazer isso em JavaScript é que - pelo menos até o EcmaScript 5 (a versão atualmente mais suportada pelos browsers) - essa linguagem não possui classes! Enquanto em PHP, ou Java, C#, etc "classe herda de classe" e "objeto instancia classe", em JavaScript "objeto herda de objeto".

E daí?

Pode parecer um detalhe teórico sem muita importância (amplificado pelo fato de JavaScript "fingir" que suporta OO Clássica), mas tem uma significância prática muito precisa: o objeto herdado não possui uma cópia dos atributos do objeto original, ambos compartilham os mesmos atributos! Isso significa que se o atributo do objeto pai for mutável, e você tentar alterá-lo no objeto filho, você estará mudando o mesmo objeto.

Outra consequência desse modo de herança (que aliás é chamada "herança prototípica") é que não dá pros atributos da "subclasse" herdarem o valor padrão dos atributos da "superclasse" - é necessário uma instância específica da "superclasse" para que a herança seja possível de fato:

function Superclasse(foo) {
    this.foo = (typeof foo == "undefined" ? "bar" : foo);
}

function Subclasse() { }
Subclasse.prototype = new Superclasse("baz");

var obj = new Subclasse(); // Não herda de "Superclasse", mas de uma instância
                           // específica de "Superclasse"
console.log(obj.foo); // baz

Nesse exemplo simples a solução é óbvia: não passar o parâmetro "baz" no construtor do protótipo (deixá-lo com o valor padrão) e fazer com que o construtor de Subclasse chame o construtor de Superclasse. Mas em situações mais complexas é preciso ter cuidado, em especial pelo fato desse protótipo ser um objeto completo, podendo ser acessado, ter seus métodos chamados, etc.

Essa minha resposta a outra pergunta sobre o assunto aborda outros problemas em potencial com a herança em JavaScript. Talvez devido a essa natureza confusa, não sei, foi decidido que o EcmaScript 6 daria suporte apropriado a classes, tal como exemplificado na resposta do phb. Mas até lá...

Como fazer então?

Você pode fazer do modo "tradicional" (i.e. imitando a herança clássica) ou do modo "explícito" (deixando claro o que está herdando de que). Eu pessoalmente prefiro sempre o modo explícito, mas muitas vezes uso o tradicional por questões de força maior (há algum tempo atrás esse método tinha até melhor performance no Chrome do que o explícito).

"Construtores" e new

Se você chama uma função f qualquer usando a palavra-chave new, as seguintes coisas acontecem:

  • Um objeto novo é criado;
  • Seu protótipo passa a ser f.prototype (que a propósito não é o protótipo de f!);
  • A função f é chamada, usando esse novo objeto como sendo o this;
  • O retorno da função é:
    • ignorado, se não for do tipo object (!) e o new retorna esse novo objeto; ou:
    • retornado, se for do tipo object, ignorando o this recém-criado (!!).

Confuso? Um pouco, mas se seguir a "fórmula mágica" tudo parece funcionar bem:

// Cria uma função com o papel de "construtora"
function Animal(nome) {
    this.nome = (typeof nome == "undefined" ? "Anônimo" : nome);
    //return 42;      // Não retorne nada
}
// "prototype" é o protótipo dos objetos criados por esse construtor
Animal.prototype.reino = "Animalia";
Animal.prototype.descricao = function() {
    return this.nome + " é um membro do reino " + this.reino;
}

function Cachorro(nome, cor) {
    Animal.call(this, nome);
    this.pelos = cor;
}
Cachorro.prototype = new Animal(); // O protótipo dos cachorros é uma instância de animal
Cachorro.prototype.familia = "Canidae";
Cachorro.prototype.descricao = function() {
    return this.nome + " é um membro do reino " + this.reino + 
           ", família dos " + this.familia + ". Seu pelo é " + this.pelos;
}

function Calopsita(nome, cor) {
    Animal.call(this, nome);
    this.penas = cor;
}
Calopsita.prototype = new Animal(); // idem, mas note que é uma instância diferente
Calopsita.prototype.ordem = "Psittaciformes";
Calopsita.prototype.descricao = function() {
    return this.nome + " é um membro do reino " + this.reino + 
           ", ordem dos " + this.ordem + ". Suas penas são " + this.penas;
}

// Criar as "classes" pode ser difícil, mas instanciar é super fácil
var animais = [
    new Cachorro("Sebastian", "branco"),
    new Calopsita("Rex", "amarelas"),
    new Animal("pombo que pousou na minha janela")
];
for ( var i = 0 ; i < animais.length ; i++ )
    document.body.innerHTML += "<p>" + animais[i].descricao() + "</p>";

Se você quiser estender uma "classe", pode fazê-lo mesmo se já existirem "instâncias" da mesma, simplesmente modificando o objeto que foi criado como protótipo:

Calopsita.prototype.clade = "Dinossauria";

Object.create

Quando você chama Object.create, um novo objeto é criado, com o protótipo informado (pode usar null se não quiser nenhum protótipo, mas para equivalência com um objeto literal, use Object.prototype) e opcionalmente com um conjunto de descritores de propriedades. Simples e direto:

// Literal de objetos (mais simples; seu protótipo é Object.prototype)
var animal = {
    nome: "Anônimo",
    reino: "Animalia",
    descricao: function() {
        return this.nome + " é um membro do reino " + this.reino;
    }
};

// Object.create (o chato são esses "descritores de propriedades"...)
var cachorro = Object.create(animal, {
    familia: { value:"Canidae" },
    descricao: { value: function() {
        return this.nome + " é um membro do reino " + this.reino + 
               ", família dos " + this.familia + ". Seu pelo é " + this.pelo;
    }}
});

var calopsita = Object.create(animal, {
    ordem: { value: "Psittaciformes" },
    descricao: { value: function() {
       return this.nome + " é um membro do reino " + this.reino + 
              ", ordem dos " + this.ordem + ". Suas penas são " + this.penas;
    }}
});

// Instanciar, no entanto, é bastante verboso...
var animais = [
    Object.create(cachorro, { nome: { value:"Sebastian" }, pelo: { value: "branco" } }),
    Object.create(calopsita, { nome: { value:"Rex" }, penas: { value:"amarelas" } }),
    Object.create(animal, { nome: { value:"pombo que pousou na minha janela" } })
];
for ( var i = 0 ; i < animais.length ; i++ )
    document.body.innerHTML += "<p>" + animais[i].descricao() + "</p>";

Da mesma forma, membros adicionados no protótipo refletem nos objetos herdados:

calopsita.clade = "Dinossauria";

Etc?

Essas não são as duas únicas formas de estender um objeto em JavaScript: há outros padrões de construção, alguns mais simples e outros mais complexos, mas todos acabam recaindo em uma dessas duas formas (new ou Object.create). Não compensa detalhar mais o assunto aqui, mesmo por que herança já é complexa o bastante nas linguagens clássicas, em JavaScript mais ainda, melhor estruturar seu código via composição sempre que possível, só usando herança quando estritamente necessário.

Estendendo tipos nativos

Ok, depois dessa volta toda, sua dúvida original parece nem ter sido abordada: dá pra estender tipos nativos do JavaScript, como números, strings e arrays? A resposta é... sim, mas evite fazer isso rsrs!

O fato da herança ser prototípica torna trivial acrescentar novos campos e métodos nos tipos básicos, basta modificar o campo prototype dos seus construtores (que, reiterando mais uma vez, não é o protótipo dos mesmos, mas sim o protótipo dos objetos criados por eles via new):

Number.prototype.quadrado = function() {
  return this * this;
};

document.body.innerHTML += (10).quadrado();

Isso é muito usado para estender os tipos básicos com funções úteis. Usado até demais. Abusado, eu diria. Na realidade, eu não confio em código algum que faça isso, pois nunca se sabe quais membros foram acrescentados/modificados, se algum sobrescreveu outro que já existia, etc. Isso polui o namespace, da mesma forma que variáveis globais poluiriam, de modo que eu pessoalmente não recomendo - por mais que a ideia seja útil (há maneiras melhores de uma linguagem suportar isso, ver os extension methods do C#).

A "segunda melhor coisa" seria, então, criar subtipos desses tipos básicos; algo que pareça com uma string, mas que seja construída de forma "especial" e só os objetos do seu mesmo tipo possuam os membros customizados. Tem jeito? Bom, eu próprio já me degladiei com essa ideia há um tempo atrás, e acabei por desistir, pois muito embora a princípio isso seja possível a construção dos tipos básicos de fato envolve muita "mágica". Ver por exemplo o caso de "usar ou não new ao construir um array", e como a situação muda quando se constrói uma string... De modo que ainda que seja um conceito útil, não é muito usado na prática, e talvez seja melhor que continue assim mesmo (se quiser que algum tipo customizado também tenha todos os métodos de Array, por exemplo, simplesmente copie-os para seu protótipo! Ver o conceito de mixins).

mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334