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

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
   ludossan@microsoft.com @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