Variables statiques en JavaScript

Question

Comment créer des variables statiques en Javascript ?

Answer 1

Si vous venez d'un langage orienté objet basé sur les classes et à typage statique (comme Java, C++ ou C#) Je suppose que vous essayez de créer une variable ou une méthode associée à un "type" mais pas à une instance.

Un exemple utilisant une approche "classique", avec des fonctions de construction, pourrait peut-être vous aider à comprendre les concepts de base de l'OO JavaScript :

function MyClass () { // constructor function
  var privateVariable = "foo";  // Private variable 

  this.publicVariable = "bar";  // Public variable 

  this.privilegedMethod = function () {  // Public Method
    alert(privateVariable);
  };
}

// Instance method will be available to all instances but only load once in memory 
MyClass.prototype.publicMethod = function () {    
  alert(this.publicVariable);
};

// Static variable shared by all instances
MyClass.staticProperty = "baz";

var myInstance = new MyClass();

staticProperty est défini dans l'objet MyClass (qui est une fonction) et n'a rien à voir avec ses instances créées, JavaScript traite les fonctions comme des objets de première classe En tant qu'objet, vous pouvez donc attribuer des propriétés à une fonction.

UPDATE : ES6 a introduit la possibilité de déclarer des classes par le biais de la class mot-clé. Il s'agit d'un sucre syntaxique par rapport à l'héritage existant basé sur les prototypes.

En static mot-clé vous permet de définir facilement des propriétés ou des méthodes statiques dans une classe.

Voyons l'exemple ci-dessus mis en œuvre avec des classes ES6 :

class MyClass {
  // class constructor, equivalent to
  // the function body of a constructor
  constructor() {
    const privateVariable = 'private value'; // Private variable at the constructor scope
    this.publicVariable = 'public value'; // Public property

    this.privilegedMethod = function() {
      // Public Method with access to the constructor scope variables
      console.log(privateVariable);
    };
  }

  // Prototype methods:
  publicMethod() {
    console.log(this.publicVariable);
  }

  // Static properties shared by all instances
  static staticProperty = 'static value';

  static staticMethod() {
    console.log(this.staticProperty);
  }
}

// We can add properties to the class prototype
MyClass.prototype.additionalMethod = function() {
  console.log(this.publicVariable);
};

var myInstance = new MyClass();
myInstance.publicMethod();       // "public value"
myInstance.additionalMethod(); // "public value"
myInstance.privilegedMethod(); // "private value"
MyClass.staticMethod();             // "static value"

Answer 2

Vous pouvez tirer parti du fait que les fonctions JS sont également des objets, ce qui signifie qu'elles peuvent avoir des propriétés.

Par exemple, en citant l'exemple donné dans l'article (aujourd'hui disparu) Variables statiques en Javascript :

function countMyself() {
    // Check to see if the counter has been initialized
    if ( typeof countMyself.counter == 'undefined' ) {
        // It has not... perform the initialization
        countMyself.counter = 0;
    }

    // Do something stupid to indicate the value
    alert(++countMyself.counter);
}

Si vous appelez cette fonction plusieurs fois, vous verrez que le compteur est incrémenté.

Et c'est probablement une bien meilleure solution que de polluer l'espace de noms global avec une variable globale.

Voici une autre solution possible, basée sur une fermeture : Astuce pour utiliser des variables statiques en javascript :

var uniqueID = (function() {
   var id = 0; // This is the private persistent value
   // The outer function returns a nested function that has access
   // to the persistent value.  It is this nested function we're storing
   // in the variable uniqueID above.
   return function() { return id++; };  // Return and increment
})(); // Invoke the outer function after defining it.

Ce qui donne le même type de résultat - sauf que, cette fois, la valeur incrémentée est renvoyée, au lieu d'être affichée.

Answer 3

Vous le faites par le biais d'une IIFE (expression de fonction invoquée immédiatement) :

var incr = (function () {
    var i = 1;

    return function () {
        return i++;
    }
})();

incr(); // returns 1
incr(); // returns 2

Answer 4

Vous pouvez utiliser arguments.callee pour stocker des variables "statiques" (c'est également utile dans les fonctions anonymes) :

function () {
  arguments.callee.myStaticVar = arguments.callee.myStaticVar || 1;
  arguments.callee.myStaticVar++;
  alert(arguments.callee.myStaticVar);
}

Answer 5

function Person(){
  if(Person.count == undefined){
    Person.count = 1;
  }
  else{
    Person.count ++;
  }
  console.log(Person.count);
}

var p1 = new Person();
var p2 = new Person();
var p3 = new Person();