// Boas Práticas | |
// 1. Orientação a objetos. | |
// Porque Orientar Javascript À Objetos é uma boa prática. | |
// Javascript não possui classes. E utiliza exclusivamente o conceito de objetos. | |
// Sua herança segue o padrão prototipado. Ou seja, nenhum objeto é criado do nada. | |
// Tudo deriva de alguma coisa. | |
// Apesar de JavaScript não ter classes. É possível realizar implementações que simulam o mesmo comportamento. | |
// Abaixo temos um construtor que recebe uma string como parâmetro. Vale lembrar que JavaScript é uma | |
// linguagem fracamente tipada. Ou seja, uma variável pode assumir qualquer valor. | |
// Também tenha em mente que tudo no JavaScript é um objeto. Inclusive uma função. | |
// O método apresentado abaixo é baseado no formato de Herança Clássica ou pré-ECMAScript 5. | |
// NOTA: Procure sempre utilizar a notação de função nomeada e não função declarada. | |
var Car = function(model) { | |
// Como o JavaScript não implementa o conceito de classe. Também não existe o conceito de privacidade ou níveis de acesso que linguagens com OO híbridas | |
// como o Java utilizam. | |
// Ainda assim, é possível definir propriedades da seguinte forma. | |
// Repare que 'this' é uma referência ao próprio contexto, no caso 'this' se refere ao próprio objeto a ser criado. (Mas existem exceções) | |
this.model = model; | |
this.color = "silver"; | |
this.year = "2012"; | |
// Agora que temos nossas propriedades com seus valores predefinidos. Podemos definir também métodos para essa função. | |
// Com o método definido abaixo é possível obter os valores de modelo. | |
this.getInfo = function () { | |
return this.model + " " + this.year; | |
}; | |
}; | |
// Temos nosso construtor definido. Agora podemos construir nosso objeto. | |
var carro = new Car("Honda NSX"); | |
// Com isso podemos chamar o método getInfo da seguinte forma. | |
carro.getInfo(); // Retorna "Nissan GT-R 2012"; | |
// No Javascript, como dito anteriormente, a herança é feita de forma prototipada. Vamos introduzir uma nova classe que herdará de Car. | |
var SuperSport = function(gears) { | |
this.gears = gears; | |
this.getInfo = function() { | |
return this.model + ", " + this.gears + " marchas" + " " + this.year; | |
}; | |
}; | |
SuperSport.prototype = new Carro("Lamborghini Diablo"); | |
var supers = new SuperSport("6"); | |
supers.getInfo(); // Retorna "Lamborghini Diablo 2012"; | |
alert(supers.gears); // Mensagem com "6"; | |
// Com isso todos os métodos e atributos são herdados. Mas o que aconteceu aqui? | |
// Para cada "atributo" ou "método" definido dentro de uma função construtora. É implementado dentro de um objeto especial chamado 'prototype'. | |
// E cada vez que o construtor é chamado através da palavra reservada "new", uma nova instância é criada, onde essa instância herda todos os métodos do construtor. | |
// O mesmo se aplica ao objeto .prototype do construtor SuperSport que herda o objeto criado a partir do construtor Carro. Assim, definimos a herança. | |
// Agore repare que estamos chamando a propriedade "gears" diretamente, pois não temos uma forma de dizer que nossas propriedades são privadas. Certo? Errado! | |
// Para cuidar desse problema estaremos introduzindo um Design Pattern: O Module Pattern. | |
// 2. Design Patterns | |
// 2.1 Module Pattern | |
// O Módulo é capaz de encapsular informações de forma que não seja visíveis para o mundo. | |
// Temos abaixo a mesma implementação. | |
// Como percebível, mudamos radicalmente a forma que escrevemos o nosso objeto. | |
// Em partes, temos uma varíavel Carro que assume o resultado de uma Função Expressão Imediatamente Invocada ou IIFE. | |
// Uma IIFE é utilizada para esconder o conteúdo de seu escopo do mundo, mas não quer dizer que ela não recebe e não retorna nada. | |
// Nesse caso estamos recebendo uma string que represente o modelo e retornando um objeto com os métodos públicos. | |
var Carro = (function(modelo) { | |
// Temos aqui nossos atributos. Dessa vez encapsulados. Repare que não utilizamos 'this'. Por não se tratar de um construtor. | |
var model = modelo, | |
color = "silver", | |
year = "2012"; | |
// Com os atributos criados. Essa IIFE retorna um objeto. | |
return { | |
getInfo : function() { | |
return model + " " + year; | |
} | |
}; | |
}); | |
// Agora observe: | |
Carro.getInfo(); // Retorna modelo e o ano. | |
Carro.model // Undefined. Ei! Eu não me lembro de ter retornado as variáveis pra acesso público! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment