Aprenda Usando Propriedades Dentro de Métodos | Fundamentos de Objetos em JavaScript

Vamos aprofundar no uso de métodos de objetos e explorar como os métodos utilizam a palavra-chave this para acessar as propriedades do objeto.

Acessar propriedades do objeto em métodos

Dentro de um método, this permite ler ou atualizar as propriedades do objeto.

const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",
  getInfo() {
    console.log(this);
  },
};

// Method call
furniture.getInfo(); // Output: {type: 'wardrobe', manufacturer: 'Belgium', color: 'wenge magic', getInfo: ƒ}

No método getInfo, this refere-se ao objeto furniture e representa todo o conteúdo interno do objeto.

Exemplo Prático

Em métodos, é possível acessar as propriedades do objeto por meio de this e, em seguida, utilizar a notação de ponto para acessar propriedades específicas normalmente.

No exemplo abaixo, os métodos getColor, addProperty e modifyProperty utilizam this para acessar a propriedade furniture e realizar diversas operações.

getColor exibe a cor do guarda-roupa no console utilizando this para referenciar as propriedades do objeto;
addProperty adiciona novas propriedades ao objeto furniture. Recebe dois parâmetros: propertyName (nome da nova propriedade) e propertyValue (valor a ser atribuído à nova propriedade);
modifyProperty altera o valor de uma propriedade existente no objeto furniture. Recebe dois parâmetros: propertyName (nome da propriedade a ser modificada) e propertyValue (novo valor a ser atribuído à propriedade).


              12345678910111213141516171819202122232425262728
            
const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",

  getColor() {
    console.log(this.color);
  },

  addProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },

  modifyProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },
};

// Access the `color` property of the `furniture` and log it to the console.
furniture.getColor(); // Output: wenge magic

// Add a new property to the `furniture` object using the `addProperty` method.
furniture.addProperty("material", "wood");
console.log(furniture.material); // Output: wood

// Modify an existing property using the `modifyProperty` method.
furniture.modifyProperty("color", "oak");
console.log(furniture.color); // Output: oak

Nota

this garante que o método sempre se refira ao objeto correto, mesmo se o método for reutilizado ou copiado para outro lugar.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 10

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain how the `this` keyword works in different contexts?

What happens if I call one of these methods from outside the object?

Can you show more examples of using `this` in object methods?

Deslize para mostrar o menu

Vamos aprofundar no uso de métodos de objetos e explorar como os métodos utilizam a palavra-chave this para acessar as propriedades do objeto.

Acessar propriedades do objeto em métodos

Dentro de um método, this permite ler ou atualizar as propriedades do objeto.

const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",
  getInfo() {
    console.log(this);
  },
};

// Method call
furniture.getInfo(); // Output: {type: 'wardrobe', manufacturer: 'Belgium', color: 'wenge magic', getInfo: ƒ}

No método getInfo, this refere-se ao objeto furniture e representa todo o conteúdo interno do objeto.

Exemplo Prático

Em métodos, é possível acessar as propriedades do objeto por meio de this e, em seguida, utilizar a notação de ponto para acessar propriedades específicas normalmente.

No exemplo abaixo, os métodos getColor, addProperty e modifyProperty utilizam this para acessar a propriedade furniture e realizar diversas operações.

getColor exibe a cor do guarda-roupa no console utilizando this para referenciar as propriedades do objeto;
addProperty adiciona novas propriedades ao objeto furniture. Recebe dois parâmetros: propertyName (nome da nova propriedade) e propertyValue (valor a ser atribuído à nova propriedade);
modifyProperty altera o valor de uma propriedade existente no objeto furniture. Recebe dois parâmetros: propertyName (nome da propriedade a ser modificada) e propertyValue (novo valor a ser atribuído à propriedade).


              12345678910111213141516171819202122232425262728
            
const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",

  getColor() {
    console.log(this.color);
  },

  addProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },

  modifyProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },
};

// Access the `color` property of the `furniture` and log it to the console.
furniture.getColor(); // Output: wenge magic

// Add a new property to the `furniture` object using the `addProperty` method.
furniture.addProperty("material", "wood");
console.log(furniture.material); // Output: wood

// Modify an existing property using the `modifyProperty` method.
furniture.modifyProperty("color", "oak");
console.log(furniture.color); // Output: oak

Nota

this garante que o método sempre se refira ao objeto correto, mesmo se o método for reutilizado ou copiado para outro lugar.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 10

Usando Propriedades Dentro de Métodos

Acessar propriedades do objeto em métodos

Exemplo Prático

1. A que o termo-chave `this` se refere quando utilizado dentro de um método de um objeto?

2. No exemplo fornecido abaixo, qual é o papel do método `getFeastPrice` no objeto `menu`?

3. No exemplo fornecido abaixo, como acessar a propriedade "cold appetizer" do objeto `menu` usando `this`?

Usando Propriedades Dentro de Métodos

Acessar propriedades do objeto em métodos

Exemplo Prático

1. A que o termo-chave `this` se refere quando utilizado dentro de um método de um objeto?

2. No exemplo fornecido abaixo, qual é o papel do método `getFeastPrice` no objeto `menu`?

3. No exemplo fornecido abaixo, como acessar a propriedade "cold appetizer" do objeto `menu` usando `this`?

Usando Propriedades Dentro de Métodos

Acessar propriedades do objeto em métodos

Exemplo Prático

1. A que o termo-chave this se refere quando utilizado dentro de um método de um objeto?

2. No exemplo fornecido abaixo, qual é o papel do método getFeastPrice no objeto menu?

3. No exemplo fornecido abaixo, como acessar a propriedade "cold appetizer" do objeto menu usando this?

Usando Propriedades Dentro de Métodos

Acessar propriedades do objeto em métodos

Exemplo Prático

1. A que o termo-chave this se refere quando utilizado dentro de um método de um objeto?

2. No exemplo fornecido abaixo, qual é o papel do método getFeastPrice no objeto menu?

3. No exemplo fornecido abaixo, como acessar a propriedade "cold appetizer" do objeto menu usando this?

1. A que o termo-chave `this` se refere quando utilizado dentro de um método de um objeto?

2. No exemplo fornecido abaixo, qual é o papel do método `getFeastPrice` no objeto `menu`?

3. No exemplo fornecido abaixo, como acessar a propriedade "cold appetizer" do objeto `menu` usando `this`?

1. A que o termo-chave `this` se refere quando utilizado dentro de um método de um objeto?

2. No exemplo fornecido abaixo, qual é o papel do método `getFeastPrice` no objeto `menu`?

3. No exemplo fornecido abaixo, como acessar a propriedade "cold appetizer" do objeto `menu` usando `this`?