Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Exploración de Propiedades Estáticas en JavaScript | Dominio de las Clases e Herencia en JavaScript
Maestría Avanzada en JavaScript

bookExploración de Propiedades Estáticas en JavaScript

En programación, las propiedades estáticas permiten que la información compartida exista entre todas las instancias de una clase, lo que las hace ideales para datos consistentes.

¿Qué son las propiedades estáticas?

Las propiedades estáticas pertenecen a la clase en sí misma y no a una instancia particular de la clase. Esto significa que las propiedades estáticas se comparten entre todas las instancias y pueden ser accedidas directamente desde la clase sin necesidad de crear un objeto. Se utilizan frecuentemente para funciones utilitarias, constantes o datos que deben ser compartidos entre todas las instancias de una clase.

Considere una empresa donde cada empleado (una instancia de una clase) tiene su propia información personal (nombre, puesto), pero la dirección de la empresa (una propiedad estática) es la misma para todos los empleados. La dirección pertenece a la empresa en sí, no a un empleado individual.

Cómo declarar y usar propiedades estáticas

Para declarar una propiedad estática, utilice la palabra clave static dentro de la clase. Las propiedades estáticas solo pueden ser accedidas utilizando el nombre de la clase, no desde las instancias de la clase.


              
1234567891011121314151617181920

            
class Company {
  static headquarters = '123 Main St'; // Static property

  constructor(name) {
    this.name = name; // Instance property
  }

  getCompanyInfo() {
    return `${this.name} is located at ${Company.headquarters}`;
  }
}

const google = new Company('Google');
console.log(google.getCompanyInfo()); // Output: Google is located at 123 Main St

const amazon = new Company('Amazon');
console.log(amazon.getCompanyInfo()); // Output: Amazon is located at 123 Main St

// Accessing the static property directly from the class
console.log(Company.headquarters); // Output: 123 Main St
copy

En este ejemplo, la propiedad headquarters es compartida entre todas las instancias de la clase Company. Tanto las instancias Google como Amazon hacen referencia a la misma dirección de sede central. Las propiedades estáticas se acceden directamente utilizando el nombre de la clase (Company.headquarters), no a través de las instancias de la clase.

Cómo se comparten las propiedades estáticas entre todas las instancias de una clase

Dado que las propiedades estáticas están asociadas a la propia clase, no se copian para cada instancia. Todas las instancias de la clase hacen referencia a la misma propiedad estática, lo que representa una forma eficiente de almacenar datos que no necesitan cambiar por instancia.

Ejemplo: Contador para el número de instancias creadas

Supongamos que queremos llevar un registro de cuántas instancias de una clase se han creado. Podemos utilizar una propiedad estática para almacenar el conteo de instancias e incrementarla cada vez que se crea una nueva instancia.


              
123456789101112131415161718192021222324

            
class User {
  static count = 0; // Static property to track the number of users

  constructor(name) {
    this.name = name;
    User.count++; // Increment static property every time a new user is created
  }

  getUserInfo() {
    return `${this.name} is user number ${User.count}`;
  }
}

const user1 = new User('John');
const user2 = new User('Jane');
const user3 = new User('Alice');

// Accessing the static property directly from the class
console.log(User.count); // Output: 3 (number of users created)

// Each instance can see the total count of users
console.log(user1.getUserInfo()); // Output: John is user number 3
console.log(user2.getUserInfo()); // Output: Jane is user number 3
console.log(user3.getUserInfo()); // Output: Alice is user number 3
copy

En este ejemplo, cada vez que se crea un nuevo usuario, la propiedad estática count se incrementa. Todas las instancias de la clase User comparten el mismo valor de count, ya que pertenece a la propia clase.

Beneficios de las Propiedades Estáticas

Dado que las propiedades estáticas se comparten entre las instancias, no es necesario duplicar datos, lo que mantiene el código más limpio y eficiente. Son especialmente útiles para almacenar información que es igual para todas las instancias, como configuraciones o constantes, ayudando a mantener la coherencia en todo el código.

Ejemplo del Mundo Real: Configuración de la Aplicación

En un escenario real, se puede tener un objeto de configuración de la aplicación que almacene ajustes compartidos en toda la aplicación. Las propiedades estáticas serían una excelente opción para estos casos de uso.


              
12345678910111213141516171819202122

            
class AppConfig {
  static appName = 'QuirkApp Solutions'; // Shared configuration setting
  static version = '1.3.14'; // Shared configuration setting

  constructor(user) {
    this.user = user;
  }

  getUserConfig() {
    return `${this.user} is using ${AppConfig.appName} version ${AppConfig.version}`;
  }
}

const user1 = new AppConfig('Alice');
const user2 = new AppConfig('Bob');

console.log(user1.getUserConfig()); // Output: Alice is using QuirkApp Solutions version 1.3.14
console.log(user2.getUserConfig()); // Output: Bob is using QuirkApp Solutions version 1.3.14

// Accessing static properties directly from the class
console.log(AppConfig.appName); // Output: QuirkApp Solutions
console.log(AppConfig.version); // Output: 1.3.14
copy

En este ejemplo, el nombre de la aplicación y la versión se comparten entre todos los usuarios de la aplicación. Las propiedades estáticas appName y version pertenecen a la clase y no se replican para cada instancia.

1. ¿Qué es una propiedad estática?

2. ¿Cómo se accede a una propiedad estática?

3. En el siguiente código, ¿qué mostrará console.log(User.count); como salida?

question mark

¿Qué es una propiedad estática?

Select the correct answer

question mark

¿Cómo se accede a una propiedad estática?

Select the correct answer

question mark

En el siguiente código, ¿qué mostrará console.log(User.count); como salida?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 11

Pregunte a AI

expand

Pregunte a AI

ChatGPT

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

Awesome!

Completion rate improved to 2.22

bookExploración de Propiedades Estáticas en JavaScript

Desliza para mostrar el menú

En programación, las propiedades estáticas permiten que la información compartida exista entre todas las instancias de una clase, lo que las hace ideales para datos consistentes.

¿Qué son las propiedades estáticas?

Las propiedades estáticas pertenecen a la clase en sí misma y no a una instancia particular de la clase. Esto significa que las propiedades estáticas se comparten entre todas las instancias y pueden ser accedidas directamente desde la clase sin necesidad de crear un objeto. Se utilizan frecuentemente para funciones utilitarias, constantes o datos que deben ser compartidos entre todas las instancias de una clase.

Considere una empresa donde cada empleado (una instancia de una clase) tiene su propia información personal (nombre, puesto), pero la dirección de la empresa (una propiedad estática) es la misma para todos los empleados. La dirección pertenece a la empresa en sí, no a un empleado individual.

Cómo declarar y usar propiedades estáticas

Para declarar una propiedad estática, utilice la palabra clave static dentro de la clase. Las propiedades estáticas solo pueden ser accedidas utilizando el nombre de la clase, no desde las instancias de la clase.


              
1234567891011121314151617181920

            
class Company {
  static headquarters = '123 Main St'; // Static property

  constructor(name) {
    this.name = name; // Instance property
  }

  getCompanyInfo() {
    return `${this.name} is located at ${Company.headquarters}`;
  }
}

const google = new Company('Google');
console.log(google.getCompanyInfo()); // Output: Google is located at 123 Main St

const amazon = new Company('Amazon');
console.log(amazon.getCompanyInfo()); // Output: Amazon is located at 123 Main St

// Accessing the static property directly from the class
console.log(Company.headquarters); // Output: 123 Main St
copy

En este ejemplo, la propiedad headquarters es compartida entre todas las instancias de la clase Company. Tanto las instancias Google como Amazon hacen referencia a la misma dirección de sede central. Las propiedades estáticas se acceden directamente utilizando el nombre de la clase (Company.headquarters), no a través de las instancias de la clase.

Cómo se comparten las propiedades estáticas entre todas las instancias de una clase

Dado que las propiedades estáticas están asociadas a la propia clase, no se copian para cada instancia. Todas las instancias de la clase hacen referencia a la misma propiedad estática, lo que representa una forma eficiente de almacenar datos que no necesitan cambiar por instancia.

Ejemplo: Contador para el número de instancias creadas

Supongamos que queremos llevar un registro de cuántas instancias de una clase se han creado. Podemos utilizar una propiedad estática para almacenar el conteo de instancias e incrementarla cada vez que se crea una nueva instancia.


              
123456789101112131415161718192021222324

            
class User {
  static count = 0; // Static property to track the number of users

  constructor(name) {
    this.name = name;
    User.count++; // Increment static property every time a new user is created
  }

  getUserInfo() {
    return `${this.name} is user number ${User.count}`;
  }
}

const user1 = new User('John');
const user2 = new User('Jane');
const user3 = new User('Alice');

// Accessing the static property directly from the class
console.log(User.count); // Output: 3 (number of users created)

// Each instance can see the total count of users
console.log(user1.getUserInfo()); // Output: John is user number 3
console.log(user2.getUserInfo()); // Output: Jane is user number 3
console.log(user3.getUserInfo()); // Output: Alice is user number 3
copy

En este ejemplo, cada vez que se crea un nuevo usuario, la propiedad estática count se incrementa. Todas las instancias de la clase User comparten el mismo valor de count, ya que pertenece a la propia clase.

Beneficios de las Propiedades Estáticas

Dado que las propiedades estáticas se comparten entre las instancias, no es necesario duplicar datos, lo que mantiene el código más limpio y eficiente. Son especialmente útiles para almacenar información que es igual para todas las instancias, como configuraciones o constantes, ayudando a mantener la coherencia en todo el código.

Ejemplo del Mundo Real: Configuración de la Aplicación

En un escenario real, se puede tener un objeto de configuración de la aplicación que almacene ajustes compartidos en toda la aplicación. Las propiedades estáticas serían una excelente opción para estos casos de uso.


              
12345678910111213141516171819202122

            
class AppConfig {
  static appName = 'QuirkApp Solutions'; // Shared configuration setting
  static version = '1.3.14'; // Shared configuration setting

  constructor(user) {
    this.user = user;
  }

  getUserConfig() {
    return `${this.user} is using ${AppConfig.appName} version ${AppConfig.version}`;
  }
}

const user1 = new AppConfig('Alice');
const user2 = new AppConfig('Bob');

console.log(user1.getUserConfig()); // Output: Alice is using QuirkApp Solutions version 1.3.14
console.log(user2.getUserConfig()); // Output: Bob is using QuirkApp Solutions version 1.3.14

// Accessing static properties directly from the class
console.log(AppConfig.appName); // Output: QuirkApp Solutions
console.log(AppConfig.version); // Output: 1.3.14
copy

En este ejemplo, el nombre de la aplicación y la versión se comparten entre todos los usuarios de la aplicación. Las propiedades estáticas appName y version pertenecen a la clase y no se replican para cada instancia.

1. ¿Qué es una propiedad estática?

2. ¿Cómo se accede a una propiedad estática?

3. En el siguiente código, ¿qué mostrará console.log(User.count); como salida?

question mark

¿Qué es una propiedad estática?

Select the correct answer

question mark

¿Cómo se accede a una propiedad estática?

Select the correct answer

question mark

En el siguiente código, ¿qué mostrará console.log(User.count); como salida?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 11
some-alt