Propriedades Estáticas

Propriedades e métodos estáticos são aqueles que podem ser acessados de qualquer lugar do script, sem a necessidade de instanciar a classe. Considera-se que o JavaScript não suporta esse conceito, já que não possui classes, mas pode-se também simular.

Funções não deixam de ser objetos, e objetos podem ter propriedades. Veja no exemplo:

function Person() {  }
        Person.staticMethod = function() { alert("Método Estático"); }
        Person.staticMethod(): // "Método Estático"
        var me = new Person();
        me.staticMethod(); // Retornará erro

Também muito simples, e bem útil em certas ocasiões. Podemos tomar como exemplo a Mootools, com o Class e Class.empty. Class é um construtor, e Class.empty é um método estático.

Herança

A herança é outro conceito que o JavaScript não implementa formalmente, necessitando das famosas gambiarras. Quando bem empregada, permite uma grande reutilização de código, criando classes derivadas a partir de uma superclasse (classe-mãe), herdando todas as propriedades.

Existem vários tipos específicos de pessoas, em vários sentidos. Brasileiros, portugueses, americanos, vendedores, médicos, desenvolvedores… Mesmo sendo mais específicos, todos eles têm características comuns de uma pessoa. Assim, o construtor Brazilian é derivado de Person.

Primeiro, vamos criar os construtores com suas propriedades.

function Person() {
                this.eyes = 2;
                this.speak = function(message) {
                        alert(message);
                }
        }
        function Brazilian() {
                this.birthCountry = "Brasil";
        }

Pessoas falam, e isso se aplica também aos brasileiros, mas nem todas as pessoas nasceram no Brasil. Assim, a superclasse (ou super-construtor) é Person, e somente nela definimos as propriedades comuns.

Para fazer a herança existem vários métodos, mas vou explicar agora somente o que considero o mais simples e usado. Basta criar uma instância do “super-construtor” no protótipo do construtor derivado, assim:

Brazilian.prototype = new Person;

Todo o construtor Person foi instanciado como parte de Brazilian. Agora podemos criar um objeto Brazilian e utilizar tanto as propriedades específicas (definidas no próprio construtor) quanto as do “super-construtor”.

var me = new Brazilian("Julio Greff");
        alert(me.birthCountry); // "Brasil"
        me.speak("Olá!"); // "Olá!"

Existem outros métodos para herança, mas como já disse ficarão para outra oportunidade. E a série sobre JavaScript Orientado a Objetos se encerra aqui! Qualquer correção ou sugestão será bem vinda, basta comentar! Até!

Posts Relacionados

• JavaScript Orientado a Objetos – Parte 2
• JavaScript Orientado a Objetos – Parte 1
• PHP Orientado a Objeto
• Estendendo Objetos DOM
• Estendendo o JavaScript

A Propriedade prototype

No JavaScript, toda função construtora possui uma propriedade chamada Function.prototype. Essa propriedade nos permite adicionar e, em certos casos modificar, propriedades ou métodos de um construtor, após sua definição. Diferente de PHP, por exemplo, podemos adicionar propriedades durante a execução.

function Person() {}
        var me = new Person();
        alert(me.eyes); // undefined
        Person.prototype.eyes = 2;
        alert(me.eyes); // 2

Como se pode notar, na primeira tentativa não tínhamos a propriedade definida. Após isso, adicionada em tempo de execução, já temos a propriedade definida.

Também há certas exceções na utilidade do Function.prototype. A primeira delas é que essa propriedade não consegue sobrescrever qualquer coisa que já tenha sido definida no construtor. Não podemos definir uma propriedade no construtor e depois mudar seu valor através de Function.prototype.

function Person() { this.eyes = 2; }
        var me = new Person();
        alert(me.eyes); // 2
        Person.prototype.eyes = 1;
        alert(me.eyes); // 2, continuo tendo 2 olhos

Para resolver esse problema e continuar usando Function.prototype, podemos definir a propriedade fora do construtor usando a técnica, e sobrescrevê-la da mesma maneira.

function Person() {}
        Person.prototype.eyes = 2;
        var me = new Person();
        alert(me.eyes); // 2
        Person.prototype.eyes = 1;
        alert(me.eyes); // 1

Outro pequeno problema é quando definimos objetos ou arrays através dessa propriedade. Veja:

function Person() {}
        Person.prototype.uses = ["watch", "glasses"];
        var me = new Person();
        var you = new Person();
        me.uses.push("hat");
        alert(me.uses); // ["watch", "glasses", "hat"]
        alert(you.uses); // ["watch", "glasses", "hat"]

Com base no exemplo, pode-se ver que o array é compartilhado, assim como todos os seus itens. Moral da história: é preferível definir tudo no próprio construtor, ou então definir apenas métodos através de Function.prototype.

Encapsulamento

Formalmente, encapsulamento ainda não existe no JavaScript, mas podemos usar esse recurso disfarçado.

Tudo o que criamos dentro de nossos construtores está no escopo público, ou seja, pode ser acessado de dentro do construtor ou do restante do script. Uma maneira de simular variáveis privadas, que só podem ser acessadas de dentro do construtor e por seus métodos, é utilizando o escopo local. Lembra-se de quando falei sobre escopo de variáveis?

function Person() {
                this.public = "Variável Pública";
                var private = "Variável Privada";
                this.publicMethod = function() {
                        alert(this.public);
                        alert(private);
                }
                var privateMethod = function() {
                        alert(private);
                }
                this.callPrivate = function() {
                        alert(private);
                }
        }
        var me = new Person();
        alert(me.public); // "Variável Pública";
        alert(me.private); // undefined
        me.publicMethod();
        me.privateMethod(); // Retornará erro
        me.callPrivate();

O exemplo acima exemplifica bem de onde cada tipo de variável pode ser acessado. Já o uso de variáveis protegidas (protected) necessitam de mais gambiarras, mas isso fica pra outra vez.

Quanto ao uso de métodos privados só existe um pequeno problema: não é possível acessar propriedades ou métodos públicos diretamente. Para isso, é necessário modificar o escopo em que a função executada, através de Function.bind (função user-defined).

function Person() {
                this.public = "Variável Pública";
                var bindPublic = function() {
                        alert(this.public);
                }.bind(this);
                bindPublic();
        }
        var me = new Person();

Para testar, lembre-se de copiar a função Function.bind!

E a parte 2 se encerra aqui. Volto na parte 3 pra falar mais um pouco sobre programação orientada a objetos. Até lá!

Posts Relacionados

• JavaScript Orientado a Objetos – Parte 3
• JavaScript Orientado a Objetos – Parte 1
• PHP Orientado a Objeto
• As Vantagens de Prototype
• Estendendo Objetos DOM

Depois de muito tempo, resolvi editar essa série e repostá-la aqui. Aprendi um pouco mais sobre o assunto através da prática, corrigi alguns erros – muito criticados na época – e adicionei algumas informações que achei pertinentes. Como dá pra ver, o permalink continua o mesmo, e a versão antiga da série já não está mais no ar. Espero que as correções e adições possam esclarecer bem o assunto.

Alguns Conceitos

Antes de começarmos a colocar as mãos em código, vamos aprender um pouco de teoria. O JavaScript não é uma linguagem orientada a objetos completamente desenvolvida, e não implementa alguns conceitos nativamente, como herança e variáveis públicas e privadas, dependendo de “gambiarras” para sua implementação.

A base da programação orientada a objetos é, logicamente, objetos. Um objeto é uma abstração de algo real (uma mesa, um carro, a janela do navegador, um elemento HTML…). Esse objeto possui sua própria estrutura de dados, encapsulada em seu próprio escopo. Esses dados podem ser tipos primitivos (Strings, Arrays, Numbers, Booleans…), funções (as quais chamaremos de métodos, quando dentro dos objetos) e até outros objetos.

Para criarmos um objeto, precisamos da definição de sua estrutura de dados, criada através de uma matriz. Essa matriz é chamada de classe, ou construtor no JavaScript.

De começo creio que é o suficiente. Quando for necessário, explicarei outros conceitos, como encapsulamento, polimorfismo, herança…

Criando Construtores

Em nosso querido JavaScript, um construtor é apenas uma função comum, que é instanciada em uma variável. Essa instância se faz através da palavra-chave new, indicando a criação de um novo objeto.

function Person() {}
	var me = new Person();

A palavra-chave new, entretanto, só é necessária caso quando a função não retorna o objeto recém-criado. Para retorná-lo, usamos a palavra-chave this.

function Person() { return this; }
	var me = Person();

O this, apesar de estar no construtor, refere-se ao próprio objeto. Ele será bem usado mais a frente.

Definindo Propriedades

Propriedades, ou atributos, são os dados que ficam encapsulados no escopo do objeto. Como dito mais acima, essas propriedades podem ser tipos primitivos, funções ou outros objetos.

Seguindo a idéia de algo real, toda pessoa tem um nome. Vamos dar um nome à pessoa que “criamos”.

var me = new Person();
	me.name = "Julio Greff";

No código acima, definimos um nome apenas ao objeto me. Outros objetos criados a partir de Person não terão a mesma propriedade. Isso é útil em nosso caso, já que somente eu me chamo “Julio Greff”, e só você possui seu nome.

A mesma técnica não é tão útil quando precisamos definir uma propriedade para todos os objetos criados a partir de determinado construtor. Já pensou se tivéssemos, por exemplo, que definir o número de olhos para cada pessoa que criarmos? Para evitar retrabalho, definimos as propriedades comuns a todos objetos dentro do construtor.

function Person() {
		this.eyes = 2;
	}

No exemplo, usei this para me referir ao próprio objeto, ou seja, todo objeto criado terá a propriedade eyes igual a 2.

Mesmo definindo uma propriedade comum a todos objetos, podemos modificar alguma propriedade de um objeto em particular sem que os outros sejam afetados. Por exemplo, no caso de um cíclope, caolho ou alguma anomalia genética grave.

var me = new Person();
	var cyclop = new Person();
	cyclop.eyes = 1;
	alert(cyclop.eyes); // 1
	alert(me.eyes); // 2, inalterado

Como você deve ter notado – ou pelo menos devia – o acesso às propriedades é feito através do . (ponto), assim como é feita a sua definição.

Desde quando a humanidade é a humanidade, toda pessoa recebe um nome quando nasce. Também pode receber um apelido, uma roupa, ou qualquer outra coisa. Com os objetos acontece algo parecido. Na “concepção” de cada objeto, podemos passar parâmetros para a função construtora, assim como faríamos como outra função qualquer. Esses parâmetros podem, mais tarde, vir a se tornarem propriedades do objeto.

function Person(name) {
		this.name = name;
	}

Dessa maneira, quando criamos o objeto, já podemos dar um nome à pessoa, sem a necessidade de fazê-lo depois da criação do objeto.

Definindo Métodos

Assim como características (propriedades), pessoas também têm comportamento: andar, falar, comer… Objetos também têm comportamento, e esses comportamentos são chamados de métodos. Métodos nada mais são do que funções que são executadas no escopo de algum objeto.

Para criarmos métodos, procedemos da mesma forma com que criamos propriedades. Simples, rápido e indolor:

function Person() {
		this.speak = function(message) {
			alert(message);
		}
	}

Para executarmos métodos também procedemos da mesma forma com que acessamos propriedades, com a diferença de que estamos chamando uma função.

me.speak("Olá!"); // "Olá!"

Essa não é a única maneira de criar métodos, mas é a mais simples, mais organizada e mais eficiente. As outras formas usam propriedades apontando para uma função criada normalmente, dentro ou fora do objeto.

Para a parte 1 é o suficiente. Tenha uma boa digestão e logo volto com mais! Até lá!

Posts Relacionados

• JavaScript Orientado a Objetos – Parte 3
• JavaScript Orientado a Objetos – Parte 2
• PHP Orientado a Objeto
• Estendendo Objetos DOM
• Estendendo o JavaScript

Executar funções em determinada ordem, como filas de requisições, através de uma classe. Resumindo, é isso o que faz a classe Chain, da Mootools, e nesse post veremos como funciona e também como implementar essa funcionalidade em suas próprias classes.

Seqüenciando Funções

Para criar uma seqüência de funções, basta instanciar a classe Chain. Após isso, já podemos adicionar funções à seqüência para podermos chamá-la quando necessário.

Adicionamos funções à uma seqüência através do método Chain.chain, passando como parâmetro a função a ser adicionada à seqüência.

var myChain = new Chain();
myChain.chain(function() {
	alert("Primeira Função");
});
myChain.chain(function() {
	alert("Segunda Função");
});

O método Chain.callChain é quem chama a próxima função da seqüência. Quando o método é executado, a função é executada e então removida da seqüência.

myChain.callChain(); // "Primeira Função"
myChain.callChain(); // "Segunda Função"

Caso necessário, podemos limpar todas as funções de nossa seqüência através do método Chain.clearChain.

Implementando em Classes

Obviamente, Chain é muito mais útil quando usado dentro de uma função. Classes não deixam de ser uma função, e possuem muito mais poder. É nelas onde a utilização de Chain acontece na própria Mootools.

Após a implementação de Chain em alguma classe, podemos utilizar seus métodos.

var myClass = new Class({
	"initialize": function() {},
	"execute": function() {
		this.callChain();
		if(this.chains.length > 0) this.execute();
	}
});
myClass.implement(new Chain);
var myChain = new myClass();
myChain.chain(function() {
	alert("Primeira Função");
});
myChain.chain(function() {
	alert("Segunda Função");
});
myChain.execute();

Como no exemplo acima, também podemos utilizar a variável Chain.chains, que é o array que contém todas as funções na seqüência. Não é necessário se preocupar muito com ele, já que a classe faz todo o necessário. O utilizei acima somente para não criar um loop infinito.

Essa classe também já é implementada na utilização de efeitos, para encadear vários efeitos subseqüentes. Também muito útil para se criar uma fila de requisições Ajax, ou algo do gênero. Vou ficando por aqui, até!

Posts Relacionados

• Mootools – Eventos
• Mootools – Classes
• Mootools – Options
• Ajax com a Mootools
• Funções em Diferentes Escopos

O que faz?

A classe Options define as opções passadas pelo usuário para alguma classe. Essa definição é feita sobrescrevendo os valores padrão (caso esses sejam definidos pelo usuário) e os mantendo quando nenhuma opção correspondente é passada.

Lógico, nada muito espetacular. Isso poderia ser feito através da função $merge, da própria Mootools. Mas há mais que isso. Além de definir opções, a classe Options também vasculha-as em busca de opções que comecem com “on”, e automaticamente adicionam-as como um evento, caso a classe Events esteja implementada. É mais que apenas um $merge disfarçado…

Implementando

Mais uma vez, antes de podermos utilizar essa classe extra, devemos implementá-la em nossa classe. Novamente, utilizamos o método Class.implement.

Caso você queira utilizar o suporte a eventos, também implemente a classe Events, na mesma declaração.

myClass.implement(new Options, new Events);

Definindo Opções

Antes de tudo, é necessário definir as opções que serão utilizadas por padrão. Essas opções padrão devem estar em this.options, sendo this a nossa classe.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function() {}
});

Para fazer a “escolha” das opções, basta utilizar o método Options.setOptions, levando como parâmetro as opções que devem sobrescrever as opções padrão. Após a chamada ao método, todas as opções estarão disponíveis em this.options. Se o usuário definir opções que não estão definidas como padrão, elas também serão adicionadas.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function(options) {
		this.setOptions(options);
	}
});
var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true
});
mySlideShow.options["startSlide"]; // 0
mySlideShow.options["wrap"]; // true, também foi adicionada

Definindo Eventos

Não há diferença quanto a adicionar opções comuns ou eventos, os dois são adicionados da mesma maneira.

var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true,
	"onStart": function() {}
});

No caso de eventos, não é necessário definir uma opção padrão, já que os eventos são chamados apenas se estiverem definidos, não causando erros. Caso você considere necessário, pode-se usar Class.empty como padrão. Class.empty é apenas uma função vazia, apenas para não precisarmos nos preocupar em definir algo a ser executado.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0,
		"onStart": Class.empty
	},
	"initialize": function(options) {
		this.setOptions(options);
		this.fireEvent("onStart", this.options.startSlide, 10);
	}
});

Assim como as outras classes, a própria biblioteca faz grande uso de Options. É o espírito da reutilização, tanto na própria biblioteca quanto para os desenvolvedores. Até a próxima!

Posts Relacionados

• Mootools – Eventos
• Mootools – Classes
• Mootools – Chain
• Ajax com a Mootools
• Mootools – Menu Sanfona

A classe Events permite que você defina eventos para suas próprias classes. Esses eventos podem ser chamados a qualquer momento, e também podem ser criados quantos eventos forem necessários.

Um evento pode receber qualquer nome, mas considera-se uma boa prática criar eventos que comecem com “on”, como “onClick”, “onStart”, “onEnd”… O “on” é requerido apenas se você desejar utilizar eventos juntamente com a classe Options (pretendo escrever sobre ela também).

Implementando

Para podermos utilizar a classe Events, primeiro é necessário implementá-la na classe em que se deseja utilizá-la. Isso é feito através do método Class.implement. Veja:

var SlideShow = new Class({
	"initialize": function() {}
});
SlideShow.implement(new Events);

Chamando Eventos

Após a implementação, ainda temos que fazer as chamadas aos eventos. Para isso, utilizamos o método Events.fireEvent, que agora pode ser chamado do escopo da classe, ou seja, this.fireEvent. Esse método recebe os seguintes parâmetros:

• type: O tipo do evento (“onClick”, “onDrag” ou qualquer outro)
• args: Argumentos a serem passados à função. Pode ser apenas um argumento ou um array contendo vários.
• delay: Tempo, em milissegundos, que o evento deve esperar para ser disparado.

var SlideShow = new Class({
	"initialize": function() {
		this.fireEvent("onStart", null, 10);
	},
	"nextSlide": function() {
		this.currentSlide += 1;
		this.fireEvent("onChangeSlide", this.currentSlide, 10);
	}
});

Definindo Eventos

Para definir funções a serem executadas em determinado evento, utilizamos o método Events.addEvent. O método recebe como parâmetros o tipo do evento e a função que deve ser executada.

var mySlideShow = new SlideShow();
mySlideShow.addEvent("onStart", showSplashScreen);

Note que os eventos podem ser adicionados tanto na definição da classe quanto em uma de suas instâncias, como fizemos acima.

Eventos podem ter muita utilidade, e a própria biblioteca também faz bastante uso deles, como acontece nas classes Ajax e Fx. Basta ter criatividade. Até a próxima!

Posts Relacionados

• Mootools – Options
• Mootools – Chain
• Mootools – Classes
• Ajax com a Mootools
• Scroller Made in Mootools

Por que Classes?

Classes têm algumas vantagens sobre funções independentes. Podemos modificar e reusar suas funcionalidades sem precisar modificar o código original, criar objetos que armazenam informações dentro de seu próprio escopo e também utilizar métodos relacionados ao objeto. Além disso, com classes é possível utilizar menos código em mais situações.

Um bom exemplo da implementação de classes é a própria Mootools. Boa parte do que há na biblioteca é baseado em classes, estendendo-as, modificando-as e herdando-as. Funções não são muito utilizadas pela Mootools, pois o poder da utilização das classes é muito maior.

Definindo Classes

Para definir classes com a Mootools, utilizamos o construtor Class. O construtor leva como parâmetros os métodos e atributos da classe, através de uma literal de objeto.

var Vehicle = new Class({
	"initialize": function(features) {
		// Salvando as características no escopo do objeto
		this.features = features;
		this.position = 0;
	},
	"goForward": function(distance) {
		this.position += distance;
	},
	"goBackward": function(distance) {
		this.position -= distance;
	}
});

Na classe acima, definimos três métodos: initialize, goForward e goBackward. O método initialize deve estar presente em cada definição de classe, por ser o método que é chamado quando a classe é instanciada.

Após termos criado nossa classe, podemos instanciá-la sempre que necessário.

var myVehicle = new Vehicle({"color": "red"});
// Utilizando os métodos do objeto
myVehicle.goForward(100);
// Acessando propriedades
myVehicle.position; // 100

Estendendo Classes

Como em outras linguagens orientadas a objeto, as classes podem ser estendidas para criar funcionalidades mais específicas. No caso da classe Vehicle, podemos estendê-la para criar tipos de veículos específicos, como carros e motos. Para isso, usamos o método Class.extend, levando como parâmetro os novos métodos e propriedades que a classe deve conter.

var Car = Vehicle.extend({
	// O novo método de inicialização
	"initialize": function(features) {
		// Inicializamos a classe pai dentro da classe atual
		this.parent(features);
		this.wheels = 4;
		this.gear = 0;
	},
	"gearUp": function() {
		if(this.gear < this.features.gears) this.gear++;
	},
	"gearDown": function() {
		if(this.gear > -1) this.gear--;
	}
});
var Motorcycle = Vehicle.extend({
	"initialize": function(features) {
		this.parent(features);
		this.wheels = 2;
		this.gear = 0;
	},
	"gearUp": function() {
		if(this.gear < this.features.gears) this.gear++;
	},
	"gearDown": function() {
		if(this.gear > 0) this.gear--;
	}
});

Através do código acima, criamos duas novas classes baseadas em Vehicle, Car e Motorcycle, cada uma com suas características específicas, mas herdando os métodos da classe pai.

Assim como podemos criar tipos específicos de veículos, também podemos criar tipos específicos de carros e motos, bastando estender essas duas classes. Não há limite para extensões.

Além de estender outras classes, também é possível estender a própria classe, implementando novos métodos. Note que não é necessário recriar o método Class.initialize, já que não o modificamos, apesar de ser possível se necessário.

var Car = Car.extend({
	"horn": function() {
		this.soundHorn = true;
	}
});

Implementando Novos Métodos

Ao estender classes, o método Class.extend cria uma nova cópia da classe, não alterando-a de maneira alguma. Isso é facilmente percebido, já que, em nosso exemplo, myVehicle.gearUp não funciona, pois a classe não foi modificada quando criamos as outras extensões.

Para modificar a classe sem criar uma cópia sua e sem precisar modificar código algum, a Mootools usa o método Class.implement, recebendo como parâmetros os métodos e propriedades a serem implementados.

Modificando o último exemplo, poderíamos trocar Car.extend para Car.implement, eliminando a cópia desnecessária que criamos.

Car.implement({
	"horn": function() {
		this.soundHorn = true;
	}
});

Vale lembrar que utilizando Class.implement não temos acesso ao método this.parent, já que não estamos criando uma outra classe, somente implementando propriedades. Nesse caso, não há classe pai.

O uso de classes permite muito mais do que reutilização de código. Poupa-se tempo tanto no desenvolvimento quanto no uso do código e esse uso torna-se muito mais intuitivo, já que aproxima a programação de objetos reais. Por essas e outras que sou adepto dessa maravilhosa biblioteca. Até a próxima!

Posts Relacionados

• Mootools – Eventos
• Mootools – Chain
• Mootools – Options
• Ajax com a Mootools
• JavaScript Orientado a Objetos – Parte 3

Executando

Para chamar um método no escopo de outro objeto, utilizamos o método Function.apply. O objeto Function pode ser qualquer função que será chamada no escopo que deve ser passado como primeiro parâmetro. Vamos a um exemplo:

var Class = function() {

 this.text = "Escopo da Classe";

}

Class = new Class();

var showText = function() {

 alert(this.text);

}

// Escopo Global

showText(); // undefined

// Escopo de Class

showText.apply(Class); // "Escopo da Classe"

O resultado da primeira chamada a função é obvio: não há this.text definido. Quando aplicamos a mesma função no escopo de Class, o retorno sai como esperado.

O método Function.apply também pode receber um segundo parâmetro, contendo os parãmetros que devem ser passados à função. Esse parâmetro deve ser obrigatoriamente um array, e deve ser definido na ordem em que os parâmetros precisam ser recebidos.

var Class = function() {

 this.text = "Também podemos passar parâmetros:";

}

var Class = new Class();

var showText = function(text) {

 alert(this.text + " " + text);

}

showText(); // undefined undefined

showText.apply(Class, ["Viva!"]); // "Também podemos passar parâmetros: Viva!"

Também há o método Function.call, que tem a mesma função de Function.aplly. A diferença está em como os parâmetros para a função são definidos. Em Function.apply, eles são passados como um array, e em Function.call são passados como vários argumentos, sem a necessidade de estarem dentro de algum array.

var Class = function() {

 this.text = "Também podemos passar parâmetros:";

}

var Class = new Class();

var showText = function(text) {

 alert(this.text + " " + text);

}

showText(); // undefined undefined

showText.call(Class, "Eba!"); // "Também podemos passar parâmetros: Eba!"

Vinculando

O Function.apply resolve os problemas de muita gente, mas não todos os problemas. Imagine a seguinte situação (pela qual eu também já passei), onde precisamos recuperar uma variável da classe de dentro do objeto XMLHttpRequest:

function() {

 this.msgToShow = "Completo!";

 XMLHttpRequest.onreadystatechange = show;

}

var show = function() {

 alert(this.msgToShow);

}

E agora? Precisamos executar a função show no escopo da classe, e não no escopo do XMLHttpRequest. Poderíamos usar o Function.apply, mas ele executaria a função assim que fosse chamado. A solução é vincular a função ao escopo do objeto XMLHttpRequest. A solução mais comum é o uso de closures:

function() {

 var self = this;

 this.msgToShow = "Completo!";

 XMLHttpRequest.onreadystatechange = function() {

 	show.apply(self);

 }

}

var show = function() {

 alert(this.msgToShow);

}

Nos aproveitamos da capacidade do JavaScript de compartilhar variáveis entre funções, e armazenamos o escopo correto na variável self, que utilizamos para aplicar a função.

Reutilização

Tudo funcionando dentro do esperado, mas não estamos pensando na parte mais bela da programação orientada a objetos: a reutilização. Teríamos que criar closures toda vez em que uma execução em outro escopo fosse necessária. Pra isso existe o método Function.bind, criado para vincular a função a qualquer escopo. A função é a seguinte:

Function.prototype.bind = function() {

 var self = this, args = $A(arguments), scope = args.shift();

 return function() {

 	return self.apply(scope, args.concat($A(arguments)));

 }

}

var $A = function(object) {

 var array = [];

 for(var i = 0; i < object.length; i++)

 	array[i] = object[i];

 return array;

}

Esse método cria o closure e retorna uma função que executa o que for necessário. A função $A só serve para transformar os argumentos em um array. Modificando nosso script anterior:

function() {

 this.msgToShow = "Completo!";

 XMLHttpRequest.onreadystatechange = show.bind(this);

}

var show = function() {

 alert(this.msgToShow);

}

Quem não trabalha com POO, eventos ou timeouts talvez não tenha se deparado com nenhum problema deste tipo, mas duvido que alguém desse ramo nunca tenha recebido um “undefined” sem querer…

Posts Relacionados

• Criando Funções Dinamicamente
• Escopo de Variáveis
• Mootools – Eventos
• Usando “With”
• JavaScript Orientado a Objetos – Parte 2

Vou falar do pouco que sei sobre a aplicação real da
POO. O melhor lugar pra se implementar a POO são os objetos DOM, pois eles já tem uma classe criada, e o JavaScript nos permite extendê-la.
Vamos ao primeiro exemplo: um menu expansível. Normalmente, usamos algo próximo disso:

menu.onclick = function() { toggle($("menu"); }

Descontando a parte obstrusiva, nada parece errado, e na verdade não está. Toda vez que clicamos no menu, ele executa a função toggle, que executaria outra função para saber se o menu estava expandido ou não (geralmente uma verificação na classe CSS). Mas podemos melhorar.

Consideremos tudo como um objeto. Nesse caso, o menu seria um objeto. Portanto, ele precisa de uma função construtora para podermos cria-lo. Precisaremos dos seguintes atributos e métodos:

• element: o elemento DOM que representa o menu.
• contracted: atributo booleano, indica se o menu está contraído ou não.
• toggle(): nossa querida função que irá contrair e expandir o menu.

Poderíamos adicionar expand() e contract(), mas vamos resumir. Vejamos a função construtora:

function Menu(element) {
  this.element = element;
  this.element.onclick = function() { this.toggle(); }; // obstrusivo, dá um desconto né?
  this.element.className = "contract-menu"; // já escondemos o menu
  this.contracted = true; // e indicamos que ele está escondido
  this.toggle = function() {
    if(this.contracted === true) {
	  this.element.className = "expand-menu";
	  this.contracted = false;
	}
    else {
	  this.element.className = "contract-menu";
	  this.contracted = true;
	}
  }
}

Peraí, não aumentamos o tamanho de código? Sim, mas a maravilha é exatamente essa. Você precisará desse código apenas uma vez, e alguns caracteres criam vários e vários menus com as mesmas propriedades. Um var menu = new Menu($("elemento")) resolve tudo. E também poderíamos reutilizar o código fazendo sub-menus, ou adicionando novos métodos em tempo de execução, caso sejam necessários. Interessante, não?

A implementação em objetos DOM é extremamente simples. Tudo que utilizar um estado (variáveis de instância) pode partir pra orientação a objeto. Agora vamos para algo menos visível.

Uma requisição em Ajax tem variáveis de instância. Também muito simples depois que se pega a essência da coisa. Vejamos a função construtora:

function Ajax(url /*, options*/) { // simples, sem opções por agora
  this.url = url;
  var requestResponses = reqAjax(this.url); // variável privada
  // a função acima já usa POO, não vamos nos preocupar com ela dessa vez
  // ela retorna { responseText, responseXML, errors }
  this.getResponseText = function() {
    if(typeof requestResponses.errors != "undefined") this.throw(requestResponses.errors);
    else return requestResponses.responseText;
  }
  this.getResponseXML = function() {
    if(typeof requestResponses.errors != "undefined") this.throw(requestResponses.errors);
    else return requestResponses.responseXML;
  }
  this.throw = function(errors) {
    if(typeof errors == "undefined") return requestResponses.errors;
	else throw("Requisição retornou erros: " + errors);
  }
}

Só uma função extremamente simplória e não muito útil. Só pra fazer uma demonstração (estava tentando pensar em algo mais elaborado, mas fugiu da mente). Realmente deseja um desafio? Tente criar a função reqAjax com tudo que ela tem direito. Um quebra-cabeça, literalmente.

Quer mais? Bom, então recomendo ler um pouco sobre Ruby. Sim, é server-side, não tem nada a ver, mas a orientação a objeto é realmente interessante. Extremamente recomendado.

Eu até queria postar mais alguns exemplos, mas só vieram a mente coisas muito grandes, e não ando com tempo pra isso. Podem deixar sugestões nos comentários, aí eu volto e edito o post. Fui!

Posts Relacionados

• Controle de Erros em JS
• Caindo na Real
• Estendendo Objetos DOM
• Lançada a Mootools 1.2
• Fila de Requisições em Ajax

Como já expliquei, o prototype não sobrescreve nada que já esteja definido, portanto, é necessário prestar atenção em um pequenino detalhe.

Há uns tempos atrás, tive um certo problema com a construção do FrameWorX. Não conseguia acessar uma variável que estava fora de uma função que estava usando, mas ainda dentro da classe. Na tentativa-e-erro (leia-se POG), descobri como acessa-la: o prototype. O problema foi que ele não sobrescrevia o valor false. Portanto, nada podia ser definido.

O Princípio

O princípio para o prototype sobrescrever algo é o seguinte: criar esse “algo” com ele mesmo.

function errado() {

  this.variavel = "";

}

errado.prototype.variavel = "Outra coisa"; // Assim não dá certo!

function certo() {

  // Não tem nada definido aqui dentro!

}

certo.prototype.variavel = "Outra coisa"; // Assim funciona!

Esse método pode ser usado dentro de métodos privados para acessar variáveis públicas (meu eterno problema foi resolvido!), funções autônomas (aquelas que não tem nome, tipo window.onload = function() {…}) ou para criar toda a classe.

Criando a Classe

Podemos criar a classe inteira com o prototype. Os métodos e propriedades podem ser adicionados através dele, e inclusive o corpo do construtor, e nada ficaria dentro da definição da função.

Nesse caso, nem sempre é uma boa. Não sei quanto à questão do desempenho, mas o código fica sensivelmente maior, às vezes desnecessariamente.

Espero que não tenham ficado dúvidas. Qualquer coisa, comente!

Posts Relacionados

• Funções em Diferentes Escopos
• JavaScript Orientado a Objetos – Parte 2
• Escopo de Variáveis
• Mootools – Chain
• Estendendo o JavaScript