menu Menu

  • Entendendo o Constructor Pattern no Javascript

  • Aug 27th, 2016 • javascript, nodejs

Fotografia de capa por Marcel Karg, tirada por uma Sony ILCE-7M2

Hey pessoal! Começando com nosso primeiro pattern em javascript, vamos falar do Constructor pattern :D

O que é?

Em linguagens orientadas a objeto clássica, o construtor é um método especial usado para inicializar um objeto e alocar um espaço na memória para ele, em javascript como tudo são objetos exceto o undefined é bem interessante essa abordagem.

Como funciona?

Em javascript, pelo mesmo até a versão do ECMAScript 5, não existiam classes e precisávamos usar as constructor functions se quiséssemos usar esse pattern.

Syntax do ES5

// Função construtora
function People (name, age) {
  this.name = name
  this.age = age
}

// Criando instancia
var aluno = new People('Igor', 18)

console.log(
  aluno.name, 
  aluno.age
)

Uma convenção das constructor functions para diferenciar das funções comuns, é usar a primeira letra maiuscula, assim só de passar o olho já sabemos do que se trata

Como você pode ver ali, usamos o this para referenciar o objeto que vai ser criado, usando ele para criar os atributos do objeto igualando-os aos parâmetros que vão chegar da instanciação. Outra coisa que você pode notar também é o new, que cria o uma nova instância.

Factory functions vs Constructor functions

Factory functions, criam objetos também assim como as constructor functions, a diferença é que elas não igualam o protótipo do objeto que vai ser criado com o da função, veja o exemplo:

// Função construtora
function CreateConstructor (name) {
  this.name = name
}

// Criando método no prototipo
CreateConstructor.prototype.show = function () {
  console.log(this.name)
}

// Função fábrica
function CreateFactory (name) {
  this.name = name
}

// Criando método no prototipo
CreateFactory.prototype.show = function () {
  console.log(this.name)
}

var peopleContructor = new CreateContructor('Igor')
var peopleFactory = CreateFactory('Halfeld')

// Iqualando o prototipo do objeto com o da função,
// caso eu não faça isso, quando chamar a função 
// `show`, iria me retornar `is not a function`
peopleFactory.__proto__ = CreateFactory.prototype 


// Chamando o método do prototipo
peopleConstructor.show() // Igor
peopleFactory.show() // Halfeld

Repare que na factory function não chamamos o new, apenas invocamos a função

Syntax do ES6

// Class
class People {
  construtor (name, age) {
    this.name = name
    this.age = age
  }
}

// Criando instancia
const aluno = new People('Igor', 18)

console.log(
  aluno.name, 
  aluno.age
)

Apesar de agora podermos criar classes explicitamente, ainda é possivel usar a syntax antiga.

Encerramento

Então é isso ae pessoal! espero que tenham gostado do primeiro post da serie, caso eu tenha esquecido de alguma coisa ou vocês tenham ficado com alguma dúvida, só colocar aí nos comentários qué nós :D

Read next...