Dicas de JavaScript avançado, prototipagem e JSOO

[Don Benatti 28]

Fala pessoal, fiquei bastante tempo sem entrar no fórum por conta de muitas ocupações, mas vou tentar contribuir pelo menos uma vez por dia quando eu puder, hoje gostaria de falar um pouco sobre como programar em JavaScript orientado a objetos.

 

Ao falar sobre JSOO, logo alguém dirá: "JavaScript não é uma linguagem orientada a objetos", na verdade orientação a objetos não se trata de linguagem, é como religiões, existem várias, mas aplicam a mesma doutrina. Posso afirmar aqui para vocês que eu consigo cozinhar e fazer minhas receitas em casa de modo orientado a objetos, logo o que precisamos é aplicá-la no que estamos fazendo e ver o que as linguagens nos dá para chegarmos a este objetivo.

 

Em JS não temos o termo classe, mas podemos criar o esqueleto de uma usando prototype, podemos trabalhar no design das nossas "classes" de diversas formas, algumas dessas maneiras nos permite economizar memória no dispositivo do usuário, outras nem tanto.

 

Para iniciarmos nosso esqueleto que será instanciado, podemos simplesmente declarar uma variável e colocar em seu valor uma função

var ImastersForums = function() {};

Temos ai nosso primeiro modelo de esqueleto, mas ainda não o instanciamos, nosso próximo passo será criar nossos métodos e atributos e para isso usaremos "prototype", vou mostrar três formas de trabalhar com prototype pensando em design.

 

Primeiro modelo de design é criar nossos métodos e atributos separadamente:

ImastersForums.prototype.forums = [];

ImastersForums.prototype.addForum = function(name) {
    this.forums.push(name);
}

No método "addForum" podemos usar "this", isso quer dizer que estamos dentro do escopo.

 

Segundo modelo de design será a criação de métodos e atributos que mais nos lembra uma "classe":

ImastersForums.prototype = {
    forums: [],
    
    addForum: function(name) {
        this.forums.push(name);
    }
}

O terceiro modelo é o mesmo acima, mas usando "lambda":

(window.ImastersForums = function(select) {}).prototype = {
    forums: [],
    
    addForum: function(name) {
        this.forums.push(name);
    }
}

Agora já temos nosso esqueleto, o próximo passo será instanciá-lo, mas antes vamos colocar mais uns métodos:

var ImastersForums = function() {};

ImastersForums.prototype = {
    forums: [],
    
    addForums: function() {
        if (arguments.length) {
            for (var i = 0; i < arguments.length; i++) {
                this.addForum(arguments[i]);
            }
        }
    },
    
    addForum: function(name) {
        this.forums.push(name);
    },
    
    count: function() {
        return this.forums.length;
    },
    
    toJSON: function() {
        return JSON.stringify(this.forums);
    }
}

Nossa instancia se chamará imastersForums 

var imastersForums = new ImastersForums();

// Adicionando alguns fóruns
imastersForums.addForums("javascript", "java", "android");

/*
* Vendo o resultado
* 
* ["javascript", "java", "android"]
* Total de 3 fóruns!
*/
alert(imastersForums.toJSON() + "\nTotal de " + imastersForums.count() + " fóruns!");