Javascript Orientado a Objeto / OOP

[Bruno_Quaresma 3]

Javascript Orientado a Objeto / OOP

 

Há algum tempo estive procurando uma forma de organizar melhor meus códigos JS e uma maneira de encapsular os dados para que eles não fossem acessados de maneira errônea e que pudessem tornar minhas aplicações vulneráveis.

 

Como assim?

Um ótimo exemplo é quando usando o Firefox e ativamos o complemento Firebug. Através do console escrevendo o simples comando console.info(variável) ele nos irá passar todas as informações sobre aquela variável, podendo também alterar os valores.

 

Exemplo:

Tenho o seguinte código no meu script js.

var valor_produto = 15.00;

Vamos imaginar que esse valor de R$15,00 seja passado para um gateway de pagamentos e-commerce.

 

Como ele não está devidamente encapsulado e protegido isso abre uma brecha em nossa aplicação. Podemos facilmente passar o valor errado para nosso gateway e comprar o produto por apenas R$1,00.

 

No console do firebug é só digitar:

valor_produto = 1.00;

E como me proteger?

É simples, comece a programar orientado a objeto

 

Primeiro Passo – Criando uma CLASSE

 

Para criar uma classe em javascript não tem complicação.Criamos do mesmo modo como criamos funções.

function Produto(){
    //Scopo da Classe Produto
}

E para instância-la basta apenas digitar

var produto = new Produto();

Para criar métodos e propriedades PÚBLICAS… eu disse PÚBLICAS utilize o this na frente.

function Produto(){

   this.nome;
   this.preco;

   this.get_nome = function(){
        return this.nome;
   }

   this.set_nome = function(nome){
        this.nome = nome;
   }

}

Para acessá-las é só instanciar o objeto e fazer uma referência direta a propriedade ou método.

var shampoo = new Produto();
shampoo.nome = 'Shampoo Seda';
shampoo.preco = 15.00;

alert(shampoo.get_nome());

 

Porém lembre que propriedades públicas podem ser facilmente acessadas e alteradas e poderíamos fazer o seguinte ataque pelo console do firebug:

shampoo.preco = o_valor_que_eu_quiser;

Agora para evitar estes problemas vamos declarar as propriedades de modo PRIVADO, PRIIIIVAAADO e fazer com que só a classe tenha acesso as suas informações e que caso seja necessário passar estes valores que seja através de um método. Para isso iremos utilizar apenas o var e para funções apenas o function normalmente.

function Produto(){

   var nome;
   var preco;

   function metodo_privado(){
        alert('Método Privado');
   }

   this.get_nome = function(){
        return this.nome;
   }

   this.set_nome = function(nome){
        this.nome = nome;
   }

}

Se tentarmos acessar diretamente a propriedade não iremos conseguir. Ex:

var shampoo = new Produto();

//Irá gerar um erro pois a propriedade nome só é enxergada dentro da classe Produto
shampoo.nome = 'Shampoo';

//Correto, criamos um método público que passe a informações nome para nosso objeto
shampoo.set_nome('Shampoo');

Se você ainda não entendeu a utilidade espere mais um pouco que logo após a explicação do construtor ficará mais fácil.

 

O javascript infelizmente não tem suporte a construtores porém podemos facilmente criar uma técnica semelhante. Vamos incrementar nossa classe com tal técnica passando para ele a propriedade de nome e preço.

function Produto(nome_produto,preco_produto){

   //ATRIBUÍMOS OS VALORES LOGO AQUI EM CIMA
   var nome = nome_produto;
   var preco = preco_produto;

   function metodo_privado(){
        alert('Método Privado');
   }

   this.get_nome = function(){
        return this.nome;
   }

   this.set_nome = function(nome){
        this.nome = nome;
   }

   //E CHAMA-MOS AQUI EM BAIXO AS FUNÇÕES QUE DEVEM SER EXECUTADAS NA CRIAÇÃO DO OBJETO
   // COMO EXEMPLO O metodo_privado()

   metodo_privado();

   //OU ATÉ MESMO O get_nome(), REPARE QUE POR ELE SER UM MÉTODO PÚBLICO O THIS VEM NA FRENTE

   this.get_nome(); 

}

Então para aqueles que não entenderam o tópico antes do construtor vamos a mais um exemplo

var shampoo = new Produto('Shampoo',15.00);

//SE TENTARMOS ALTERAR O PREÇO ELE IRÁ GERAR UM ERRO E PROTEGER NOSSA APLICAÇÃO
shampoo.preco = 1.00;

Simples assim. Espero que tenham gostado, quaisquer dúvidas é só comentar.

 

Retirado de Jounk - Blog / Javascript Orientado a Objeto / OOP

[Vadio 13]

pois é no entanto sua aplicação não ficou segura só com isso

 

fazer verificação na parte do servidor é mais q uma obrigação só JS não adianta nada

 

vamos supor que façam um post direto pra onde esses dados serão enviados

utilizando o valor q ele quiser passar

 

pronto já era.. você vendeu um shampoo de 15reais por 1...

 

resumindo.. só isso não significa q sua aplicação é segura.

[Bruno_Quaresma 3]

Com certeza, mas nesse tópico tratei exclusivamente do Front-End :D

 

Mas com toda certeza é importante validar os dados no Back-End

[JCMais 75]

Na realidade mesmo no frontend ainda não está seguro, basta adicionar um breakpoint na parte do código que efetua a mudança/leitura desse valor, e setar o valor que quiser. Existem alguns outros pontos tecnicamente incorretos, como por exemplo, javascript não possui classes, mas entendo que você citou isto apenas para tornar mais prático. :P

 

Aliás, parabéns pela iniciativa. :thumbsup:

 

--

 

Tópico movido:

Javascript :seta: Artigos, Tutoriais e Matérias (Javascript / DHTML)

[Bruno_Quaresma 3]

kkkkk, realmente. Obrigado :D

[angelorubin 142]

Parabéns pela explicação, somente complementando com um artigo sobre JavaScript OO (inglês) para ajudar:

 

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript