SlideShare ist ein Scribd-Unternehmen logo
1 von 23
JavaScript
prototipação, closure e encapsulamento
@sr_valeriano


• Desenvolvedor e Instrutor na Caelum
• ricardo.valeriano@caelum.com.br
(oh yes, I wen’t there)
Object
> mafagafo = new Object()
> typeof(mafagafo)
  “object”

> pessoa = { }
> typeof(pessoa)
  ”object”
Properties
> supimpa = { }
> supimpa[‘agora-sim’] = ‘ (: ’

> supimpa.awesome = ‘YaY!’

> supimpa.tudo-batuta = ‘oples’
  x ReferenceError
Functions
> coisinha = function() {}
> typeof(coisinha)
  “function”

> coisinha[‘sera?’] = ‘¬¬’
> coisinha[‘sera?’]
  ‘¬¬’
Functions são Objects
> meChama = function(what) {
  console.log(what);
  console.log(typeof(this));
}

> meChama(“lágrimaAAs”)
  lágrimaAAs
  “object”

> meChama.apply(nil, [“lágrimaAAs”])
  lágrimaAAs
  “object”
Prototype
> Object.prototype
   Object
> go = {}
> go.say
   undefined
> Object.prototype.say = function() {
   console.log(‘no, and no, and no’);
}
> go.say
   function() { ... }
> go.say()
   no, and no, and no

> go.toString()
classe?????

> mafagafo = new Object()
> typeof(mafagafo)
  “object”

> typeof(Object)
  “function”
Object Prototype

> Object.prototype.say = function() {
   console.log(‘no, and no, and no’);
}
Herança
> Construtor = function() { };

> parent = {id:’2’};
> Construtor.prototype = parent;

> child = new Construtor();
> console.log(child.id)
 2
Escopo
> mundo = {eh: ‘global’}
> pessoa = {
     miolos:function() {
       var pensa = function() {
         console.log(‘o mundo é:’+ mundo.eh);
       }
       pensa();
     }
}
> pessoa.miolos()
   “o mundo é global”

> pensa
   undefined
Escopo
> pessoa = {
     miolos:function() {
        var pensa = function() {
          console.log(‘Estou escondida!’);
        }
        pensa();
     }
}
> pessoa.miolos()
  Estou Escondida!

> pensa
   undefined
Referências
Referência
> cabeca = (function() {
      var ideias = {uma:‘social network’};
      return {
        getIdeias:function() {
          return ideias;
        }
      }
})();
> ideias
      undefined
> cabeca.getIdeias()
      {uma:‘social network’}
> cabeca.getIdeias().outra = ‘javascript’
> cabeca.getIdeias()
      {uma:‘social network’, outra:‘javascript’}
Referência
> cabeca = (function() {
      var ideias = {uma:‘social network’};
      return {
        getIdeias:function() {
          return ideias;
        }
      }
})();
> ideias
      undefined
> cabeca.getIdeias()
      {uma:‘social network’}
> cabeca.getIdeias().outra = ‘javascript’
> cabeca.getIdeias()
      {uma:‘social network’, outra:‘javascript’}
Closure
> contexto = function() {
  var bijeto = { go: ‘go’ }
  var elefante = function() {
    console.log(bijeto[“go”]);
  }
  elefante();
}
> console.log( contexto() )
  go
Encapsulamento
> cabeca = function() {
   var ideias = {uma:‘social network’};
   return {
     getIdeias:function() {
       return Object.create(ideias);
     }
   }
};

> cabeca.getIdeias()
   {uma:‘social network’}
> cabeca.getIdeias().outra = ‘javascript’
> cabeca.getIdeias()
   {uma:‘social network’}
É isso! Obrigadasso.
      @sr_valeriano

ricardo.valeriano@caelum.com.br

Weitere ähnliche Inhalte

Was ist angesagt?

JQuery para Iniciantes
JQuery para IniciantesJQuery para Iniciantes
JQuery para IniciantesRenato Asterio
 
JQuery - JS 101
JQuery - JS 101JQuery - JS 101
JQuery - JS 101TheCoreh
 
Hash Endereçamento Quadrático Operações
Hash Endereçamento Quadrático OperaçõesHash Endereçamento Quadrático Operações
Hash Endereçamento Quadrático OperaçõesElaine Cecília Gatto
 
Acesso a banco de dados com JDBC
Acesso a banco de dados com JDBCAcesso a banco de dados com JDBC
Acesso a banco de dados com JDBCEduardo Mendes
 
PHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHPPHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHPBruno Neves Menezes
 
JavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosJavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosEduardo Mendes
 
SQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methodsSQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methodsSimples Consultoria
 
Segunda Apresentação jQuery
Segunda Apresentação jQuerySegunda Apresentação jQuery
Segunda Apresentação jQuerydouglasgrava
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryWesley Lemos
 

Was ist angesagt? (20)

Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
JQuery para Iniciantes
JQuery para IniciantesJQuery para Iniciantes
JQuery para Iniciantes
 
Dinamizando Sites Estáticos
Dinamizando Sites EstáticosDinamizando Sites Estáticos
Dinamizando Sites Estáticos
 
JQuery - JS 101
JQuery - JS 101JQuery - JS 101
JQuery - JS 101
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Hash Endereçamento Quadrático Operações
Hash Endereçamento Quadrático OperaçõesHash Endereçamento Quadrático Operações
Hash Endereçamento Quadrático Operações
 
Começando com ruby
Começando com rubyComeçando com ruby
Começando com ruby
 
Do REST ao GraphQL com PHP
Do REST ao GraphQL com PHPDo REST ao GraphQL com PHP
Do REST ao GraphQL com PHP
 
Acesso a banco de dados com JDBC
Acesso a banco de dados com JDBCAcesso a banco de dados com JDBC
Acesso a banco de dados com JDBC
 
PHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHPPHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHP
 
JavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosJavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a Objetos
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
SQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methodsSQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methods
 
PHP e Mysql - DELETE
PHP e Mysql - DELETEPHP e Mysql - DELETE
PHP e Mysql - DELETE
 
Escrevendo plugins JQuery
Escrevendo plugins JQueryEscrevendo plugins JQuery
Escrevendo plugins JQuery
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
 
Segunda Apresentação jQuery
Segunda Apresentação jQuerySegunda Apresentação jQuery
Segunda Apresentação jQuery
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
JDBC
JDBCJDBC
JDBC
 
Introdução a jQuery
Introdução a jQueryIntrodução a jQuery
Introdução a jQuery
 

Ähnlich wie JavaScript: prototipação, closure e encapsulamento

As novidades do PHP5 (2005)
As novidades do PHP5 (2005)As novidades do PHP5 (2005)
As novidades do PHP5 (2005)Pablo Dall'Oglio
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksBruno Abrantes
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfGabrielaMota46
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBLuciano Borges
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanosnobios
 
O que você NÃO aprendeu sobre Programação Orientada a Objetos
O que você NÃO aprendeu sobre Programação Orientada a ObjetosO que você NÃO aprendeu sobre Programação Orientada a Objetos
O que você NÃO aprendeu sobre Programação Orientada a ObjetosDanilo Sato
 
Aula actionscript basico
Aula actionscript basicoAula actionscript basico
Aula actionscript basicoWemerson Silva
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
Evolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptEvolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptJean Carlo Emer
 
O que é que o Java não tem?
O que é que o Java não tem?O que é que o Java não tem?
O que é que o Java não tem?Denis Costa
 
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquerygrupoweblovers
 

Ähnlich wie JavaScript: prototipação, closure e encapsulamento (20)

As novidades do PHP5 (2005)
As novidades do PHP5 (2005)As novidades do PHP5 (2005)
As novidades do PHP5 (2005)
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
O que você NÃO aprendeu sobre Programação Orientada a Objetos
O que você NÃO aprendeu sobre Programação Orientada a ObjetosO que você NÃO aprendeu sobre Programação Orientada a Objetos
O que você NÃO aprendeu sobre Programação Orientada a Objetos
 
NoSQL e MongoDB
NoSQL e MongoDBNoSQL e MongoDB
NoSQL e MongoDB
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Javascript avançado
Javascript avançadoJavascript avançado
Javascript avançado
 
Aula actionscript basico
Aula actionscript basicoAula actionscript basico
Aula actionscript basico
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Evolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptEvolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScript
 
NoSQL e MongoDB - ETEC
NoSQL e MongoDB - ETECNoSQL e MongoDB - ETEC
NoSQL e MongoDB - ETEC
 
O que é que o Java não tem?
O que é que o Java não tem?O que é que o Java não tem?
O que é que o Java não tem?
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em ação
 
Prog web 06-php-oo
Prog web 06-php-ooProg web 06-php-oo
Prog web 06-php-oo
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
 

Mehr von Ricardo Valeriano

A linguagem maislegaldomundo
A linguagem maislegaldomundoA linguagem maislegaldomundo
A linguagem maislegaldomundoRicardo Valeriano
 
A ferramenta ideal: uma questão de perspectiva.
A ferramenta ideal: uma questão de perspectiva.A ferramenta ideal: uma questão de perspectiva.
A ferramenta ideal: uma questão de perspectiva.Ricardo Valeriano
 
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...Ricardo Valeriano
 
A primeira app iOS (a gente não esquece)
A primeira app iOS (a gente não esquece)A primeira app iOS (a gente não esquece)
A primeira app iOS (a gente não esquece)Ricardo Valeriano
 
Testes Automatizados e o iOS
Testes Automatizados e o iOSTestes Automatizados e o iOS
Testes Automatizados e o iOSRicardo Valeriano
 
Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)
Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)
Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)Ricardo Valeriano
 

Mehr von Ricardo Valeriano (7)

Sua primeira app iOS
 Sua primeira app iOS Sua primeira app iOS
Sua primeira app iOS
 
A linguagem maislegaldomundo
A linguagem maislegaldomundoA linguagem maislegaldomundo
A linguagem maislegaldomundo
 
A ferramenta ideal: uma questão de perspectiva.
A ferramenta ideal: uma questão de perspectiva.A ferramenta ideal: uma questão de perspectiva.
A ferramenta ideal: uma questão de perspectiva.
 
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
 
A primeira app iOS (a gente não esquece)
A primeira app iOS (a gente não esquece)A primeira app iOS (a gente não esquece)
A primeira app iOS (a gente não esquece)
 
Testes Automatizados e o iOS
Testes Automatizados e o iOSTestes Automatizados e o iOS
Testes Automatizados e o iOS
 
Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)
Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)
Sexy Specs on XCode with MacRuby and Rspec (Lightning Talk)
 

JavaScript: prototipação, closure e encapsulamento

  • 2. @sr_valeriano • Desenvolvedor e Instrutor na Caelum • ricardo.valeriano@caelum.com.br
  • 3.
  • 4. (oh yes, I wen’t there)
  • 5. Object > mafagafo = new Object() > typeof(mafagafo) “object” > pessoa = { } > typeof(pessoa) ”object”
  • 6. Properties > supimpa = { } > supimpa[‘agora-sim’] = ‘ (: ’ > supimpa.awesome = ‘YaY!’ > supimpa.tudo-batuta = ‘oples’ x ReferenceError
  • 7. Functions > coisinha = function() {} > typeof(coisinha) “function” > coisinha[‘sera?’] = ‘¬¬’ > coisinha[‘sera?’] ‘¬¬’
  • 8. Functions são Objects > meChama = function(what) { console.log(what); console.log(typeof(this)); } > meChama(“lágrimaAAs”) lágrimaAAs “object” > meChama.apply(nil, [“lágrimaAAs”]) lágrimaAAs “object”
  • 9.
  • 10. Prototype > Object.prototype Object > go = {} > go.say undefined > Object.prototype.say = function() { console.log(‘no, and no, and no’); } > go.say function() { ... } > go.say() no, and no, and no > go.toString()
  • 11. classe????? > mafagafo = new Object() > typeof(mafagafo) “object” > typeof(Object) “function”
  • 12. Object Prototype > Object.prototype.say = function() { console.log(‘no, and no, and no’); }
  • 13. Herança > Construtor = function() { }; > parent = {id:’2’}; > Construtor.prototype = parent; > child = new Construtor(); > console.log(child.id) 2
  • 14. Escopo > mundo = {eh: ‘global’} > pessoa = { miolos:function() { var pensa = function() { console.log(‘o mundo é:’+ mundo.eh); } pensa(); } } > pessoa.miolos() “o mundo é global” > pensa undefined
  • 15. Escopo > pessoa = { miolos:function() { var pensa = function() { console.log(‘Estou escondida!’); } pensa(); } } > pessoa.miolos() Estou Escondida! > pensa undefined
  • 17. Referência > cabeca = (function() { var ideias = {uma:‘social network’}; return { getIdeias:function() { return ideias; } } })(); > ideias undefined > cabeca.getIdeias() {uma:‘social network’} > cabeca.getIdeias().outra = ‘javascript’ > cabeca.getIdeias() {uma:‘social network’, outra:‘javascript’}
  • 18. Referência > cabeca = (function() { var ideias = {uma:‘social network’}; return { getIdeias:function() { return ideias; } } })(); > ideias undefined > cabeca.getIdeias() {uma:‘social network’} > cabeca.getIdeias().outra = ‘javascript’ > cabeca.getIdeias() {uma:‘social network’, outra:‘javascript’}
  • 19.
  • 20.
  • 21. Closure > contexto = function() { var bijeto = { go: ‘go’ } var elefante = function() { console.log(bijeto[“go”]); } elefante(); } > console.log( contexto() ) go
  • 22. Encapsulamento > cabeca = function() { var ideias = {uma:‘social network’}; return { getIdeias:function() { return Object.create(ideias); } } }; > cabeca.getIdeias() {uma:‘social network’} > cabeca.getIdeias().outra = ‘javascript’ > cabeca.getIdeias() {uma:‘social network’}
  • 23. É isso! Obrigadasso. @sr_valeriano ricardo.valeriano@caelum.com.br

Hinweis der Redaktion

  1. \n
  2. \n
  3. A mais mal compreendida das linguagens, malditos form validations.\nTem mais boas partes do que parece.\n
  4. A mais mal compreendida das linguagens, malditos form validations.\nTem mais boas partes do que parece.\n
  5. É muito simples criar um objeto em javascript (object literal)\n
  6. Um objeto pode ter propriedades, dot-notation funciona sob certas condições...\n
  7. Funções são, na verdade, objetos.\nObjetos podem ter propriedades, que podem ser funções.\nPodem ser invocadas via sintaxe especial...\n
  8. guardo em variáveis e invoco com o método apply.\n
  9. JavaScript tem mecanismo de herança SIM, várias formas de implementar isso, uma delas é via prototipagem\n
  10. Podemos adicionar propriedades dinamicamente a um objeto, mesmo que ele já exista.\n
  11. Não existem classes em javascript, Object na verdade é uma função\n
  12. Alteramos o prototype de Object, que na verdade é uma função...\n\nE todo objeto tem referência oculta a esse prototype, por isso agora todo objeto tem a função say.\n
  13. Por isso é possível fazer alterando o prototype de uma função e construindo objetos dela.\n
  14. Toda variável criada fora de uma função (ou sem a palavra var) é global.\n
  15. só dentro da função miolos é possível acessar a função pensa.\nescopo de função\n
  16. Todo objeto javascript é passado via referência, sem cópias quando passado como param.\n
  17. Se alterarmos um objeto que foi retornado, ainda que ele esteja escondido pelo escopo de função, vamos alterar a referência.\n
  18. Podemos nos aproveitar da memória...\nUma função se lembra o contexto onde foi criada. CLOSURE.\n
  19. o objeto elefante se lembra do objeto bijeto\n
  20. Agora tem outras questões (tá criando muito objetos). Mas funfa =)\n
  21. \n