Aprende Uso de Propiedades Dentro de Métodos | Fundamentos de los Objetos en JavaScript

Profundización en el uso de métodos de objetos y exploración de cómo los métodos utilizan la palabra clave this para acceder a las propiedades del objeto.

Acceso a propiedades de objetos en métodos

Al definir un método dentro de un objeto, es posible acceder a las propiedades del objeto utilizando la palabra clave this. this hace referencia al objeto que llamó al método, permitiendo la interacción con sus propiedades. A continuación, se ilustra este concepto con un ejemplo:

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: ƒ}

En el método getInfo, this se refiere al objeto furniture y representa todo el contenido interno del objeto.

Ejemplo práctico

En los métodos, se puede acceder a las propiedades del objeto mediante this y luego utilizar la notación de punto para acceder a las propiedades específicas como es habitual.

En el siguiente ejemplo, los métodos getColor, addProperty y modifyProperty utilizan this para acceder a la propiedad furniture y realizar diversas operaciones.

getColor muestra el color del armario en la consola utilizando this para referirse a las propiedades del objeto;
addProperty agrega nuevas propiedades al objeto furniture. Recibe dos parámetros: propertyName (el nombre de la nueva propiedad) y propertyValue (el valor que se asignará a la nueva propiedad);
modifyProperty cambia el valor de una propiedad existente en el objeto furniture. Recibe dos parámetros: propertyName (el nombre de la propiedad a modificar) y propertyValue (el nuevo valor que se asignará a la propiedad).


              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

El uso de la palabra clave this es esencial en los métodos de objetos. Garantiza que el método funcione con el objeto específico que lo invoca, incluso si el nombre es desconocido de antemano. Esto evita posibles problemas, como copiar métodos de un objeto a otro con un nombre diferente.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 10

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.27

Desliza para mostrar el menú

Profundización en el uso de métodos de objetos y exploración de cómo los métodos utilizan la palabra clave this para acceder a las propiedades del objeto.

Acceso a propiedades de objetos en métodos

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: ƒ}

En el método getInfo, this se refiere al objeto furniture y representa todo el contenido interno del objeto.

Ejemplo práctico

En los métodos, se puede acceder a las propiedades del objeto mediante this y luego utilizar la notación de punto para acceder a las propiedades específicas como es habitual.

En el siguiente ejemplo, los métodos getColor, addProperty y modifyProperty utilizan this para acceder a la propiedad furniture y realizar diversas operaciones.

getColor muestra el color del armario en la consola utilizando this para referirse a las propiedades del objeto;
addProperty agrega nuevas propiedades al objeto furniture. Recibe dos parámetros: propertyName (el nombre de la nueva propiedad) y propertyValue (el valor que se asignará a la nueva propiedad);
modifyProperty cambia el valor de una propiedad existente en el objeto furniture. Recibe dos parámetros: propertyName (el nombre de la propiedad a modificar) y propertyValue (el nuevo valor que se asignará a la propiedad).


              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

El uso de la palabra clave this es esencial en los métodos de objetos. Garantiza que el método funcione con el objeto específico que lo invoca, incluso si el nombre es desconocido de antemano. Esto evita posibles problemas, como copiar métodos de un objeto a otro con un nombre diferente.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 10

Uso de Propiedades Dentro de Métodos

Acceso a propiedades de objetos en métodos

Ejemplo práctico

1. ¿A qué se refiere la palabra clave `this` cuando se utiliza dentro de un método de un objeto?

2. En el siguiente ejemplo, ¿cuál es la función del método `getFeastPrice` en el objeto `menu`?

3. En el siguiente ejemplo, ¿cómo se accede a la propiedad "cold appetizer" del objeto `menu` usando `this`?

Awesome!

Uso de Propiedades Dentro de Métodos

Acceso a propiedades de objetos en métodos

Ejemplo práctico

1. ¿A qué se refiere la palabra clave `this` cuando se utiliza dentro de un método de un objeto?

2. En el siguiente ejemplo, ¿cuál es la función del método `getFeastPrice` en el objeto `menu`?

3. En el siguiente ejemplo, ¿cómo se accede a la propiedad "cold appetizer" del objeto `menu` usando `this`?

Uso de Propiedades Dentro de Métodos

Acceso a propiedades de objetos en métodos

Ejemplo práctico

1. ¿A qué se refiere la palabra clave this cuando se utiliza dentro de un método de un objeto?

2. En el siguiente ejemplo, ¿cuál es la función del método getFeastPrice en el objeto menu?

3. En el siguiente ejemplo, ¿cómo se accede a la propiedad "cold appetizer" del objeto menu usando this?

Awesome!

Uso de Propiedades Dentro de Métodos

Acceso a propiedades de objetos en métodos

Ejemplo práctico

1. ¿A qué se refiere la palabra clave this cuando se utiliza dentro de un método de un objeto?

2. En el siguiente ejemplo, ¿cuál es la función del método getFeastPrice en el objeto menu?

3. En el siguiente ejemplo, ¿cómo se accede a la propiedad "cold appetizer" del objeto menu usando this?

1. ¿A qué se refiere la palabra clave `this` cuando se utiliza dentro de un método de un objeto?

2. En el siguiente ejemplo, ¿cuál es la función del método `getFeastPrice` en el objeto `menu`?

3. En el siguiente ejemplo, ¿cómo se accede a la propiedad "cold appetizer" del objeto `menu` usando `this`?

1. ¿A qué se refiere la palabra clave `this` cuando se utiliza dentro de un método de un objeto?

2. En el siguiente ejemplo, ¿cuál es la función del método `getFeastPrice` en el objeto `menu`?

3. En el siguiente ejemplo, ¿cómo se accede a la propiedad "cold appetizer" del objeto `menu` usando `this`?