JavaScript Orientado a Objetos

Transcript

1. JavaScript Orientado a Objetos
2. Um pouco de história
3. Um pouco de história “I thought of objects being like biological cells and/or individual computers on a network, only able to communicate with messages (...)” “OOP to me means only messaging, local retention and protection and hiding of state-process, and extreme late-binding of all things.”
4. O que falaremos hoje • Objetos; • Métodos; • Classes; • Interfaces; • Polimorfismo; • Recursão aberta; • Instanciação; • Herança; • Encapsulamento. • Associação; • Composição; • Padrões de projeto; • SOLID; • GRASP; • DDD.
5. Objetos { id: 123, nome: 'churros', preço: 2.75, tags: [ 'comidas', 'doces' ] }
6. Objetos 'prop' in obj // false obj.prop = 'foo' // 'foo' obj.prop = 'bar' // 'bar' obj.prop // 'bar' obj['prop'] // 'bar' delete obj.prop // true 'prop' in foo // false
7. Métodos foo.bar = function () { console.log('Uma propriedade de um objeto aceita qualquer valor.') console.log('Inclusive uma função.') console.log('Pode me chamar de método então!') }
8. Interfaces e Polimorfismo var gato = { nome: 'Gato', barulho: function () { console.log('miau') } } var pato = { nome: 'Pato', barulho: function () { console.log('quack!') } } function qualBarulho (animal) { console.log('O ' + animal.nome + ' faz:') animal.barulho() }
9. Interfaces e Polimorfismo O código que acabamos de ver é polimórfico, mas existe um outro aspecto do polimorfismo que é mudar o comportamento da superclasse na subclasse. Deixemos para quando falarmos de herança.
10. Classes Não há!
11. Recursão aberta this • objeto global em chamadas simples; • o próprio objeto em métodos; • o objeto sendo construído em chamadas com new; • o primeiro parâmetro em call e apply.
12. Recursão aberta function foo () { var bar = function () { return this } console.log('foo: this é ' + this) // global console.log('bar: this é ' + bar()) // global }
13. Recursão aberta var obj = { foo: function () { var bar = function () { return this } console.log('foo: this é ' + this) // obj console.log('bar: this é ' + bar()) // ahn? } }
14. Recursão aberta var obj = { foo: function () { var that = this var bar = function () { return that } console.log('foo: this é ' + this) // obj console.log('bar: this é ' + bar()) // obj :) } }
15. Instanciação var obj = { }
16. Instanciação function criaAnimal (nome, barulho) { return { nome: nome, barulho: barulho } } var pato = criaAnimal('pato', 'quack!') pato.constructor // [Function: Object] function criaAnimal (nome, barulho) { var animal = { } animal.nome = nome animal.barulho = barulho return animal } var pato = criaAnimal('pato', 'quack!') pato.constructor // [Function: Object]
17. Instanciação // é importante iniciar com letra maiúscula! function Animal (nome, barulho) { this.nome = nome this.barulho = barulho } var pato = new Animal('pato', 'quack!') pato.constructor // [Function: Animal] pato instanceof Animal // true
18. Herança prototípica Herança é utilizar a estrutura e o comportamento da superclasse na subclasse. Na herança prototípica não existe distinção entre instância e classe, um objeto qualquer pode ser utilizado como protótipo para criação de outro (objetos estes dividindo um protótipo em comum). Prototípicos são dinâmicos, podemos alterá-los em tempo de execução. Esqueça classes abstratas, sealed, interfaces, etc.
19. Herança prototípica function Animal (nome, barulho) { this.nome = nome this.barulho = barulho } var pato = new Animal('pato', 'quack!') var pato2 = new Animal('pato 2', 'queeeeeeeeeck') 'apresentacao' in pato // false Animal.prototype.apresentacao = function () { console.log('Eu sou ' + this.nome + ' e faço ' + this.barulho) } 'apresentacao' in pato // true pato.hasOwnProperty('apresentacao') // false
20. Herança prototípica __proto__
21. Herança prototípica .constructor.prototype.constructor.prototype.constructor.(...)
22. Herança prototípica function Animal (nome, barulho) { this.nome = nome this.barulho = barulho } Animal.prototype.apresentacao = function () { console.log('Eu sou ' + this.nome + ' e faço ' + this.barulho) } var cao = new Animal('cão', 'auuuu') function Pato (barulho) { Animal.call(this, 'pato', barulho) } Pato.prototype = Object.create(Animal. prototype) Pato.prototype.quack = function () { console.log(this.barulho) } var pato = new Pato('quack!') var pato2 = new Pato('queeeeeeeeeck')
23. Herança prototípica
24. Encapsulamento • Proteger o estado do objeto do mundo exterior. • Em JavaScript nosso típico private não existe. “Lots of so called object oriented languages have setters and when you have an setter on an object you turned it back into a data structure.”
25. Encapsulamento // utilizando prefixos function Circulo (diametro) { // convenciona-se que propriedades iniciadas por "_" são privadas // nenhum tratamento especial é feito pela linguagem // funcionam como uma propriedade qualquer this._raio = diametro / 2 }
26. Encapsulamento // utilizando closures function Circulo (diametro) { // enclausuramos o raio apenas a função construtora // e expomos o que for necessário via funções var _raio = diametro / 2 this.setDiametro = function (diametro) { _raio = diametro / 2 } this.getDiametro = function (diametro) { return _raio * 2 } }
27. Encapsulamento // utilizando getters/setters function Circulo(diametro) { this._raio = diametro / 2 } Object.defineProperty( Circulo.prototype, 'diametro', { get: function () { return this._raio * 2 }, set: function(diametro) { this._raio = diametro / 2 } } )
28. Encapsulamento function Circulo (diametro) { this._raio = diametro / 2 } Object.defineProperty( Circulo.prototype, 'PI', { value: 3.1415, enumerable: true, writable: false // apesar de a escrita não gerar erro (é ignorada), funciona como uma constante } )
29. Conclusão JavaScript pegou emprestado conceitos de diversas linguagens de programação. A linguagem é dinâmica não só no que diz a respeito a sua sintaxe ou tipagem, mas também em como OO é feito. Não tente fazer OO da forma clássica, entenda bem como JavaScript funciona e arquitete a solução para sua necessidade. E claro, lembre-se de evitar as más partes!
30. Conclusão JavaScript pegou emprestado conceitos de diversas linguagens de programação. A linguagem é dinâmica não só no que diz a respeito a sua sintaxe ou tipagem, mas também em como OO é feito. Não tente fazer OO da forma clássica, entenda bem como JavaScript funciona e arquitete a solução para sua necessidade. E claro, lembre-se de evitar as más partes!
31. Bônus http://leftoversalad.tumblr.com
32. Bônus
33. Bônus
34. Bônus
35. Bônus
36. Bônus
37. Bônus
38. Bônus
39. Bônus
40. Bônus
41. Bônus
42. Bônus
43. Bônus
44. Bônus