Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Statische Eigenschappen in JavaScript Verkennen | Beheersing van JavaScript-Klassen en Overerving
Geavanceerde JavaScript-Beheersing

bookStatische Eigenschappen in JavaScript Verkennen

In de programmering maken statische eigenschappen het mogelijk om gedeelde informatie beschikbaar te stellen voor alle instanties van een klasse, waardoor ze ideaal zijn voor consistente gegevens.

Wat zijn statische eigenschappen?

Statische eigenschappen behoren tot de klasse zelf en niet tot een specifieke instantie van de klasse. Dit betekent dat statische eigenschappen gedeeld worden door alle instanties en direct toegankelijk zijn via de klasse, zonder dat er een object hoeft te worden geïnstantieerd. Ze worden vaak gebruikt voor hulpfuncties, constanten of gegevens die gedeeld moeten worden door alle instanties van een klasse.

Denk aan een bedrijf waar elke werknemer (een instantie van een klasse) zijn eigen persoonlijke informatie heeft (naam, functie), maar het adres van het bedrijf (een statische eigenschap) voor alle werknemers hetzelfde is. Het adres behoort tot het bedrijf zelf, niet tot een individuele werknemer.

Hoe statische eigenschappen te declareren en te gebruiken

Om een statische eigenschap te declareren, gebruik het sleutelwoord static binnen de klasse. Statische eigenschappen zijn alleen toegankelijk via de klassenaam, niet vanuit instanties van de klasse.


              
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

In dit voorbeeld wordt de eigenschap headquarters gedeeld door alle instanties van de klasse Company. Zowel de instanties Google als Amazon verwijzen naar hetzelfde hoofdkantooradres. Statische eigenschappen worden direct benaderd via de klassenaam (Company.headquarters), niet via instanties van de klasse.

Hoe statische eigenschappen gedeeld worden door alle instanties van een klasse

Aangezien statische eigenschappen aan de klasse zelf zijn gekoppeld, worden ze niet gekopieerd voor elke instantie. Alle instanties van de klasse verwijzen naar dezelfde statische eigenschap, wat het een efficiënte manier maakt om gegevens op te slaan die niet per instantie hoeven te veranderen.

Voorbeeld: Teller voor het aantal aangemaakte instanties

Stel, we willen bijhouden hoeveel instanties van een klasse zijn aangemaakt. We kunnen hiervoor een statische eigenschap gebruiken om het aantal instanties op te slaan en deze telkens verhogen wanneer een nieuwe instantie wordt aangemaakt.


              
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

In dit voorbeeld wordt de statische eigenschap count verhoogd telkens wanneer een nieuwe gebruiker wordt aangemaakt. Alle instanties van de klasse User delen dezelfde waarde van count, omdat deze tot de klasse zelf behoort.

Voordelen van statische eigenschappen

Aangezien statische eigenschappen gedeeld worden tussen instanties, is het niet nodig om gegevens te dupliceren, wat de code overzichtelijker en efficiënter houdt. Ze zijn bijzonder geschikt voor het opslaan van informatie die voor alle instanties gelijk is, zoals configuratie-instellingen of constanten, waardoor consistentie in de code wordt behouden.

Praktijkvoorbeeld: Applicatieconfiguratie

In een praktijksituatie kan er een applicatieconfiguratieobject zijn dat gedeelde instellingen binnen de applicatie opslaat. Statische eigenschappen zijn een uitstekende keuze voor dergelijke toepassingen.


              
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

In dit voorbeeld worden de app-naam en versie gedeeld door alle gebruikers van de applicatie. De statische eigenschappen appName en version behoren tot de klasse en worden niet voor elk exemplaar afzonderlijk aangemaakt.

1. Wat is een statische eigenschap?

2. Hoe krijg je toegang tot een statische eigenschap?

3. Wat zal console.log(User.count); weergeven in de volgende code?

question mark

Wat is een statische eigenschap?

Select the correct answer

question mark

Hoe krijg je toegang tot een statische eigenschap?

Select the correct answer

question mark

Wat zal console.log(User.count); weergeven in de volgende code?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 11

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain the difference between static and instance properties?

When should I use static properties instead of instance properties?

Are there any limitations or best practices for using static properties?

Awesome!

Completion rate improved to 2.22

bookStatische Eigenschappen in JavaScript Verkennen

Veeg om het menu te tonen

In de programmering maken statische eigenschappen het mogelijk om gedeelde informatie beschikbaar te stellen voor alle instanties van een klasse, waardoor ze ideaal zijn voor consistente gegevens.

Wat zijn statische eigenschappen?

Statische eigenschappen behoren tot de klasse zelf en niet tot een specifieke instantie van de klasse. Dit betekent dat statische eigenschappen gedeeld worden door alle instanties en direct toegankelijk zijn via de klasse, zonder dat er een object hoeft te worden geïnstantieerd. Ze worden vaak gebruikt voor hulpfuncties, constanten of gegevens die gedeeld moeten worden door alle instanties van een klasse.

Denk aan een bedrijf waar elke werknemer (een instantie van een klasse) zijn eigen persoonlijke informatie heeft (naam, functie), maar het adres van het bedrijf (een statische eigenschap) voor alle werknemers hetzelfde is. Het adres behoort tot het bedrijf zelf, niet tot een individuele werknemer.

Hoe statische eigenschappen te declareren en te gebruiken

Om een statische eigenschap te declareren, gebruik het sleutelwoord static binnen de klasse. Statische eigenschappen zijn alleen toegankelijk via de klassenaam, niet vanuit instanties van de klasse.


              
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

In dit voorbeeld wordt de eigenschap headquarters gedeeld door alle instanties van de klasse Company. Zowel de instanties Google als Amazon verwijzen naar hetzelfde hoofdkantooradres. Statische eigenschappen worden direct benaderd via de klassenaam (Company.headquarters), niet via instanties van de klasse.

Hoe statische eigenschappen gedeeld worden door alle instanties van een klasse

Aangezien statische eigenschappen aan de klasse zelf zijn gekoppeld, worden ze niet gekopieerd voor elke instantie. Alle instanties van de klasse verwijzen naar dezelfde statische eigenschap, wat het een efficiënte manier maakt om gegevens op te slaan die niet per instantie hoeven te veranderen.

Voorbeeld: Teller voor het aantal aangemaakte instanties

Stel, we willen bijhouden hoeveel instanties van een klasse zijn aangemaakt. We kunnen hiervoor een statische eigenschap gebruiken om het aantal instanties op te slaan en deze telkens verhogen wanneer een nieuwe instantie wordt aangemaakt.


              
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

In dit voorbeeld wordt de statische eigenschap count verhoogd telkens wanneer een nieuwe gebruiker wordt aangemaakt. Alle instanties van de klasse User delen dezelfde waarde van count, omdat deze tot de klasse zelf behoort.

Voordelen van statische eigenschappen

Aangezien statische eigenschappen gedeeld worden tussen instanties, is het niet nodig om gegevens te dupliceren, wat de code overzichtelijker en efficiënter houdt. Ze zijn bijzonder geschikt voor het opslaan van informatie die voor alle instanties gelijk is, zoals configuratie-instellingen of constanten, waardoor consistentie in de code wordt behouden.

Praktijkvoorbeeld: Applicatieconfiguratie

In een praktijksituatie kan er een applicatieconfiguratieobject zijn dat gedeelde instellingen binnen de applicatie opslaat. Statische eigenschappen zijn een uitstekende keuze voor dergelijke toepassingen.


              
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

In dit voorbeeld worden de app-naam en versie gedeeld door alle gebruikers van de applicatie. De statische eigenschappen appName en version behoren tot de klasse en worden niet voor elk exemplaar afzonderlijk aangemaakt.

1. Wat is een statische eigenschap?

2. Hoe krijg je toegang tot een statische eigenschap?

3. Wat zal console.log(User.count); weergeven in de volgende code?

question mark

Wat is een statische eigenschap?

Select the correct answer

question mark

Hoe krijg je toegang tot een statische eigenschap?

Select the correct answer

question mark

Wat zal console.log(User.count); weergeven in de volgende code?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 11
some-alt