JavaScript oferece várias maneiras de criar objetos. Essas formas incluem literais de objeto Object(), classes e funções de construtor. Este tutorial mostrará a você a terceira opção. Você aprenderá o que são funções de construtor, como funcionam e como usá-las para criar objetos.
Objetos, plantas, construtores
Em JavaScript, existem várias maneiras de criar objetos. As ferramentas mais simples que você pode usar são literais de objeto , new Object()ou Object.create(). No entanto, e se você quiser algo mais diferente? E se você criar um objeto que possa ser usado como um projeto, ou uma receita, para criar outros objetos semelhantes?
Imagine que você deseja criar alguns objetos, todos com as mesmas propriedades, talvez também métodos. Você pode definitivamente fazer este objeto literal. No entanto, será necessário copiar uma grande quantidade de código. Ou exigirá clonagem desnecessária de objetos, o que às vezes pode ser bastante imprevisível.
Outra opção é criar algo chamado “construtor”. Este construtor pode ter várias propriedades e métodos diversos e você pode usá-lo para criar novos objetos. Cada objeto que você cria com este construtor também terá todas as propriedades e métodos definidos no construtor. Isso pode economizar muito tempo e código.
Uma maneira de criar esse construtor é usando classes JavaScript introduzidas no ES6. Outra opção é usar algo chamado “funções construtoras”. Vamos dar uma olhada no que são essas funções construtoras, como funcionam e como usá-las para criar objetos.
O básico das funções do construtor
A sintaxe das funções do construtor é simples e direta. Isso é especialmente verdadeiro se você conhece as funções JavaScript. A sintaxe desses dois é quase idêntica. Cada função construtora começa com a functionpalavra – chave. O que se segue é o nome do nome da função construtora.
O nome da função construtora deve começar com uma letra maiúscula. Isso não é obrigatório, mas é uma convenção popular e uma boa prática. No entanto, se você usar letras minúsculas, isso funcionará. Em seguida, estão os parênteses com parâmetros. Mesmo se você não quiser especificar nenhum parâmetro, ainda assim terá que incluir os parênteses.
O último é o corpo da função que segue após os parênteses com parâmetros. Este corpo é o lugar onde você especifica propriedades e métodos para o construtor. Quando você usa esse construtor para criar novos objetos, todos eles terão essas propriedades e métodos.
// Syntax of a constructor function:
// - function keyword
// - name of the constructor function
// - parameters for constructor function
// - body of the constructor function
function MyConstructorFunc(param) {
// Function constructor body.
}
Criação de objetos com função de construtor
Criar funções construtoras é uma coisa. Usá-los para criar novos objetos é outra. Felizmente, só existe uma maneira de fazer isso. Quando você deseja criar um novo objeto usando a função de construtor, você usa a newpalavra – chave. Esta palavra-chave é seguida pelo nome do construtor e um conjunto de parênteses.
Se o seu construtor aceita qualquer parâmetro, passe todos os argumentos necessários entre parênteses. Caso contrário, deixe-os vazios. Normalmente, você fará isso junto com a atribuição de um novo objeto a uma variável. Lembre-se de que você pode usar funções de construtor para criar quantos objetos desejar.
// Create constructor function:
function Person() {}
// Create object with Person constructor:
const personOne = new Person()
// Create another object with Person constructor:
const personTwo = new Person()
Definindo propriedades, métodos
Definir propriedades e métodos em funções de construtor é simples. Dito isso, há uma coisa que você precisa lembrar. Quando você quiser definir uma propriedade ou método, você deve usar a thispalavra – chave. Não use let, constou varpara fazer isso. Você não está tentando definir uma variável, mas uma propriedade.
Portanto, no lado esquerdo, comece com a thispalavra – chave e a seguir especifique o nome da propriedade. Adicione um ponto ( .) entre esses dois. No lado direito, defina o valor da propriedade e pronto. Se você quiser definir um método, o processo é quase o mesmo. Você também deve usar a thispalavra – chave, seguida do nome do método.
A única diferença está no lado direito. Aqui, você deve usar a functionpalavra – chave. Isso dirá ao JavaScript que você deseja definir uma função. Você também pode usar uma função de seta em vez de uma função normal. Ao definir um método construtor, você pode acessar qualquer propriedade que já exista dentro do construtor.
Para acessar a propriedade, para referenciá-la corretamente, você deve usar a thispalavra – chave. A this, neste caso, é uma referência para a função construtora si. Então, thisé basicamente assim constructorFunctionItself.
// Create constructor function:
function Person() {
// Define properties "name" and "age":
this.name = 'Anonymous'
this.age = 35
// Define method "getName" that returns a short message:
this.getName = function() {
// "this" here refers to the "Person" constructor.
// "this.name" is like "Person.name".
return `Hello, my name is ${this.name}.`
}
}
// Create object with Person constructor:
const personOne = new Person()
// Log the value of "name":
console.log(personOne.name)
// Output:
// 'Anonymous'
// Log the "getName" message:
console.log(personOne.getName())
// Output:
// 'Hello, my name is Anonymous.'
// Create another object with Person constructor:
const personTwo = new Person()
// Log the value of "name":
console.log(personTwo.name)
// Output:
// 'Anonymous'
// Log the "getName" message:
console.log(personTwo.getName())
// Output:
// 'Hello, my name is Anonymous.'
Definição de propriedades e métodos fora do construtor
Definir propriedades e métodos apenas dentro da função do construtor quando você a define é uma opção. Outra opção é defini-los fora dele, após a criação do construtor. Nesse caso, você usará uma propriedade chamada prototype . Esta é uma propriedade especial que toda função em JavaScript possui.
Esta prototypepropriedade é um objeto que contém todas as propriedades e métodos definidos em uma função construtora. Ele também contém constructorpropriedades. Esta propriedade aponta para o construtor com o qual você está trabalhando no momento. O uso dessa propriedade permite adicionar propriedades e métodos para construtor, alterá-los ou removê-los.
// Create constructor function:
function Person() {
// Define properties "name" and "age":
this.name = 'Anonymous'
this.age = 35
}
// Create object with Person constructor:
const personOne = new Person()
// Create another object with Person constructor:
const personTwo = new Person()
// Add properties to Person constructor using prototype:
Person.prototype.gender = 'female'
Person.prototype.height = 1.7
// Log the value of "gender" on "personOne" object:
console.log(personOne.gender)
// Output:
// 'female'
// Log the value of "height" on "personTwo" object:
console.log(personTwo.height)
// Output:
// 1.7
// Add method "getName" to Person constructor using prototype:
Person.prototype.getName = function() {
// "this" here will correctly refer to the Person constructor.
// So, "this.name" will again basically become "Person.name".
return `Hello, my name is ${this.name}.`
}
// Log the message:
console.log(personTwo.getName())
// Output:
// 'Hello, my name is Anonymous.'
Observação sobre prototype: Como você pode ver no exemplo acima, há uma coisa a lembrar. Ao adicionar propriedade ou método a um construtor por meio de protótipo, você também o adiciona a todos os objetos já criados com esse construtor.
Definição de propriedades e métodos para objetos construtores
Às vezes, você pode querer adicionar uma propriedade ou método, mas apenas a um objeto, não a todos. Nesse caso, prototypenão é uma opção, pois isso adicionaria a propriedade ou método em todos os lugares. Em vez disso, o que você pode fazer é adicionar a propriedade ou método diretamente a um objeto específico. Por exemplo, usando a notação de ponto.
Depois disso, apenas o objeto em questão terá essa nova propriedade ou método. Outros objetos criados com o mesmo construtor não. Esta é a maneira que você usaria para adicionar uma propriedade ou método a um objeto regular. Todo objeto criado com um construtor é um objeto. Então, isso funciona aqui também.
// Create constructor function:
function Person() {
// Define properties "name" and "age":
this.name = 'Anonymous'
this.age = 35
}
// Create object with Person constructor:
const personOne = new Person()
// Create another object with Person constructor:
const personTwo = new Person()
// Add property "gender" only to "personOne" object:
personOne.gender = 'female'
// Add property "height" only to "personTwo" object:
personTwo.height = 1.7
// Log the value of "gender" on "personOne" object:
console.log(personOne.gender)
// Output:
// 'female'
// Log the value of "height" on "personOne" object:
console.log(personOne.height)
// Output:
// undefined // <= this is correct, height exists only on personTwo
// Log the value of "gender" on "personTwo" object:
console.log(personTwo.gender)
// Output:
// undefined // <= this is correct, gender exists only on personOne
// Log the value of "height" on "personTwo" object:
console.log(personTwo.height)
// Output:
// 1.7
// Add "getGender()" method only to "personOne" object:
personOne.getGender = function() {
return `I am a ${this.gender}.`
}
// Add "getHeight()" method only to "personTwo" object:
personTwo.getHeight = function() {
return `I am ${this.height}m tall.`
}
// Call the "getGender()" method on "personOne" object:
console.log(personOne.getGender())
// Output:
// 'I am a female.'
// Call the "getHeight()" method on "personOne" object:
console.log(personOne.getHeight())
// Output:
// TypeError: personOne.getHeight is not a function
// Call the "getGender()" method on "personTwo" object:
console.log(personTwo.getGender())
// Output:
// TypeError: personTwo.getGender is not a function
// Call the "getHeight()" method on "personTwo" object:
console.log(personTwo.getHeight())
// Output:
// 'I am 1.7m tall.'
Funções e parâmetros do construtor
A opção de criar blueprint para objetos é boa. Até agora, você viu exemplos de construtores em que todos os dados eram estáticos e não podiam ser alterados. Isso não significa que esse seja o único caminho. No início, quando falamos sobre a sintaxe, mencionei brevemente os parâmetros.
É assim que você pode tornar as funções do construtor mais dinâmicas. Assim como você pode definir parâmetros para funções regulares, você também pode defini-los para construtores. No caso de construtores, você especifica argumentos ao criar objetos com a newpalavra – chave. Você passa esses argumentos entre parênteses que seguem o nome da construção.
Ao definir alguns parâmetros para um construtor, você pode usá-lo em qualquer lugar dentro do construtor. Pegue o Personconstrutor com o qual você está trabalhando neste tutorial. Geralmente continha duas propriedades: namee age. Ter essas duas propriedades iguais para todos os objetos não faz sentido.
Em vez de ter ambas as propriedades definidas com valores estáticos, você pode adicionar dois parâmetros para o construtor. Um parâmetro para cada propriedade. Então, dentro do construtor, você pode usar esses parâmetros para atribuir essas propriedades com os valores fornecidos. Isso permitirá que você crie objetos com diferentes valores para namee agepropriedades.
// Create constructor function
// that accepts two parameters, "name" and "age":
function Person(name, age) {
// Define properties and assign them
// with values provided for "name" and "age":
this.name = name
this.age = age
}
// Create object with Person constructor:
const personOne = new Person('Stan', 33)
// Create another object with Person constructor:
const personTwo = new Person('July', 29)
// Log the value of "name" on "personOne" object:
console.log(personOne.name)
// Output:
// 'Stan'
// Log the value of "age" on "personOne" object:
console.log(personOne.age)
// Output:
// 33
// Log the value of "name" on "personTwo" object:
console.log(personTwo.name)
// Output:
// 'July'
// Log the value of "age" on "personTwo" object:
console.log(personTwo.age)
// Output:
// 29
Uma palavra sobre funções de construtor e este
A thispalavra-chave é muito importante quando você trabalha com funções de construtor. Você o usa quando deseja definir novas propriedades e métodos. Você também usa thispalavra-chave quando deseja acessar alguma propriedade e chamar algum método. No entanto, não importa a frequência com que você precisa usar a thispalavra-chave.
Entender o que thisé, a que se refere naquele momento ainda pode ser uma pergunta difícil de responder. Aqui está a resposta simples. O valor de thispode ser uma de duas coisas. Primeiro, quando você está em um construtor de função, o valor será o construtor.
Em segundo lugar, quando você cria um novo objeto com o construtor, o valor de thisse tornará o novo objeto. Isso se aplicará a cada instância, a cada novo objeto que você criar. O valor de thissempre será aquele objeto específico.
// Create constructor function:
function Person(name, age) {
// "this" here refers to the constructor function.
// this.name => Person.name
this.name = name
this.age = age
}
const objJoe = new Person('Joe', 19)
// For "objJoe" object the value of "this"
// will be the "objJoe" object itself.
// So, "this.name" in constructor will become "objJoe.name".
console.log(objJoe.name)
// Output:
// 'Joe'
const objTim = new Person('Tim', 23)
// For "objTim" object the value of "this"
// will be the "objTim" object itself.
// So, "this.name" in constructor will become "objTim.name".
console.log(objJoe.name)
// Output:
// 'Tim'
Conclusão: Introdução às funções construtoras de JavaScript
As funções do construtor podem ser úteis quando você deseja criar vários objetos com a mesma forma, mas menos código. Eles também podem tornar seu código mais fácil de alterar e manter. Espero que este tutorial tenha ajudado você a entender o que são funções de construtor, como funcionam e como usá-las para criar objetos.