Objetos são um dos tipos de dados fundamentais em JavaScript. Como desenvolvedor de JavaScript, você trabalhará com eles com frequência. Uma coisa que será útil é saber como criá-los. Neste tutorial, você aprenderá como criar objetos em JavaScript de seis maneiras.
Introdução rápida
Em JavaScript, geralmente existem várias maneiras de fazer a mesma coisa. Isso inclui a criação de novos objetos. Até agora, existem pelo menos seis maneiras de fazer isso. Este tutorial mostrará cada uma dessas maneiras. Primeiro, você aprenderá como criar novos objetos com literais de objeto e a newpalavra – chave.
A seguir, você aprenderá a criar objetos com métodos Object.create()e nativos Object.assign(). Depois disso, você aprenderá a fazer isso também com construtores de função e classes ES6. Sem mais delongas, vamos começar.
No.1: Objeto literal
Usar literais de objeto é a primeira maneira de criar objetos em JavaScript. Provavelmente também é o mais fácil de aprender, lembrar e usar. Provavelmente também é por isso que é a forma mais popular de criar objetos em JavaScript. Criar um objeto dessa maneira é simples. Você envolve os pares de valores-chave com chaves ( {}).
Esses pares de valores-chave são pares de keyse valuesvocê deseja que o objeto tenha. Outro nome de objeto keymuito usado é “propriedade”. As chaves ou propriedades estão no lado esquerdo do par e os valores à direita. Entre esses dois estão dois pontos ( key: value).
Quando você envolve este par com chaves, você tem um objeto. Se você quiser criar um objeto vazio, use apenas as chaves. Depois disso, você pode atribuir esse novo objeto a alguma variável . Ou você pode usá-lo imediatamente como quiser.
// Creating object with object literal.
const myObj = {
name: 'Tom Jones',// One key-value pair.
role: 'admin',
isWorking: false,
sayHi: function() {
return `Hi, my name is ${this.name}.`
}
}
// Log the object to console.
console.log(myObj)
// Output:
// {
// name: 'Tom Jones',
// role: 'admin',
// sayHi: ƒ sayHi()
// }
// Creating an empty object with object literal.
const myEmptyObj = {}
// Log the object to console.
console.log(myEmptyObj)
// Output:
// {}
Nº 2: A “nova” palavra-chave
A segunda maneira de criar um objeto é usando a newpalavra-chave com o construtor Object () . Quando você usa este construtor, ele retorna um valor, novo objeto. Você pode atribuir este objeto a uma variável para que possa continuar trabalhando com ele. Se você deseja adicionar novas propriedades, há duas coisas que você pode fazer.
O primeiro é criar um objeto vazio e atribuí-lo a uma variável. Em seguida, você pode adicionar propriedades a esse objeto com notação de ponto ou usando colchetes. Isso permite que você defina apenas uma propriedade por vez. Portanto, se você quiser criar várias propriedades, terá que fazer isso algumas vezes.
A segunda opção é passar um objeto para o Object()construtor como um argumento. Isso também criará um objeto com as propriedades e valores que você deseja. Porém, se você deseja passar um objeto, usar o Object()construtor é redundante. Provavelmente também não é uma boa prática e definitivamente não é recomendada.
O que você pode fazer neste caso, é usar a forma literal do objeto. Discutimos isso na seção anterior acima.
// Creating object with object constructor.
const myObj = new Object()
// Add properties.
myObj.username = 'Skylar'
myObj.gender = 'female'
myObj.title = 'Fullstack dev'
// Add a method.
myObj.sayHi = function() {
return `Hi, I am ${this.username}.`
}
// Log the object to console.
console.log(myObj)
// Output:
// {
// username: 'Skylar',
// gender: 'female',
// title: 'Fullstack dev'
// sayHi: ƒ ()
// }
// Passing an object - not a good idea
const myObj = new Object({
username: 'Skylar',
gender: 'female',
title: 'Fullstack dev'
})
// Log the object to console.
console.log(myObj)
// Output:
// {
// username: 'Skylar',
// gender: 'female',
// title: 'Fullstack dev'
// }
No.3: método Object.create ()
Quando você deseja criar um novo objeto com base no Object.create()método existente , será muito útil. Este método aceita dois parâmetros. O primeiro parâmetro é para o objeto original que você deseja duplicar. Este será o prototype. O segundo parâmetro é para o objeto com propriedades e valores que você deseja adicionar ao novo objeto.
Ao usar essa forma e adicionar novas propriedades, lembre-se de uma coisa. Você especifica os valores das novas propriedades por meio valuede [descritor de propriedade], não diretamente. Você também pode especificar outras bandeiras tais como writable, enumerablee configurable. Você pode fazer isso para cada propriedade que deseja adicionar.
Da mesma forma que o Object()construtor, este método também retornará um novo objeto como resultado. Portanto, atribua-o a uma variável ao usá-lo para que possa trabalhar depois.
// Create new object (using object literal).
const human = {
species: 'human',
isAlive: true
}
// Create new object "female" with Object.create()
// and use "human" as the prototype
// and add two new properties - "gender" and "pregnant".
const female = Object.create(human, {
// Add "gender" property.
gender: {
value: 'female', // Value of "gender" property.
writable: true,
enumerable: true,
configurable: true
},
// Add "pregnant" property.
pregnant: {
value: false, // Value of "pregnant" property.
writable: true,
enumerable: true,
configurable: true
}
})
// Log the "female" object.
console.log(female)
// Output:
// {
// gender: 'female',
// pregnant: false,
// __proto__: {
// species: 'human',
// isAlive: true
// }
// }
// Log the value of "gender" property.
console.log(female.gender)
// Output:
// 'female'
// Log the value of "species" property.
// This property is inherited from "human" object.
console.log(female.species)
// Output:
// 'human'
// Log the value of "isAlive" property.
// This property is inherited from "human" object.
console.log(female.isAlive)
// Output:
// true
Uma nota sobre proto , protótipos e herança
Observação: as propriedades speciese isAliveforam herdadas do humanobjeto original . Se você registrar o femaleobjeto de conteúdo, essas duas propriedades não aparecerão diretamente dentro dele. Eles estarão dentro do __proto__objeto. Este objeto se refere ao objeto original human.
Você pode imaginar substituindo o __proto__por human. Ou substitua-o por qualquer outro objeto que você usou como protótipo. Quando você trabalha com essas duas propriedades, o JavaScript examinará esse objeto de protótipo para obter o valor real. Então, basicamente, para JavaScript female.isAlivese tornará human.isAlive.
É por isso que essas propriedades não estão listadas diretamente dentro do novo objeto e você ainda pode acessá-las. É também por isso que, se você alterar o valor da propriedade em human, obterá o novo valor também em female. Por exemplo, se você definir human.isAlivecomo false, female.isAliveagora também será false.
A razão é que em ambos os casos você está trabalhando com a mesma propriedade. Você está trabalhando human.isAlive. Em uma situação, você apenas substitui o humanpor femalecomo um “alias”. Você pode aprender mais sobre protótipos e herança de protótipos em JavaScript neste tutorial .
// Log the value of "isAlive" property.
// This property is inherited from "human" object.
console.log(female.isAlive)
// Output:
// true
// Change the "isAlive" property in "human" object.
human.isAlive = false
// Log the value of "isAlive" property again.
console.log(female.isAlive)
// Output:
// false
No.4: método Object.assign ()
O Object.assign()método oferece outra maneira de criar objetos em JavaScript. Este método é muito semelhante ao Object.create(). Este método também cria novos objetos copiando os existentes. Ao contrário do Object.create(), este método permite que você use qualquer número de objetos de origem que desejar.
Com Object.create()você pode criar um objeto com propriedades de um objeto. Com Object.assign()você pode criar um objeto com propriedades de vários objetos. Usar este método para criar novos objetos é simples. Leva dois parâmetros. O primeiro parâmetro é o novo objeto que você deseja criar.
Se você não quiser adicionar nenhuma propriedade nova, você passa um objeto vazio ( {}). Caso contrário, você passa um objeto com as propriedades que deseja adicionar. O segundo argumento são quaisquer objetos que você deseja usar como objetos de origem. Seu novo objeto herdará suas propriedades desses objetos de origem.
// Create some source objects.
const lang = {
language: 'JavaScript'
}
const job = {
jobTitle: 'Programmer'
}
const experience = {
experienceLevel: 'senior'
}
// Create new empty object with Object.assign() method.
// Use "lang", "job" and "experience" objects.
// First argument is an empty object to create.
// Second argument are source objects.
const coderAnonymous = Object.assign({}, lang, job, experience)
// Log the "coderAnonymous" object.
console.log(coderAnonymous)
// Output:
// {
// language: 'JavaScript',
// jobTitle: 'Programmer',
// experienceLevel: 'senior'
// }
// Create new object with Object.assign() method.
// Use "lang", "job" and "experience" objects
// as source objects and also add new property "name".
// First argument is an object to create with property "name".
// Second argument are source objects.
const coderJack = Object.assign({
// Add new property "name".
name: 'Jack'
}, lang, job, experience) // Specify source objects.
// Log the "coderJack" object.
console.log(coderJack)
// Output:
// {
// name: 'Jack',
// language: 'JavaScript',
// jobTitle: 'Programmer',
// experienceLevel: 'senior'
// }
No.5: Construtor de função
A quinta maneira de criar objetos em JavaScript é usando construtores de função . Esses construtores de função parecem funções regulares . No entanto, existem algumas diferenças. A primeira é que quando você usa uma função regular, você a chama ou invoca. Este não é o caso dos construtores de função.
Quando você quiser usar o construtor de função para criar um objeto, use-o de maneira semelhante ao Object()construtor. Você o usa com a newpalavra – chave. A segunda diferença é que você geralmente usa funções regulares para fazer algo, alguma ação, quando as invoca. Construtores de função são usados para criar objetos.
A terceira diferença é que os construtores de função usam muito a palavra – chave this . Funções regulares? Bem, isso depende da sua preferência e modo. Ainda assim, é menos provável que você o use thisem uma função regular. No construtor, você o usará com frequência. A última diferença é que os nomes dos construtores de função começam com letra maiúscula.
Vamos dar uma olhada em como criar e usar um construtor de função. Primeiro vem a functionpalavra – chave. A seguir está o nome do construtor da função, começando com letra maiúscula. A seguir estão os parâmetros para o construtor da função. Esses parâmetros definem as propriedades que você deseja que todos os objetos criados com o construtor tenham.
Dentro do corpo da função, você atribui esses parâmetros como novas propriedades do construtor da função. É aqui que você usa a thispalavra – chave. Isso permitirá que você faça referência ao construtor da função ao criá-lo. Também permitirá que você faça referência a cada instância, novo objeto, que você criar com o construtor.
Quando você quiser usar este construtor de função, você o usa como o Object()construtor. Nesse caso, você também passa alguns argumentos de acordo com os parâmetros que seu construtor de função assume. Se quiser adicionar algum método, você pode. Apenas certifique-se de usar a thispalavra – chave antes do nome do método.
// Create function constructor called "User".
function User(name, username, email) {
// Assign parameters as new properties of the function constructor.
// This allows you to use <objName>.property: userJoe.name
// and get the value of "name" property of "userJoe" object
// and not any other instance of User, i.e. other object.
this.name = name
this.username = username
this.email = email
// Add object method.
this.sayHi = function() {
return `Hi, my name is ${this.name}.`
}
}
// Use "User" function constructor to create new objects.
const userJoe = new User('Joe', 'joe123', 'joe@hello.com')
const userCathy = new User('Catherine', 'cathy', 'Catherine@hello.com')
// Log names of new users.
console.log(userJoe.name)
// Output:
// 'Joe'
console.log(userCathy.name)
// Output:
// 'Catherine'
// Log usernames of new users.
console.log(userJoe.username)
// Output:
// 'joe123'
console.log(userCathy.username)
// Output:
// 'cathy'
// Log emails of new users.
console.log(userJoe.email)
// Output:
// 'joe@hello.com'
console.log(userCathy.email)
// Output:
// 'Catherine@hello.com'
// Call the sayHi method for all new users.
console.log(userJoe.sayHi())
// Output:
// 'Hi, my name is Joe.'
console.log(userCathy.sayHi())
// Output:
// 'Hi, my name is Catherine.'
No.6: classes ES6
Esta última forma de criar um novo objeto também é a mais nova. Classes de JavaScript foram introduzidas na especificação ES6. As aulas podem parecer algo novo. Eles não são. Quando você olha para eles de perto, você verá que eles são na verdade muito semelhantes aos construtores de funções que acabamos de falar. Sob o capô, eles também funcionam de maneira semelhante.
Quando você deseja criar uma nova classe, você começa com a classpalavra – chave. Em seguida, você especifica o nome da classe. Depois disso, vêm as chaves e o corpo da classe. Aqui, você pode definir propriedades e métodos de classe que a classe deve ter. Essas propriedades são definidas de maneira semelhante aos construtores de função.
Você define todos eles com a thispalavra – chave no início. No entanto, você não os define diretamente no corpo, mas dentro do método do construtor . Este é um método especial que é invocado sempre que você cria uma instância da classe. Criar uma instância é basicamente criar um novo objeto baseado em uma classe.
É aqui também que você define os parâmetros da classe. Esses parâmetros serão usados para passar valores para propriedades ao criar novas instâncias (cópias) dessa classe. Quando você deseja criar uma nova instância da classe, um novo objeto baseado nela, você usa o nome da classe com a newpalavra – chave.
Este é o mesmo processo que você viu na seção anterior, onde falamos sobre construtores de função. Se sua classe aceita qualquer parâmetro, agora você pode passar os valores apropriados como argumentos. Você definiu esses parâmetros no constructormétodo em que também os atribuiu como propriedades de classe.
Vamos usar o Userconstrutor de função e escrevê-lo como uma classe. Isso o ajudará a ver como classes e construtores de função são semelhantes. Se você quiser aprender mais sobre as classes JavaScript, dê uma olhada neste tutorial que escrevi, parte um e parte dois .
// Create a new class "User".
class User {
// Create constructor method
// and define parameters for "name", "username" and "email".
constructor(name, username, email) {
this.name = name
this.username = username
this.email = email
// Also, add one class method.
this.sayHi = function() {
return `Hi, my name is ${this.name}.`
}
}
}
// Use "User" class to create new instance, new object.
const userJill = new User('Jill', 'jill987', 'jill@hello.com')
// Log the content of userJill instance/object
console.log(userJill)
// Output:
// User {
// name: 'Jill',
// username: 'jill987',
// email: 'jill@hello.com',
// sayHi: ƒ (),
// __proto__: User { constructor: ƒ User() }
// }
// Log the value of "name" property of "userJill".
console.log(userJill.name)
// Output:
// 'Jill'
// Log the value of "username" property of "userJill".
console.log(userJill.username)
// Output:
// 'jill987'
// Log the value of "email" property of "userJill".
console.log(userJill.email)
// Output:
// 'jill@hello.com'
// Call the sayHi method.
console.log(userJill.sayHi())
// Output:
// 'Hi, my name is Jill.'