44

Estou estudando JavaScript e vi algumas explicações que me deixaram com dúvidas. Aqui no StackOverflow vi várias perguntas sobre a possibilidade de se criar um classe abstrata em JavaScript.

Porém minha dúvida é a seguinte: É possível criar uma classe em JavaScript?

Estou perguntando isso porque estou usando como guia o site developer.mozilla encontrei a seguinte informação:

"A JavaScript é uma linguagem dinâmica orientada a objetos; tem tipos e operadores, objetos e métodos. Sua sintaxe vem das linguagens Java e C, por isso tantas estruturas dessas linguagens se aplicam a JavaScript também. Uma das principais diferenças é que o JavaScript não tem classes; em vez disso, a funcionalidade de classe é realizada por protótipos de objetos. A outra diferença principal é que as funções são objetos, dando as funções a capacidade para armazenar código executável e serem passadas como parâmetro para qualquer outro objeto."

A afirmação em negrito me deixou com essa dúvida, pois se trata de uma fonte confiável para estudos. O que entendi é que não existem classes, mas existem elementos que podem ser usados como classes.

Não sei se essa é a interpretação correta.

E mais, esse mesmo texto diz que o JavaScript é orientado a objetos, então tentei entender o porque da afirmação da não existência de classes estaria por ali.

Vejo muitos colegas de trabalho e profissionais afora que dizem que instanciaram classes em JavaScript, usaram tal classe para tal propósito em JavaScript.

Com isso quero entender, é correto afirmar que existem classes em JavaScript ou não?

6 Respostas 6

27

Eu acho que isto resolve a questão.

4.2.1 Objects

Even though ECMAScript includes syntax for class definitions, ECMAScript objects are not fundamentally class-based such as those in C++, Smalltalk, or Java. Instead objects may be created in various ways including via a literal notation or via constructors which create objects and then execute code that initializes all or part of them by assigning initial values to their properties.

É o que tem escrito na especificação, ou seja apesar de existir a sintax class os objetos em ECMAScript não são fundamentalmente baseado em classes.

Você programa orientado a objetos, tal como, mas internamente o comportamento de uma classe em Javascript (prototype-based) é diferente que em Java e C# (class-based). A principal diferença é que em Java e C# classe são entidades abstratas, ou seja, quando eu instancio um objeto, são criados de acordo com a especificação da classe, o objeto é concreto, mas a classe é algo abstrato. Em JS não, uma classe é também um objeto, ele existe e instancia do objeto é ligado a classe. Isso é ocorre através da cadeia de protótipos do JS.

Se você não tiver problemas com inglês este livro da serie You Don't Know JS pode sanar todas suas duvidas sobre classes e objetos em Javascript como também aprender mais sobre como a corrente de prototipos funciona em Javscript.

https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes

10
  • 1
    Perfeito, é isso mesmo.
    – bfavaretto
    Commented 15/01/2016 às 17:44
  • 4
    É. Você programa orientado a objetos, tal como, mas internamente o comportamento de uma classe em Javascript é diferente que em Java e C#. Acho que a principal diferença é que em Java e C# classe são entidades abstratas, ou seja, quando eu instancio um objeto, são criados de acordo com a especificação da classe, o objeto é concreto, mas a classe é algo abstrato. Em JS não, uma classe é também um objeto, ele existe e instancia do objeto é ligado a classe. Isso é decorrente da cadeia de prototipos do JS. Commented 15/01/2016 às 17:53
  • 2
    Acho esse comentário (que devia fazer parte da resposta) muito bom. Contudo não acho que JavaScript perde o direito de chamar Class ao que a ES6 adicionou à linguagem só porque não se comporta com linguagens clássicas.
    – Sergio
    Commented 15/01/2016 às 18:01
  • 3
    @Sergio Seu argumento é válido. De fato, o trecho citado da especificação não é normativo, ou seja, é apenas uma explicação sobre o funcionamento da linguagem. Se aceitarmos que "classe" não pressupõe um determinado tipo de implementação de herança, podemos usar o termo em JS. Mas eu pessoalmente acho confuso, e acho que a nova sintaxe nem deveria ter sido criada (vão me xingar por isso, hehe).
    – bfavaretto
    Commented 15/01/2016 às 18:05
  • 1
    Também acho que não @Sergio, na verdade acho que essa diferença tem um impacto pequeno no nosso dia-a-dia como desenvolvedor. É mais uma característica interna da linguagem na minha opinião. Mas que nos possibilita também encarar um determinado problema de um ponto de vista diferente pois a cadeia de prototype do JS é sutil e poderosa. Acho que posso dizer que em JS podemos fazer tudo que uma linguagem orientada a objeta clássica faz, e mais algumas coisas que elas não fazem. Commented 15/01/2016 às 18:05
24

Formalmente, JavaScript não tem classes. É sim uma linguagem orientada a objetos, mas que implementa herança prototípica (ver também). Mesmo assim, sempre existiram as funções construtoras, que acabam se comportando como classes. Provavelmente seu amigo está se referindo a uma dessas quando diz que criou uma classe. Por exemplo:

function Carro() {
    // inicializa o objeto
}
Carro.prototype.buzinar = function() {
    // implementar buzina aqui
}
var meuFusca = new Carro();
meuFusca.buzinar(); // funciona!

Isso cria um objeto que usa herança prototípica para ter acesso às propriedades e métodos que estiverem em Carro.prototype. É possível criar um objeto que herda a mesma coisa sem precisar invocar o construtor:

var meuFusca = Object.create(Carro.prototype);

Isso foi incluído apenas na versão 5 da especificação, por incrível que pareça – já que é mais próxima da forma tradicional de se implementar herança prototípica.

Na especificação atual da linguagem (chamada de ECMA-2015 ou ES6), foi introduzida a sintaxe com class (que até já era palavra reservada antes), porém ainda não foi implementada em todos os browsers, ou foi implementada com restrições (no Chrome, por exemplo, só funciona em strict mode; segundo a MDN, o Opera ainda não suporta a nova sintaxe, assim como o IE; Edge e Firefox já suportam). A resposta do Otto dá exemplos desse uso. O nosso exemplo de carro ficaria assim:

class Carro {
    constructor() { 
        // inicializa o objeto
    }

    buzinar() { // método da classe
        // implementar buzina aqui
    }
}

O resultado disso é o mesmo das formas que a linguagem já oferecia antes, pois a herança prototípica continua sendo utilizada. A versão com class é puro açúcar sintático, como o Maniero já tinha mencionado.

Portanto, é correto afirmar que JS possui classes? Sim e não. Rigorosamente falando, não, mas, na prática, sim, já que sempre foi possível trabalhar com algo que se comporta como classe, e agora é até possível usar a própria palavra-chave class.

1
17

Classes em JavaScript são introduzidas no ECMAScript 6 e são um sintático para herança existente baseada em protótipos, em JavaScript. A sintaxe para classes não introduz um novo modelo de herança de orientação a objetos em JavaScript. Classes em JavaScript provêm uma maneira mais simples e clara de criar objetos e lidar com herança.

Declarando classes

Uma maneira de definir uma classe é usando uma declaração de classe. Para declarar uma classe, tu deves usar a palavra-chave class seguida pelo nome da classe (aqui "Poligono").

class Poligono {
  constructor(altura, largura) {
    this.altura = altura;
    this.largura= largura;
  }
}

Expressões de Classes

Uma Expressão de Classe (class expression) é outra forma para definir classes. Expressões de Classes podem possuir nomes ou não (anônimas). O nome dado para uma expressão de classe é local ao corpo da classe.

// sem nome
var Poligono = class {
  constructor(altura, largura) {
    this.altura = altura; 
    this.largura= largura;
  }
};

// nomeada
var Poligono = class Poligono {
  constructor(altura, largura) { 
    this.altura = altura;
    this.largura= largura;
  }
};

fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Classes

Complementando temos uma pergunta parecida aqui mesmo de uma olhada, é um bom material para estudo: O que são classes, como utiliza-las, e no JavaScript?

14

JavaScript tem Classes sim. A linguagem sempre possibilitou Classes com algum engenho de código, mas nativamente isso foi introduzido com a ES6 (2015).

Um exemplo seria:

/**
 * Classes e herança
 * Example do http://www.es6fiddle.net/
 */
class Polygon {
  constructor(height, width) { // constructor
    this.name = 'Poligono';
    this.height = height;
    this.width = width;
  }

  sayName() { // método da classe
    console.log('Olá, eu sou um ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length=10) { // Possibilidade de ter valores por defeito em argumentos (introduzido também com a ES6)
    super(length, length); // chamar métodos da classe herdada
    this.name = 'Quadrado';
  }

  get area() { // método para calculo
    return this.height * this.width;
  }
}

let s = new Square(5);

s.sayName(); // => Olá, eu sou um Quadrado.
console.log(s.area); // => 25

console.log(new Square().area); // => 100

Este exemplo em cima ao vivo pode testar-se aqui: http://www.es6fiddle.net/ijfxrckq/

Até à versão ES6 de JavaScript era possivel criar/simular classes. Isso é possível porque é possivel criar novas instâncias com new que se pode aplicar a funções e objetos. Dessa maneira cria-se uma instância de um protótipo e escondendo alguns métodos dentro que não estão acessíveis a escopos exteriores estão reunidos os instrumentos para Classes.

Uma das bibliotecas que levou isso mais a fundo (já em 2006) foi o MooTools. Um exemplo seria:

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.
6
  • 11
    Mesmo em ES6 as classes são simuladas (mesmo com a nova sintaxe com class), o funcionamento é prototípico sempre.
    – bfavaretto
    Commented 15/01/2016 às 17:08
  • mano, numa outra pergunta feita com o título "O que são classes, como utiliza-las, e no JavaScript?", vc deu uma resposta assim: "Em primeiro lugar devo dizer que o JavaScript não tem, ainda, Classes." Aqui você está me dizendo que tem classes no javascript. Isso foi uma mudança na estrutura da linguagem? Se foi, tem como me explicar por favor? grato!
    – DiChrist
    Commented 15/01/2016 às 17:47
  • @DiegodeSouzaSilva exato, isto faz parte da nova versão da linguagem que foi lançada em 2015 e que está a ser implementada nos browsers e Node.js. Coloquei o link na resposta também.
    – Sergio
    Commented 15/01/2016 às 17:52
  • no comentário sobre valores padrões para variáveis, 'default' foi traduzido como 'defeito' e não 'padrão'
    – igrossiter
    Commented 20/01/2016 às 19:15
  • @igrossiter pois, em Portugal dizemos "por defeito" traduzindo "by default". Valores "padrão" também não é bem exato... hmmm a ver se me ocorre melhor tradução.
    – Sergio
    Commented 20/01/2016 às 19:18
14

EcmaScript 6 é a especificação mais recente do que se convencionou chamar de JavaScript tem classes.

Versões anteriores trabalham com protótipos que podem realizar o mesmo de uma forma diferente. Então elas podem ser usadas como se fossem classes.

Existem as duas formas de orientação a objeto, por classe e por protótipos. A linguagem atende todos os requisitos deste paradigma. Já fazia isto antes com protótipos e faz agora também com classes. Tem mais informações em diversas outras perguntas, como essa.

Outra pergunta relevante sobre o assunto específico para JS.

Podemos dizer que as novas classes são apenas açúcar sintático, já que é possível pegar um código ES 6 e traduzi-lo para versões mais antigas que são suportadas por diversos navegadores. As classes são substituídas por protótipos, ou seja, o modelo de classes segue o mesmo modelo dos protótipos, não foi introduzido nada semanticamente novo na linguagem.

Este processo chama-se transpilling e ocorre com outras linguagens como CoffeScript e TypeScript. Ele é muito comum com o JavaScript por ser a linguagem de programação universal da web.

TypeScript foi um pouco além na orientação a objetos e introduziu outras facilidades, como a genericidade. Tudo em cima do mesmo modelo básico do JS.

Não vou colocar exemplos porque está cheio nas outras respostas.

Veja também: Quais são as principais diferenças entre programação orientada a protótipos e programação orientada a classes?.

E de forma genérica: Qual a diferença entre uma classe e um objeto?.

Coloquei no GitHub para referência futura.

0
4

Aqui vão algums exemplos bem básicos, para se entender a lógica de forma bem simples, além dos jeitos já maneira já postadas:

Existem as chamadas Factory Functions ou funções fábricas. Elas funcionam como objetos. Um exemplo bem simples:

function Fruit(name) {
    this.name = name;
    this.color = "red";
}

Para trabalhar com elas:

var apple = new Fruit('Apple');
apple.color = "red";

Para adicionar chaves:

apple.prototype.info = function() {
    return this.color + ' ' + this.name;
};
apple.info // red apple

Ou você pode usar os próprios objetos literais:

var fruit = {
    name: "apple",
    color: "red",
    info: function () {
        return this.color + ' ' + this.name;
    }
}

Ou você pode mesclar os dois jeitos já ditos:

var fruit = new function() {
    this.name= "apple";
    this.color = "red";
    this.info = function () {
        return this.color + ' ' + this.name;
    };
}

Fonte

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 .