Javascript para CSharpers 3 - POO

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 = "";


• 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 = "";


• 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"];


• 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

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

Javascript para CSharpers 3 - POO

Software

Transcript of Javascript para CSharpers 3 - POO