Nas Entranhas do JavaScript: Meta Programação

Nas Entranhas do JavaScript: Meta Programação

Talk apresentada no Front In POA 2016.
Nela explico um pouco sobre as features disponíveis em JavaScript para fazermos meta programação e tento apresentar casos de uso reais e exemplos simples.

5a3b0043a07f45bba968c22b7e7bf296?s=128

Lucas Fernandes da Costa

December 10, 2016
Tweet

Transcript

  1. 3.

    É A CAPACIDADE DE UM PROGRAMA LER E ALTERAR À

    SI MESMO OU OUTROS EM TEMPO DE EXECUÇÃO
  2. 6.
  3. 9.

    Mas não é disso que vamos falar Isso é Meta

    Programação Meta Level JavaScript
  4. 10.

    Mas não é disso que vamos falar Isso é Meta

    Programação Meta Level JavaScript Base Level Java
  5. 16.

    Meta Object Protocol Prevê um vocabulário (um protocolo) que define

    como são feitas as operações sobre objetos
  6. 22.

    Property Descriptors meuObjeto value enumerable writable configurable get set any

    boolean boolean boolean function function propriedade
  7. 23.

    Indica o valor da propriedade value enumerable writable configurable get

    set any boolean boolean boolean function function Property Descriptors
  8. 24.

    Indica se ela será listada por funções como Object.keys value

    enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  9. 25.

    Indica se ela pode ser definida com o operador de

    atribuição (=) value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  10. 26.

    Indica se o descritor dessa propriedade pode ser alterado value

    enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  11. 27.

    É a função que será invocada para acessar a propriedade

    value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  12. 28.

    É a função que será invocada ao atribuir um valor

    para a propriedade (operador de atribuição) value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  13. 36.

    Getters Lazy Properties cesta dataNasc value: 08/05/1995 peso 800 frutas

    {banana: 3, morango: 1} Muitas atribuições ao peso! Poucos acessos!
  14. 38.

    Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function

    cesta peso frutas {banana: 1, morango: 1} get: function cesta.peso
  15. 39.

    Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function

    pessoa dataNasc value: 08/05/1995 idade get: function cesta peso frutas {banana: 1, morango: 1} get: function invoca a função get cesta.peso
  16. 40.

    Getters Lazy Properties pessoa dataNasc value: 08/05/1995 invoca a função

    get idade get: function 200 pessoa dataNasc value: 08/05/1995 idade get: function pessoa dataNasc value: 08/05/1995 cesta.peso idade get: function cesta peso frutas {banana: 1, morango: 1} get: function
  17. 45.

    Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' invoca

    a função set passando ‘João Silva’ set: function primeiroNome value: '' sobrenome value: ''
  18. 46.

    Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' invoca

    a função set passando ‘João Silva’ set: function primeiroNome value: '' sobrenome value: '' pessoa nomeCompleto set: function primeiroNome value: '' sobrenome value: ''
  19. 47.

    Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' invoca

    a função set passando ‘João Silva’ set: function primeiroNome value: '' sobrenome value: '' pessoa nomeCompleto set: function primeiroNome value: 'João' sobrenome value: 'Silva'
  20. 49.
  21. 51.

    COMPOSIÇÃO DE UM PROXY Proxy Wrapper handler get set: function

    set set: function target nome value: ‘João' sobrenome value: ‘Silva' Traps
  22. 53.

    FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' const p = new Proxy(target, handler);
  23. 54.

    FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler);
  24. 55.

    FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler); p
  25. 56.

    FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler); p.nome Pede a propriedade ao wrapper
  26. 57.

    FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler); p.nome Chama a trap get passando target e nome da propriedade
  27. 58.

    FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘Silva' handler get function set function const p = new Proxy(target, handler); p.nome Devolve o retorno da função da trap get
  28. 65.

    0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function
  29. 66.

    0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function
  30. 67.

    0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function
  31. 68.

    0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function Calcula o valor que deveria estar no índice 3
  32. 69.

    0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function Calcula o valor que deveria estar no índice 3
  33. 73.

    Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome
  34. 74.

    Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome
  35. 75.

    Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome
  36. 76.

    Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome Você quis dizer: "nome"?
  37. 82.
  38. 84.

    O que são symbols? Novo tipo primitivo "Symbols are all

    about Reflection within implementation" Keith Cirkel
  39. 98.

    symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' timestamp value: 1481236691
  40. 99.

    symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' timestamp value: 1481236691 Facilmente sobrescrito por engano
  41. 102.

    symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' symbol(time) value: 1481236691
  42. 103.

    symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' value: 1481236691 symbol(time) nunca haverá conflito!
  43. 105.

    Utilizado por um objeto para verificar se outro objeto é

    considerado uma instância sua Well Known Symbols Symbol.hasInstance