9

Comecei a estudar programação e JavaScript há 3 meses, mas até agora só na técnica. No entanto percebi que facilita muito entender o conceito de orientação a objeto. Já sei que objetos na programação são como objetos da vida real que interagem entre si com suas funções e atributos para criar algo.

Já entendi os conceitos de objetos nativos, objetos declarados, window e DOM.

Só preciso entender o conceito de classe e como criar classes no JS.

E, afinal, que vantagens as classes vão dar que só os objetos não vão dar?

O que são instâncias? São os próprios objetos da classe?

Porque o método toString() está presente nos objetos Object e Function ao mesmo tempo?

1 Resposta 1

12

Em primeiro lugar devo dizer que o JavaScript não tem, ainda, Classes. Isso mudará com a implementação do ES6.

Algumas bibliotecas como o MooTools usam a possibilidade que o JavaScript tem para estender o prototype para criarem a funcionalidade que uma Classe tem em linguagens de programação clássicas.

A ideia de Classes é muito útil quando queremos partilhar certas funcionalidades que são partilhadas por pedaços de código diferente. Usando o construtor new cria-se uma nova instância da Classe que fica livre do seu original no sentido em que podêmos mudá-la sem alterar o seu original/protótipo.

O mesmo não acontece com objetos. Fazendo var objA = objB estamos a criar uma referência para o mesmo objeto e mudando um mudamos o outro.

É contudo possível criar um novo objecto com herança, ou seja defenir um objeto ou função que do qual criamos uma nova instância. Exemplo:

    function Pessoa(nome, idade) {
        this.nome = nome;
        this.idade = idade;
        this.nascido = function () {
            var anoAtual = new Date();
            return Math.abs(anoAtual.getUTCFullYear() - this.idade);
        }
        this.saudacao = 'Olá ' + nome;
    }
    var a = new Pessoa('António', 30);
    console.log(a.nascido()); // 1984
    console.log(a.saudacao); // Olá António
    alert(a.nascido() + '\n' + a.saudacao);

Porém isto não é uma Classe mas sim uma nova instância de um objeto.

Repare que:

typeof Pessoa // dá 'function'
typeof new Pessoa() // dá 'object'

Outra diferênça entre objetos e Classes é a possibilidade de ter métodos privados (e aqui refiro-me às Classes que o ES6 vai trazer e ao que o MooTools introduziu já em 2009).

Exemplo de Classe ES6:

class Car {
    constructor(make) { // conceito novo em Javascript, para iniciar a Classe
        this.make = make;
      this.currentSpeed = 25;
    }

    printCurrentSpeed(){ // método da Classe
          console.log(this.make + ' is going ' + this.currentSpeed + ' mph.');
    }
}

Agora que temos uma Classe podemos usá-la para criar um nova Classe que é uma extenção/continuação desta:

class RaceCar extends Car { // semelhante à herança do prototype
    constructor(make, topSpeed) {
        super(make); // usando a palavra super chamamos o contrutor da Classe pai desta nova
        this.topSpeed = topSpeed;
    }

    goFast(){
          this.currentSpeed = this.topSpeed;
    }
}

let stang = new RaceCar('Mustang', 150);

stang.printCurrentSpeed(); // velocidade atual: Mustang is going 25 mph.
stang.goFast(); // chamar o método que acelera à velocidade máxima
stang.printCurrentSpeed(); // velocidade máxima: Mustang is going 150 mph.

Exemplo (ES6): http://www.es6fiddle.net/i14nv13e/

Esta funcionalidade e possibilidade de acrescentar novas funcionalidades, chamar métodos da Classe pai e métodos privados são caracteristica das Classes. Desta maneira pode fazer um código mais DRY com Classes que têm partes communs e outras Classes que importam essa funcionalidade comum sem ter de re-escrever o código.

O mesmo exemplo usando uma classe MooTools (que pode ser usado em código atual):

var Car = new Class({
    initialize: function (make) {
        this.make = make;
        this.currentSpeed = 25;
    },

    printCurrentSpeed: function () {
        console.log(this.make + ' is going ' + this.currentSpeed + ' mph.');
    }
})

var RaceCar = new Class({ //inheritance
    Extends: Car,
    initialize: function (make, topSpeed) {
        this.parent(topSpeed)
        this.topSpeed = topSpeed;
    },

    goFast: function () {
        this.currentSpeed = this.topSpeed;
    }
})

jsFiddle: http://jsfiddle.net/yc52LL7s/

2

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 .