[JS EXPERIENCE 2018] Desmistificando herança e prototypes no Javascript - Lucas Santos, Squid
•Transferir como PPTX, PDF•
0 gostou•300 visualizações
Desmistificando herança e prototypes no Javascript - Lucas Santos, Squid [JS EXPERIENCE 2018] - 5 de julho de 2018 São Paulo/SP
Recomendados
Mais conteúdo relacionado
Mais de iMasters
Mais de iMasters (20)
[JS EXPERIENCE 2018] Desmistificando herança e prototypes no Javascript - Lucas Santos, Squid
- 1. Desmistificando Herança e Prototypes no Javascript Sempre esteve lá, ninguém sabia o porquê
- 8. Polimorfismo
- 10. Arrow functions não vão funcionar
- 11. ????????
- 12. Herança
- 13. Herança nos dá isso
- 14. Herança nos dá isso De onde veio isso?
- 15. De onde as coisas vem?
- 16. Tipos originais De onde tudo aparece
- 17. Array()
- 18. Function()
- 19. Object()
- 24. __proto__
- 25. Nunca toque no __proto__
- 26. Object.Prototype Não. Não é a mesma coisa
- 27. Prototype é um objeto de propriedades
- 28. O famoso “new”
- 29. Instâncias
- 30. Instâncias
- 31. Instâncias
- 32. Instâncias
- 33. Instâncias
- 34. Herança!
- 37. Instâncias
- 38. Cadeias de protótipos Como eu sei o que eu quero?
- 44. Cadeias de protótipos: a prática
- 45. O fim da cadeia
- 46. O fim da cadeia?
- 47. E o “extends”?
- 48. Extends
- 49. Extends
- 50. Extends: Exemplo
- 51. Extends
- 52. O que eu faço com isso?
- 54. 2. Overload
- 55. 2. Overload - Os problemas
- 57. 3. Performance
- 59. 3. Performance
- 60. 3. Performance
- 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
Notas do Editor
- Quando falamos de Prototypes estamos falando diretamente de Herança, um dos pilares da orientação a objetos. Terminar com QUAIS SÃO OS PILARES DA ORIENTAÇÃO A OBJETOS?
- O primeiro pilar, tem uma definição formal mas basicamente é a capacidade de restringir acesso a métodos e propriedades, não é bonito no JS mas é possível
- Um exemplo seria encapsular um nome, no Javascript brincamos muito com o contexto para fazer isso possível
- O Javascript não possui o encapsulamento nativo
- O segundo pilar, possibilidade de objetos compartilharem comportamentos e sobrescreverem esses comportamentos de acordo com a necessidade
- Para falar disso vamos ter que notar duas coisas
- Arrow functions vão trocar o contexto para o contexto imediatamente superior (no nosso caso, Window) e esse contexto não tem os atributos, vai dar undefined em tudo
- O que é isso?
- Agora estamos chegando aonde queremos. O terceiro pilar, capacidade de objetos acessarem propriedades de outros objetos sem instancia-los
- A herança é o que permite que utilizemos métodos específicos de um Array sem que a gente tenha implementado eles.
- Nunca definimos nenhuma propriedade Map, ela deve estar vindo de algum lugar
- Essa é uma pergunta que a gente deveria fazer mais.
- Você já se perguntou quais são os tipos básicos do Javascript? O Javascript tem 3 tipos base de onde a maioria das coisas são geradas: O Array, o Object e o Function
- Quando criamos arrays, a notação literal é igual a notação de classe, e tudo isso vem de um objeto global Array
- O mesmo vale para funções
- Para objetos, a coisa é um pouco diferente, visto que se você colocar uma string em um new Object ele dará uma string com todas as propriedades da string
- Isto acontece porque TUDO deriva de Object, dependendo do parâmetro passado. Os contrutores são apenas funções que chamam new Object() e ele devolve valores baseados nos tipos primitivos
- Como esse objeto funciona? Como podemos usar uma função em um array e não em uma string?
- A questão é, como eu posso fazer .map em um array mas não em uma string?
- o dunder proto é uma implementação não oficial que foi criada para colocar as implementações do JS para cada navegador. É a referencia para o objeto acima da cadeia, enquanto o prototype é a referencia par ao objeto atual. Terminar com “Então é daí que vem a herança? O que a gente faz com isso?”
- Não podemos mexer nisso porque é um objeto de referência para outro objeto, alterar suas propriedade vai alterar a propriedade global do objeto no JS, ele foi criado só para questões de compatibilidade
- O __proto__ é referencia para outro objeto diferente, que é o prototype do objeto superior, onde de fato as implementações estão
- O objeto prototype só existe em funções para os casos quando você quer usar essas funções como construtores com o new
- E o que é o new então?
- Vamos imaginar que temos o mesmo código de antes e vamos criar uma instancia dessa função
- Quando usamos new, um objeto vazio é criado e colocado em prototype, depois ele é associado ao this e, por consequencia, o this.__proto__ é o Object.prototype (porque o this é um objeto)
- Se printarmos o prototype da instancia, ele será undefined, porque a instancia não é uma função e não pode ser usado como construtor
- Mas se printarmos o prototype do construtor, ele existe
- E se usarmos o __proto__ ele vai apontar para o prototype da funçao acima
- Dar definição de herança prototípica falando da forma de bolo, que você tem alguma coisa que pode virar o bolo mas vc precisa de uma forma para aquilo Da mesma forma criar um array vai colocar o objeto em uma “forma” de array com todas as propriedades
- Você pode fazer isso com qualquer tipo primitivo. Então como vamos usar essas propriedades? Como o JS sabe onde um método está?
- Herança no JS nada mais é do que uma propriedade passada entre objetos
- Analogia da escola: Imagine que você tem uma prova para fazer mas não tem caneta. Você pede para um amigo se ele tem uma caneta, mas ele também não tem, então ele pede para o amigo dele, e este amigo tem uma caneta que é passada para você.
- Na analogia, o __proto__ é como o JS sabe que você é amigo da outra pessoa e o prototype é o que você tem disponível
- Falar sobre a função hasOwnProperty que diz se o próprio objeto possui um método e não sua cadeia de protótipos PROXIMO SLIDE TEM O EXEMPLO
- O __proto__ sempre aponta para o prototype do objeto de cima da cadeia e o __proto__ deste aponta para o outro acima e assim vai
- Aqui é aonde a herança aparece, se chamarmos George.hello() vamos procurar o método em outro objeto que não é o nosso
- Fazer a pergunta: Se eu fizer isso para os Arrays e Functions, vou obter o mesmo resultado?
- Não, o Array e Function são construtores assim como todos os outros métodos String, Boolean e etc, eles tem a forma no Object
- E como o Extends funciona?
- Quando fazemos a notação de extends, essencialmente estamos dizendo que a classe filha é protótipo do pai
- Que é essencialmente isto que estamos fazendo
- Um exemplo com uma classe real
- Quando damos “class x extends null” criamos uma classe que não estende o Object.prototype
- Métodos que podem ser sobrescritos. A chave está na linha 7, aqui podemos usar o exemplo que Printer é o driver genérico enquanto Epson é o driver proprietário
- O problema com overloads é sobrescritas de objetos globais como Array e Object
- Fazer isso em sistemas grandes pode quebrar completamente tudo (dar exemplo do facebook) FALAR SOBRE O ARTIGO SMOOSHGATE
- Criar métodos locais criará cópias do mesmo método para todas as instancias do objeto. Dizer que TALVEZ NÃO SEJA O MELHOR EXEMPLO, falar sobre usuários
- Voltando para o que explicamos antes, o this é um objeto vazio que é criado todas as vezes
- O que fazemos aqui é instanciar 5 milhões de métodos print iguais em 5 milhões de objetos diferentes, cada um apontando para um endereço de memória, o que pode causar um memory leak
- O ganho não é tanto no tempo, mas sim na performance de memória