JavaScript Orientado a Objetos 

Um pouco de história 

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.” 

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. 

Objetos { id: 123, nome: 'churros', preço: 2.75, tags: [ 'comidas', 'doces' ] } 

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 

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!') } 

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() } 

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. 

Classes Não há! 

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. 

Recursão aberta function foo () { var bar = function () { return this } console.log('foo: this é ' + this) // global console.log('bar: this é ' + bar()) // global } 

Recursão aberta var obj = { foo: function () { var bar = function () { return this } console.log('foo: this é ' + this) // obj console.log('bar: this é ' + bar()) // ahn? } } 

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 :) } } 

Instanciação var obj = { } 

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] 

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 

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. 

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 

Herança prototípica __proto__ 

Herança prototípica .constructor.prototype.constructor.prototype.constructor.(...) 

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') 

Herança prototípica 

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.” 

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 } 

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 } } 

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 } } ) 

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 } ) 

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! 

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! 

Bônus http://leftoversalad.tumblr.com 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus 

Bônus