Sobre OO.

[matthee 3]

Tenho algumas dúvidas relacionadas a como se faz um objeto, na utilização da ECMAScript feita no artigo escrito aqui no imasters se faz um objeto literal:

 

var Pessoa = {}

 

Mas no livro Pro Javascript Design Patterns, os objetos são escritos como funções:

 

function Pessoa(){}

 

Quais as diferenças? Sendo que posso colocar funções e propriedades dentro dos dois.

[William Bruno 1501]

@matthee,

 

Segundo o livro Padrões Javascript a forma {} (objeto literal), é "melhor".

Alguns patterns precisam de uma forma, e outros precisam da outra.

 

Mas falando por cima, a sintaxe {}, é menos verbosa, não necessita usar o uso do operador new, então é um melhor padrão do que usar com function.

[Bruno Augusto 417]

Pergunta: Se a sintaxe {} não aceita funções dentro dela, como são criados os "métodos"?

[William Bruno 1501]

@Bruno Augusto.. lógico que aceita cara..

<script type="text/javascript">
var Pessoa = {
	nome: 'Bruno',
	andar: function(){
		console.log( this.nome + ' andando..');
	}
};

Pessoa.andar();


Pessoa.nome = 'Will';
Pessoa.andar();
</script>

Odeio esses exemplos com "Pessoa".. mas enfim.. já que começaram com isso.

[matthee 3]

HAHAHAHA, certo quando alguém fala de OO vem logo um exemplo pessoa, mas ele aceita sim fui atraz de algumas coisas aqui, e o padrão var objeto = {} é muito bom, por que diminui o acoplamento e pode ser usado em aplicações pequenas com o Singleton, já o function Objeto(){} é para criações um pouco mais grandes como Abstract Factory, pelo o que entendi foi isso, aaa outra coisa pessoal, algum de vocês conheçe bem o ECMAScript 5, eu li o artigo do Joao Batista Neto e fui logo testar e não consegui, funciona em todos os browsers?

[William Bruno 1501]

Sobre ecma5:

 

http://kangax.github.com/es5-compat-table/

[brunocampos_ 3]

Opa cara,

 

O uso de function ou var é bem diferente e distinto. Apenas completando o exemplo que já deram: http://jsfiddle.net/sUYyK/

 

 

 

var Pessoa = {
nome: 'Bruno',
andar: function(){
document.write( this.nome + ' andando..');
}
};
 
function PessoaObj() {
    this.nome = 'Bruno';
    this.andar = function() {
        document.write( this.nome + ' andando..');
    }
}
 
document.write("Var: <br />");
 
p = Pessoa;
p2 = Pessoa;
p2.nome = 'Will';
p.andar();
p2.andar();
 
document.write("<br /> Function: <br />");
 
p = new PessoaObj();
p2 = new PessoaObj();
p2.nome = 'Will';
p.andar();
p2.andar();

[Bruno Augusto 417]

WTF? Eu escrevi um micro-Fiddle ontem e definir funções dentro de uma hash table dava pau.

 

Por isso que não gosto de JavaScript <_<

[JCMais 75]

Provavelmente você usou [inline]=[/inline] e não [inline]:[/inline], ou então terminou com [inline];[/inline] e não [inline],[/inline] :P

[matthee 3]

WTF? Eu escrevi um micro-Fiddle ontem e definir funções dentro de uma hash table dava pau.

 

Por isso que não gosto de JavaScript <_<

 

Sei que podia ir pesquisar no google, mas o que é micro-Fiddle?

[Bruno Augusto 417]

JSFiddle é um ambiente online onde você pode codificar HTML, CSS e JS e ter um output em tempo real.

 

Micro, é micro mesmo, no sentido de pequeno. Um pseudo-código como o que o William postou só pra testar.

[Alaerte Gabriel 662]

Eu tenho medo de JavaScript rsrrsr

[matthee 3]

Hmm, tipo node.js Bruno? ou o JSFiddle é sem acesso ao servidor.

[Bruno Augusto 417]

Não cara, é um editor online.

 

Você escreve seu HTML com, opcionalmente, JavaScript e/ CSS e tem a possibilidade de um preview na hora. É útil quando você tem um problema que fica difícil de se expor em palavras ou códigos ou ainda para demonstrar, na prática, em que um código resulta., sem a necessidade de ter um servidor próprio só para isso.

 

E ele é bastante flexível pois você pode, inclusive, carregar recursos externos, como frameworks JS (jQuery, MooTools, Prototype...) ou componentes terceirizados, como o Twitter Bootstrap.

 

Pode até ser possível carregar o Node.Js, mas eu nunca tentei.

[Henrique Barcelos 290]

Hmmm, não é exatamente a mesma coisa.

 

A construção:

var Pessoa = {
    nome: 'Zezinho'
};

Cria um único objeto Pessoa. É uma maneira de implementar o padrão Singleton.

 

A construção:

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

Cria o equivalente a uma "classe" em javascript.

Ahn? Como assim? Isso é uma função, não uma classe.

Primeiro você precisa entender que Javascript não é uma linguagem orientada a objetos convencional, com classes, visibilidade, herança (tracional), Javascript é uma linguagem prototype.

 

Vou tentar explicar o que é isso de forma simplificada.

 

Ao fazer:

var p1 = new Pessoa("zezinho");

p1 irá ser construído com base no protótipo Pessoa, ou seja, pega-se a estrutura de Pessoa, faz-se uma cópia e atribui essa cópia a p1. Dessa forma, p1 passa a ser uma instância de Pessoa.

 

Acontece que linguagens prototype são mais flexíveis que linguagens orientadas a objeto do ponto de vista que a estrutura do protótipo NÃO PRECISA ser mantida, você pode trocar implementações de métodos, adicionar métodos e propriedades (mas não removê-los) sem que isso afete os outros objetos que são instâncias daquele protótipo.

 

Observe o código:

// TODA função Javascript pode ser usada como um protótipo
function Pessoa(nome, idade){
    this.nome = nome;
    this.idade = idade;
}

// Outra forma de adicionar métodos a protótipos
Pessoa.prototype.saudacao = function() {
    alert("Olá, eu sou " + this.nome + " e tenho " + this.idade + " anos.");
}

var p1 = new Pessoa("Henrique", 22);
p1.saudacao(); // Olá, meu nome é Henrique e tenho 22 Anos

alert(p1 instanceof Pessoa); // true

var p2 = new Pessoa("Joe", 30);
p2.saudacaoEspanhol = function() {
    alert("¡Holá! Soy " + this.nome + " y tengo " + this.idade + " años.");
}
p2.saudacao = function() {
    alert("Hi, I'm " + this.nome + " and I have " + this.idade + " yo.");
}
p2.saudacao(); // Hi, I'm Joe and I have 30 yo.
p2.saudacaoEspanhol(); // ¡Holá! Soy Joe y tengo 30 años.
alert(p2 instanceof Pessoa); // true

p1.saudacao(); // Olá, meu nome é Henrique e tenho 22 Anos

Repare que alteramos a implementação de saudação para [inline]p2[/inline], adicionamos um método([inline]saudacaoEspanhol[/inline]), mas sem afetar [inline]p1[/inline].

 

Repare que se você fizer:

p1.saudacaoEspanhol();

Obterá um erro:

Error: TypeError: p1.saudacaoEspanhol is not a function

[JCMais 75]

 

A construção:

var Pessoa = {
    nome: 'Zezinho'
};

Cria um único objeto Pessoa. É uma maneira de implementar o padrão Singleton.

 

:seta:

 

 

var Pessoa = {
    nome: 'Zezinho'
};

var p1 = Object.create( Pessoa );

var p2 = Object.create( Pessoa );
 
var p3 = Object.create( Pessoa );

p1.someProp = true;
p2.someProp = false;
p3.someFunction = function() {};

console.log( Pessoa, p1, p2, p3 );

[Henrique Barcelos 290]

Ótima observação, JC. Não me lembrava desse aí...

[matthee 3]

Voltando ao objetivo desse tópico hahaha,

 

EU tenho o seguinte código galera:

var People = {
   nome = "matheus",
   cpf    = "xxx-xxx.xxx.xx"
};


Object.defineProperty(People,"cpf",{
   get: function(){alert("você não pode saber o cpf dos outros -.-);}
});

ele deveria alertar quando o cara tentasse pegar o cpf, mas ao invez disso ele ta mostrando o cpf.

[Henrique Barcelos 290]

Tem uns erros sintáticos aí, mas isso aqui funciona no Firefox 18:

var People = {
    nome : "matheus",
    cpf  : "xxx-xxx.xxx.xx"
};


Object.defineProperty(People,"cpf",{
   get: function(){alert("você não pode saber o cpf dos outros -.-");}
});
                  
People.cpf;

Provavelmente você está usando alguma versão de navegador que não suporta EcmaScript 5.

[matthee 3]

Mas to usando o chrome =|