Javascript para CSharpers 4 - POO

293 visualizações

Publicada em

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
293
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Classes no C# contem propriedades e eventos bem definidos, seria útil se pudéssemos replicar essa estrutura no Javascript
  • Javascript para CSharpers 4 - POO

    1. 1. Javascript para Desenvolvedores C#
    2. 2. Sobre o curso Javascript Comparação Parte 1: Functions Parte 2: Conceitos Parte 3: POO Parte 4:
    3. 3. Javascript para CSharpers Javascript para desenvolvedores acostumados com a orientação a objetos do .Net
    4. 4. POO Sumário • Javascript não é orientado a objetos, mas podemos força-lo a ser • Objetos Dinâmicos • “Classes” • Prototype • Herança • Abstract • Extensions Methods
    5. 5. POO Objetos 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 = "";
    6. 6. POO Objetos Dinâmicos • No Javascript, isso é natural //Javascript var 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 = "";
    7. 7. POO Objetos Dinâmicos • Sintaxe Ponto • Sintaxe Colchete //Javascript var nome = cliente.nome; var nome2 = cliente["nome"]; var data = cliente. "Data Formatura";// Nope var 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"];
    8. 8. POO Objetos Dinâmicos • No .NET, dynamic + ExpandoObject tem esse comportamento
    9. 9. 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; } }
    10. 10. 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; } } //Javascript function Cliente(nome, empresa) { this.nome = nome; this.empresa = empresa; this.enviarEmail = function(email) { }; } var c = new Cliente('Sonic', "SEGA"); c.enviarEmail("sonic@sega.com");
    11. 11. POO “Classes” • Mas tudo precisa ser público?? • Nope.. Closures servem para isso //Javascript function Cliente(nome,empresa) { //public this.nome = nome; this.empresa = empresa; //private var mailServer = 'mail.google.com'; this.enviarEmail=function(email) { endEmailViaServer(mailServer, email); } }
    12. 12. POO “Classes” • E propriedades? • Sintaxe especial.. Use apenas se necessário • Readonly? //Javascript function 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(); } }); }
    13. 13. POO “Classes” • Membros Estáticos //Javascript function 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
    14. 14. • 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órico privado na calculadora
    15. 15. 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);
    16. 16. 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
    17. 17. POO O 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
    18. 18. POO O objeto Prototype //Javascript function Animal(raca, comida) { this.raca = raca; this.comida = comida; } //Funciona mas não acessa dados privados Animal.enviarEmail = function() {}; //Funciona e deixa acessar dados privados Animal.prototype.enviarEmail=function(){ return this.raca+"@foo.baz" } var c = new Animal("Coelho"); log(c.raca); //Coelho log(c.enviarEmail()); //Coelho@foo.baz var c = new Animal("Vaca"); log(c.raca); //Vaca log(c.enviarEmail()); //Vaca@foo.baz 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?
    19. 19. POO Heranç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
    20. 20. POO Classe 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() //legumes log(c instanceof Coelho); //true log(c instanceof Animal) //error
    21. 21. POO Extensions • Prototype também pode ser usado para criar Extension Methods 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“
    22. 22. • 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();
    23. 23. POO Mais coisas de Classes • Private • Via closures e variáveis locais • Protected • Não suportado • Sobrecarga de construtores • Não, apenas sobrescrita de métodos
    24. 24. POO E 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(); }
    25. 25. 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
    26. 26. 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
    27. 27. Quiz Quais os possíveis usos do prototype?
    28. 28. 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
    29. 29. • Todos os objetos são dinâmicos • Sintaxe colchete • Classes • Herança
    30. 30. Javascript para CSharpers Javascript para desenvolvedores acostumados com a orientação a objetos do .Net

    ×