28

No PHP, geralmente, podemos estender uma classe com o uso da palavra chave extends que aponde para a classe que terá métodos e atributos herdados.

Exemplo:

class MyObject extends ArrayObject
{
}

E se eu quissesse fazer isso em Javascript?

Como eu poderia, por exemplo, criar um objeto que herdasse os atributos do objeto String ou Number?

3

4 Respostas 4

40

Pode ver o exemplo abaixo de herança em que um Cão extende de um Animal e que especifica a "fala" com o ladrar:

E sim isto é JavaScript, ES6.

class Animal { 
  constructor(nome) {
    this.nome = nome;
  }
  
  fala() {
    console.log(this.nome + ' faz uma especie de barulho...');
  }
}

class Cao extends Animal {
  fala() {
    console.log(this.nome + ' ladra!');
  }
}

Exemplo: http://www.es6fiddle.net/if9wz3hd/

2
  • 10
    @ phb: deixa esta resposta aberta por favor. talvez por ignorância votaram negativo, mas vou pedir uma segunda olhada na resposta para o teu contributo ser melhor reconhecido. Se quiseres completar a resposta ainda melhor. E bem vindo ao Stack Overflow em Português! +1
    – Sergio
    Commented 2/10/2015 às 17:19
  • 4
    ES6 ainda não é suportado em todos os browsers. Mas reconheco que é uma resposta valida
    – Diogo
    Commented 3/10/2015 às 11:08
23

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).

1
  • Hehe :) excelente timming! +1
    – Sergio
    Commented 2/10/2015 às 21:15
11

Na verdade isso é possível, e com a mesma sintaxe que o PHP.

A novidade faz parte da ES6, a nova versão aprovada pela ECMAscript, mas ainda não é possível em todos os browsers (2015). Porém já é possível em Node.js.

Um exemplo seria assim:

class Animal {
  constructor(especie){
   this.especie = especie;
  }
  dizEspecie(){
    return this.especie;
  }
}

class Humano extends Animal {
  constructor(nome, especie){
    super(especie);
    this.nome = nome;
  }
  dizNome(){
    return this.nome + ' é um ' + super.dizEspecie();
  }
}

var paulo = new Humano('Paulo', 'Humano');

console.log(paulo.dizNome()); // Paulo é um Humano

Exemplo: http://www.es6fiddle.net/if9zwob3/

Em JavaScript de hoje, isso é possível também. Atravéz do prototype como já foi descrito noutras perguntas (1), (2), (3). A biblioteca que levou isso mais a fundo criando mesmo classes foi o MooTools.

O MooTools criou Classes já em 2007 e a API atual é assim:

var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});

var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        // calls initalize method of Animal class
        this.parent(age);
        this.name = name;
    }
});

var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.

Exemplo: http://jsfiddle.net/8w45upvL/

De maneira nativa pode fazer-se assim (entre outras):

function Animal(especie) {
    this.especie = especie;
    this.dizEspecie = function() {
        return this.especie;
    }
}

var Humano = function (nome) {
    this.nome = nome;
    this.dizNome = function () {
        return this.nome + ' é um ' + this.especie;
    }
}
Humano.prototype = new Animal('Humano');

var paulo = new Humano('Paulo');
var rui = new Humano('Rui');
var bobby = new Animal('canino');

console.log(paulo.dizNome()); // Paulo é um Humano
console.log(rui.dizNome()); // Rui é um Humano
console.log(typeof bobby.dizNome); // undefined
console.log(bobby.dizEspecie()); // canino

Exemplo: http://jsfiddle.net/wvbk3kb8/2/

2
  • 2
    +1 . Obrigado pelas informações. Estou animado a me aprofundar em javascript depois dessas respostas Commented 3/10/2015 às 16:02
  • @WallaceMaxters de nada. Fico contente que a resposta tenha referido os requisitos dos problemas.
    – Sergio
    Commented 3/10/2015 às 17:31
10

Sim, é possível estender usando prototype.

function Empregado(){
   this.nome = "";
}

function Gerente(){
   this.departamento = "";
}
Gerente.prototype = new Empregado
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .