javascript para csharpers 3 - poo
TRANSCRIPT
Javascript para Desenvolvedores C#
Sobre o cursoJavascript
Comparação
Parte 1:
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:
Javascript para CSharpers
Javascript para desenvolvedores acostumados com a orientação a objetos do .Net
POOSumário
• Javascript não é orientado a objetos, mas podemos força-lo a ser• Objetos Dinâmicos
• “Classes”
• Prototype• Herança
• Abstract
• Extensions Methods
POOObjetos Dinâmicos
• C# Suporta Inicializadores de objetos dinâmicos
//C#var cliente = new Cliente()
{Nome = "Thiago",Companhia = "Academia do Programador",DataFormatura = " 11/11/11",Endereco = new Endereco(){
Cidade = "Lages",Estado = "SC",Bairro = "Coral"
},Apelidos = new List<Apelido>(){
new Apelido("Thiago Jr"),new Apelido("Juninho"),new Apelido("Tio Sartas")
}};
//C#var cliente = new {
Nome = "Thiago",Companhia = "Academia do Programador",DataFormatura = " 11/11/11",Endereco = new{
Cidade = "Lages",Estado = "SC",Bairro = "Coral"
},Apelidos = new[]{
"Thiago Jr","Juninho","Tio Sartas",
}};
cliente.novaPropriedade = "";
POOObjetos Dinâmicos
• No Javascript, isso é natural
//Javascriptvar cliente = {
Nome: "Thiago",Companhia: "Academia do Programador",'Data Formatura': "11/11/11",Endereco: {
Cidade: "Lages",Estado: "SC",Bairro: "Coral“
},Apelidos: [
"Thiago Jr","Juninho","Tio Sartas"
]};
cliente.novaPropriedade = "";
POOObjetos Dinâmicos
• Sintaxe Ponto
• Sintaxe Colchete//Javascriptvar nome = cliente.nome;var nome2 = cliente["nome"];
var data = cliente. "Data Formatura";// Nopevar data2 = cliente["Data Formatura"];
var cidade = cliente.Endereco.Cidade;var cidade2 = cliente["Endereco"]["Cidade"];var cidade3 = cliente["Endereco"].Cidade;
cliente["Entrar de férias"] = function() {return {"Dias tirados":20};
};
cliente["Entrar de férias"]();var dias = cliente["Entrar de férias"]()["Dias tirados"];
POOObjetos Dinâmicos
• No .NET, dynamic + ExpandoObject tem esse comportamento
POO“Classes”
• No .NET, Classes são receitas bem definidas para criação de objetos• Containers para dados, código e comportamento
//C#class Cliente {
string Nome { get; set; }string Empresa { get; set; }public Cliente(string nome, string empresa=""){
Nome = nome;Empresa = empresa;
}}
POO“Classes”
• No .NET, Classes são receitas bem definidas para criação de objetos• Containers para dados, código e comportamento
//C#class Cliente {
string Nome { get; set; }string Empresa { get; set; }public Cliente(string nome, string empresa=""){
Nome = nome;Empresa = empresa;
}}
//Javascriptfunction Cliente(nome, empresa) {
this.nome = nome;this.empresa = empresa;this.enviarEmail = function(email) { };
}var c = new Cliente('Sonic', "SEGA");c.enviarEmail("[email protected]");
POO“Classes”
• Mas tudo precisa ser público??• Nope.. Closures servem para isso
//Javascriptfunction Cliente(nome,empresa) {
//publicthis.nome = nome;this.empresa = empresa;
//privatevar mailServer = 'mail.google.com';this.enviarEmail=function(email) {
endEmailViaServer(mailServer, email);}
}
POO“Classes”
• E propriedades?• Sintaxe especial.. Use apenas se necessário
• Readonly?
//Javascriptfunction Cliente(nome) {
var _nome = nome;this.empresa = empresa;
//{ get; set; }Object.defineProperty(this, 'nome', {
get:function () { return "Mr. " + _nome; },set:function(value) { _nome = value.toLowerCase(); }
});}
POO“Classes”
• Membros Estáticos
//Javascriptfunction Cliente(nome,empresa) {
this.nome = nome;this.empresa = empresa;
}
Cliente.mailServer = 'mail.google.com';
var c = new Cliente();var srv = c.mailServer; //nope
srv = Cliente.mailServer; //yep
• Crie a classe Calculadora• Ela terá todos os métodos convencionais, incluindo MOD
• (opcional) Use jQuery para relacionar eventos aos controladores
• Seu construtor recebe um nome que não pode ser alterado (somente leitura) (ex: “Casio”)
• Crie a classe Operação(number, number, string operator)
• Antes de executar cada operação, salve num históricoprivado na calculadora
Quiz
• O que essas chamadas irão logar?
function Cliente() {var index = 1;this.index = 2;Object.defineProperty(this, "Index", {
get: function () { return index; }})
}
Cliente.Index = 4;
var c = new Cliente();
console.log(c.Index);console.log(c.index);console.log(Cliente.index);console.log(Cliente.Index);
Quiz
• O que essas chamadas irão logar?
function Cliente() {var index = 1;this.index = 2;Object.defineProperty(this, "Index", {
get: function () { return index; }})
}
Cliente.Index = 4;
var c = new Cliente();
console.log(c.Index);console.log(c.index);console.log(Cliente.index);console.log(Cliente.Index);
//1//2//undefined//4
POOO objeto Prototype
• Principal elo de correlação entre objetos em Javascript• Cada objeto tem uma propriedade prototype
• É somente um objeto, e pode ter propriedades atribuídas nele
• Todas as propriedades de um “tipo” são compartilhadas entre as instancias
POOO objeto Prototype
//Javascriptfunction Animal(raca, comida) {
this.raca = raca;this.comida = comida;
}
//Funciona mas não acessa dados privadosAnimal.enviarEmail = function() {};
//Funciona e deixa acessar dados privadosAnimal.prototype.enviarEmail=function(){
return this.raca+"@foo.baz"}
var c = new Animal("Coelho");
log(c.raca); //Coelholog(c.enviarEmail()); //[email protected]
var c = new Animal("Vaca");log(c.raca); //Vacalog(c.enviarEmail()); //[email protected]
function Animal(raca, comida) {this.raca = raca;this.comida = comida;this.
}
enviarEmail=function(){return this.raca+"@foo.baz"
}
Mas qual a diferença de fazer isso?
POOHerança
function Animal(comida) {this.comida = comida || "Nada";
}
Animal.prototype.comer=function(){console.log( "comendo: "+this.comida);
};
var a = new Animal();
a.comer(); //"Comendo: nada“log(a instanceof Animal); // true
function Coelho(cor){this.cor=cor||"Branco";
}
//Automágica!Coelho.prototype=new Animal("Legumes");
var c = new Coelho("Branco");
c.comer(); //"Comendo: legumes“log(c instanceof Animal); //true
POOClasse abstrata
var Animal = {comida:'nada',comer:function(){
log(this.comida)}
}
function Coelho(cor){this.cor=cor;this.comida="legumes";
}
Coelho.prototype=Animal;var c = new Coelho("Branco");c.comer() //legumeslog(c instanceof Coelho); //truelog(c instanceof Animal) //error
POOExtensions
• Prototype também pode ser usado para criar ExtensionMethods
String.prototype.skipWords = function(qts) {var split = this.split(' ');var result = '';for (i = qts; i < split.length; i += 1) {
result += split[i] + " ";}return result;
};
log("alguma string bem grande cheia de palavras".skipWords(4)); //"cheia de palavras“
• Agora temos uma calculadora binária que herda da calculadora convencional• Todos os métodos antigos são postos em prototype
• Adicione métodos para converter e desconverter binários
• Adicione o método para converter para binário no protótipo da classe String, para que possa ser usada dessa forma:
“400”.toBinary();
POOMais coisas de Classes
• Private• Via closures e variáveis locais
• Protected• Não suportado
• Sobrecarga de construtores• Não, apenas sobrescrita de métodos
POOE as interfaces?
• São desnecessárias• Sinta-se confortável com DuckTyping
function Animal(comida){this.comida= comida ||"nada";this.mover=function(){};
}
function Carro(comb){this.combustível=comb||"Diesel";this.mover=function(){};
}
function mover(obj) {obj.mover = obj.mover || function() {};if(obj.mover)
obj.mover();}
Quiz
Atribuir um método ao prototype e atribuir ao this da classe tem a mesma usabilidade
• Falso• Verdadeiro
• Atribuirum método ao prototype e atribuir ao this da classe tem o mesmo desempenho• Verdadeiro• Falso
Quiz
Atribuir um método ao prototype e atribuir ao this da classe tem a mesma usabilidade
• Falso• Verdadeiro
• Atribuirum método ao prototype e atribuir ao this da classe tem o mesmo desempenho• Verdadeiro• Falso
Quiz
Quais os possíveis usos do prototype?
Quiz
Quais os possíveis usos do prototype?• Executar um trecho de código apenas uma vez,. E que seja usado por
todas as instancias
• Simular Herança e classe Abstrata
• Extension Methods
• Todos os objetos são dinâmicos
• Sintaxe colchete
• Classes
• Herança
Javascript para CSharpers
Javascript para desenvolvedores acostumados com a orientação a objetos do .Net