Objects in JavaScript

I'm starting a series of posts about JavaScript concepts, and this is just the beginning. In this first post, the basic concept of objects will be explored, which is essential to understanding how the data structure works in JavaScript.

Stay tuned for the next posts, which will continue this article and several other topics.

---

What is an object?

the real world, objects are entities (real or abstract). For example: pencil, car, notebook. Each of these objects has specific properties. For example: a blue car, a red pencil or a large notebook.

In JavaScript, objects are independent entities that collect properties. Properties are associations between a name and a value, that is, information that describes the object.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

In this example, color and size are properties of the car object, and each of them has an associated value.

Creating Objects

Literal syntax

Literal objects are created in a simple and direct way, where the values ​​are already defined manually. This syntax is ideal when you have a fixed set of properties for the object.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

This type of object is useful when properties don't change often or when you need to quickly create an object with fixed values.

Constructor Functions

Constructor functions are used to create objects dynamically, especially when you need multiple similar objects. When using the new keyword, a new object is created that references the constructor function.

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

As a more conventional and less academic example:

function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;

  this.cumprimentar = function () {
    console.log("Olá, meu nome é " + this.nome);
  };
}

const pessoa1 = new Pessoa("João", 30);
const pessoa2 = new Pessoa("Maria", 25);

pessoa1.cumprimentar(); // Olá, meu nome é João
pessoa2.cumprimentar(); // Olá, meu nome é Maria

In this case, the output will be "Stamped" with the values ​​assigned by the person1 and person2 variables in the model stipulated by the Person function.

Use of the word This

Within a constructor, we use the this keyword to refer to the object being created. This allows you to define dynamic properties and methods for the object.

For example, in the code above, this.name and this.age define the properties of the object, and the greet method is a function associated with the object.

Inheritance in constructors

Inheritance in JavaScript works through prototypes. Instead of creating one object directly from another, you create a hierarchy where one object can inherit properties and methods from another. This is done using the call or apply methods.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

How does Inheritance work?

When we use Pessoa.call(this, nome), we are calling the Pessoa constructor and passing the context of the Student object. This causes the student1 object to inherit the name property from Person and also have the age property, which is exclusive to the Student function.

Constructor functions are most used when there is a need to create several objects with many properties and methods with variable values. In this case, it is better to use a constructor object as a "stamp" than writing multiple objects manually.

Constructor objects

Objects created using constructor functions are instances generated by the new operator. Each instance has its own properties, but shares methods defined in the prototype of the constructor function.

This means that if you create multiple objects from a constructor function, they will have the same methods but different values ​​for their properties.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

• In this case, the new operator creates a new object, binding the context (this) to the constructor function

• For shared methods, it is more efficient to add the prototype of the constructor function. This avoids duplication in memory.
  

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

By defining methods in the prototype of a constructor function, we avoid code duplication. Instead of each object having a copy of the method, they all share the same method, saving memory.

The new operator creates a new object and binds the context (this) to the constructor function.

For shared methods, it is more efficient to add them to the prototype of the constructor function, avoiding duplication in memory.

The above is the detailed content of Objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!