Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desmistificando Herança e Protótipos no JS - Short

Desmistificando Herança e Protótipos no JS - Short

Lucas Santos

June 04, 2020
Tweet

More Decks by Lucas Santos

Other Decks in Programming

Transcript

  1. Desmistificando Herança e
    Prototypes no Javascript
    Sempre esteve lá, ninguém sabia o porquê

    View Slide

  2. $ whoami
    Lucas Santos
    /khaosdoctor
    @_staticvoid
    lsantos.me
    Cloud Advocate
    [email protected] @khaosdoctor

    View Slide

  3. trainingcenter.io
    2018.abcdevelopers.org

    View Slide

  4. O.O.P

    View Slide

  5. Encapsulamento

    View Slide

  6. View Slide

  7. View Slide

  8. Polimorfismo

    View Slide

  9. View Slide

  10. Arrow functions
    não vão funcionar

    View Slide

  11. ????????

    View Slide

  12. Herança

    View Slide

  13. Herança nos dá isso

    View Slide

  14. Herança nos dá isso
    De onde veio isso?

    View Slide

  15. De onde as coisas vem?

    View Slide

  16. Tipos originais
    De onde tudo aparece

    View Slide

  17. Array()

    View Slide

  18. Function()

    View Slide

  19. Object()

    View Slide

  20. String
    Number
    Object
    Array
    Func
    RegExp

    View Slide

  21. View Slide

  22. Como elas
    funcionam?

    View Slide

  23. View Slide

  24. __proto__

    View Slide

  25. Nunca toque no __proto__

    View Slide

  26. Object.Prototype
    Não. Não é a mesma coisa

    View Slide

  27. Prototype é um objeto de propriedades

    View Slide

  28. O famoso “new”

    View Slide

  29. Instâncias

    View Slide

  30. Instâncias

    View Slide

  31. Instâncias

    View Slide

  32. Instâncias

    View Slide

  33. Instâncias

    View Slide

  34. Herança!
    Mas não é qualquer herança...

    View Slide

  35. Herança Prototípica

    View Slide

  36. Herança Prototípica

    View Slide

  37. Instâncias

    View Slide

  38. Cadeias de protótipos
    Como eu sei o que eu quero?

    View Slide

  39. Cadeias de protótipos

    View Slide

  40. Cadeias de protótipos

    View Slide

  41. Cadeias de protótipos

    View Slide

  42. Cadeia de protótipos

    View Slide

  43. Cadeia de protótipos

    View Slide

  44. Cadeias de protótipos: a prática

    View Slide

  45. O fim da cadeia

    View Slide

  46. O fim da cadeia?

    View Slide

  47. E o “extends”?

    View Slide

  48. Extends

    View Slide

  49. Extends

    View Slide

  50. Extends: Exemplo

    View Slide

  51. Extends

    View Slide

  52. O que eu faço
    com isso?

    View Slide

  53. 1. Métodos globais

    View Slide

  54. 2. Overload

    View Slide

  55. 2. Overload - Os problemas

    View Slide

  56. View Slide

  57. 3. Performance

    View Slide

  58. 3. Performance
    .print

    View Slide

  59. 3. Performance

    View Slide

  60. 3. Performance

    View Slide

  61. Referências
    - bit.ly/medium-prototypes
    - bit.ly/ecma-proto
    - mzl.la/mdn-proto
    - mzl.la/function-js
    - mzl.la/extends-jsx
    - bit.ly/encapsulamento-js
    - bit.ly/polimorfismo-js
    - bit.ly/this-js
    - bit.ly/imasters-smoosh

    View Slide

  62. /khaosdoctor @_staticvoid
    lsantos.me @khaosdoctor

    View Slide