Variables statiques en JavaScript

Comment créer des variables statiques en Javascript?

Si vous venez d'un langage orienté objet basé sur une classe et typé statiquement (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 constructeurs pourrait peut-être vous aider à comprendre les concepts de JavaScript OO de base:

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();

staticPropertyest 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 , étant un objet, vous pouvez affecter des propriétés à une fonction.

MISE À JOUR: ES6 a introduit la possibilité de déclarer des classes via le classmot - clé. C'est du sucre de syntaxe sur l'héritage basé sur un prototype existant.

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

Voyons l'exemple ci-dessus implémenté avec les 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"

Vous pouvez profiter 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é sur l'article (maintenant 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 polir l'espace de noms global avec une variable globale.

Et 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 vous donne le même genre de résultat - sauf que, cette fois, la valeur incrémentée est retournée, au lieu d'être affichée.

Vous le faites via une IIFE (expression de fonction immédiatement invoquée):

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

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

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

vous pouvez utiliser arguments.callee pour stocker des variables "statiques" (ceci est également utile dans une fonction anonyme):

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

J'ai vu quelques réponses similaires, mais je voudrais mentionner que cet article le décrit le mieux, alors je voudrais le partager avec vous.

Voici un code qui en est tiré, que j'ai modifié pour obtenir un exemple complet qui, espérons-le, profite à la communauté car il peut être utilisé comme modèle de conception pour les classes.

Cela répond également à votre question:

function Podcast() {

    // private variables
    var _somePrivateVariable = 123;

    // object properties (read/write)
    this.title = 'Astronomy Cast';
    this.description = 'A fact-based journey through the galaxy.';
    this.link = 'http://www.astronomycast.com';

    // for read access to _somePrivateVariable via immutableProp 
    this.immutableProp = function() {
        return _somePrivateVariable;
    }

    // object function
    this.toString = function() {
       return 'Title: ' + this.title;
    }
};

// static property
Podcast.FILE_EXTENSION = 'mp3';
// static function
Podcast.download = function(podcast) {
    console.log('Downloading ' + podcast + ' ...');
};

Dans cet exemple, vous pouvez accéder aux propriétés / fonctions statiques comme suit:

// access static properties/functions
console.log(Podcast.FILE_EXTENSION);   // 'mp3'
Podcast.download('Astronomy cast');    // 'Downloading Astronomy cast ...'

Et les propriétés / fonctions de l' objet sont simplement les suivantes:

// access object properties/functions
var podcast = new Podcast();
podcast.title = 'The Simpsons';
console.log(podcast.toString());       // Title: The Simpsons
console.log(podcast.immutableProp());  // 123

Notez que dans podcast.immutableProp (), nous avons une fermeture : La référence à _somePrivateVariable est conservée à l'intérieur de la fonction.

Vous pouvez même définir des getters et setters . Jetez un œil à cet extrait de code (où dest le prototype de l'objet pour lequel vous souhaitez déclarer une propriété, yest une variable privée non visible en dehors du constructeur):

// getters and setters
var d = Date.prototype;
Object.defineProperty(d, "year", {
    get: function() {return this.getFullYear() },
    set: function(y) { this.setFullYear(y) }
});

Il définit la propriété d.yearvia getet setfonctionne - si vous ne spécifiez pas set, alors la propriété est en lecture seule et ne peut pas être modifiée (sachez que vous n'obtiendrez pas d'erreur si vous essayez de la définir, mais cela n'a aucun effet). Chaque propriété possède les attributs writable, configurable(permettent de changer après la déclaration) et enumerable(permet de l' utiliser comme recenseur), qui sont par défaut false. Vous pouvez les définir via definePropertydans le 3ème paramètre, par exemple enumerable: true.

Ce qui est également valable, c'est cette syntaxe:

// getters and setters - alternative syntax
var obj = { a: 7, 
            get b() {return this.a + 1;}, 
            set c(x) {this.a = x / 2}
        };

qui définit une propriété lisible / inscriptible a, une propriété en lecture seule bet une propriété en écriture seule c, à travers laquelle la propriétéa est accessible.

Usage:

console.log(obj.a); console.log(obj.b); // output: 7, 8
obj.c=40;
console.log(obj.a); console.log(obj.b); // output: 20, 21

Remarques:

Pour éviter un comportement inattendu au cas où vous auriez oublié le newmot - clé, je vous suggère d'ajouter ce qui suit à la fonction Podcast:

// instantiation helper
function Podcast() {
    if(false === (this instanceof Podcast)) {
        return new Podcast();
    }
// [... same as above ...]
};

Désormais, les deux instanciations suivantes fonctionneront comme prévu:

var podcast = new Podcast(); // normal usage, still allowed
var podcast = Podcast();     // you can omit the new keyword because of the helper

La «nouvelle» instruction crée un nouvel objet et copie toutes les propriétés et méthodes, c.-à-d.

var a=new Podcast();
var b=new Podcast();
a.title="a"; b.title="An "+b.title;
console.log(a.title); // "a"
console.log(b.title); // "An Astronomy Cast"

Notez également que dans certaines situations, il peut être utile d'utiliser l' returninstruction dans la fonction constructeur Podcastpour renvoyer un objet personnalisé protégeant les fonctions sur lesquelles la classe s'appuie en interne mais qui doivent être exposées. Ceci est expliqué plus en détail au chapitre 2 (Objets) de la série d'articles.

Vous pouvez le dire aet en bhériter Podcast. Maintenant, que se passe-t-il si vous souhaitez ajouter une méthode à Podcast qui s'applique à tous après aet qui ba été instanciée? Dans ce cas, utilisez le .prototypecomme suit:

Podcast.prototype.titleAndLink = function() {
    return this.title + " [" + this.link + "]";
};

Maintenant, appelez encore aet bencore:

console.log(a.titleAndLink()); // "a [http://www.astronomycast.com]"
console.log(b.titleAndLink()); // "An Astronomy Cast [http://www.astronomycast.com]"

Vous pouvez trouver plus de détails sur les prototypes ici . Si vous voulez faire plus d'héritage, je vous suggère de vous pencher sur cela .

Les séries d'articles que j'ai mentionnées ci-dessus sont fortement recommandées à lire, elles incluent également les sujets suivants:

1. Les fonctions
2. Objets
3. Prototypes
4. Application de nouvelles fonctions aux constructeurs
5. Levage
6. Insertion automatique de point-virgule
7. Propriétés et méthodes statiques

Notez que la "fonction" d' insertion automatique de point-virgule de JavaScript (comme mentionné dans 6.) est très souvent responsable de provoquer des problèmes étranges dans votre code. Par conséquent, je préfère le considérer comme un bug plutôt que comme une fonctionnalité.

Si vous souhaitez en savoir plus, voici un article MSDN assez intéressant sur ces sujets, certains d'entre eux décrits ici fournissent encore plus de détails.

Ce qui est également intéressant à lire (couvrant également les sujets mentionnés ci-dessus) sont les articles du guide JavaScript MDN :

• Une réintroduction à JavaScript
• Travailler avec des objets

Si vous voulez savoir comment émuler des outparamètres c # (comme dans DateTime.TryParse(str, out result)) en JavaScript, vous pouvez trouver un exemple de code ici.

Ceux d'entre vous qui travaillent avec IE (qui n'a pas de console pour JavaScript sauf si vous ouvrez les outils de développement à l'aide F12et ouvrez l'onglet console) peuvent trouver l'extrait de code suivant utile. Il vous permet d'utiliser console.log(msg);comme utilisé dans les exemples ci-dessus. Insérez-le juste avant la Podcastfonction.

Pour votre commodité, voici le code ci-dessus dans un extrait de code unique complet:

let console = { log: function(msg) {  
  let canvas = document.getElementById("log"), br = canvas.innerHTML==="" ? "" : "<br/>";
  canvas.innerHTML += (br + (msg || "").toString());
}};

console.log('For details, see the explaining text');

function Podcast() {

  // with this, you can instantiate without new (see description in text)
  if (false === (this instanceof Podcast)) {
    return new Podcast();
  }

  // private variables
  var _somePrivateVariable = 123;

  // object properties
  this.title = 'Astronomy Cast';
  this.description = 'A fact-based journey through the galaxy.';
  this.link = 'http://www.astronomycast.com';

  this.immutableProp = function() {
    return _somePrivateVariable;
  }

  // object function
  this.toString = function() {
    return 'Title: ' + this.title;
  }
};

// static property
Podcast.FILE_EXTENSION = 'mp3';
// static function
Podcast.download = function(podcast) {
  console.log('Downloading ' + podcast + ' ...');
};


// access static properties/functions
Podcast.FILE_EXTENSION; // 'mp3'
Podcast.download('Astronomy cast'); // 'Downloading Astronomy cast ...'

// access object properties/functions
var podcast = new Podcast();
podcast.title = 'The Simpsons';
console.log(podcast.toString()); // Title: The Simpsons
console.log(podcast.immutableProp()); // 123

// getters and setters
var d = Date.prototype;
Object.defineProperty(d, "year", {
  get: function() {
    return this.getFullYear()
  },
  set: function(y) {
    this.setFullYear(y)
  }
});

// getters and setters - alternative syntax
var obj = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2
  }
};

// usage:
console.log(obj.a); console.log(obj.b); // output: 7, 8
obj.c=40;
console.log(obj.a); console.log(obj.b); // output: 20, 21

var a=new Podcast();
var b=new Podcast();
a.title="a"; b.title="An "+b.title;
console.log(a.title); // "a"
console.log(b.title); // "An Astronomy Cast"

Podcast.prototype.titleAndLink = function() {
    return this.title + " [" + this.link + "]";
};
    
console.log(a.titleAndLink()); // "a [http://www.astronomycast.com]"
console.log(b.titleAndLink()); // "An Astronomy Cast [http://www.astronomycast.com]"

<div id="log"></div>

Remarques:

• Quelques bons conseils, astuces et recommandations sur la programmation JavaScript en général, vous pouvez les trouver ici (meilleures pratiques JavaScript) et là ('var' versus 'let') . Cet article est également recommandé sur les transtypages implicites (coercition) .

• TypeScript est un moyen pratique d'utiliser des classes et de les compiler en JavaScript . Voici une aire de jeux où vous pouvez trouver des exemples vous montrant comment cela fonctionne. Même si vous n'utilisez pas TypeScript pour le moment, vous pouvez y jeter un œil, car vous pouvez comparer TypeScript avec le résultat JavaScript sur une vue côte à côte. La plupart des exemples sont simples, mais il existe également un exemple Raytracer que vous pouvez essayer instantanément. Je recommande particulièrement de regarder les exemples "Utilisation des classes", "Utilisation de l'héritage" et "Utilisation des génériques" en les sélectionnant dans la zone de liste déroulante - ce sont de beaux modèles que vous pouvez utiliser instantanément en JavaScript. Le tapuscrit est utilisé avec Angular.

• Pour réaliser l' encapsulation des variables locales, des fonctions, etc. en JavaScript, je suggère d'utiliser un modèle comme le suivant (JQuery utilise la même technique):

<html>
<head></head>
<body><script>
    'use strict';
    // module pattern (self invoked function)
    const myModule = (function(context) { 
    // to allow replacement of the function, use 'var' otherwise keep 'const'

      // put variables and function with local module scope here:
      var print = function(str) {
        if (str !== undefined) context.document.write(str);
        context.document.write("<br/><br/>");
        return;
      }
      // ... more variables ...

      // main method
      var _main = function(title) {

        if (title !== undefined) print(title);
        print("<b>last modified:&nbsp;</b>" + context.document.lastModified + "<br/>");        
        // ... more code ...
      }

      // public methods
      return {
        Main: _main
        // ... more public methods, properties ...
      };

    })(this);

    // use module
    myModule.Main("<b>Module demo</b>");
</script></body>
</html>

Bien sûr, vous pouvez - et devez - mettre le code du script dans un *.jsfichier séparé ; c'est juste écrit en ligne pour garder l'exemple court.

Les fonctions auto-appelantes (également appelées IIFE = Immediateely Invoked Function Expression) sont décrites plus en détail ici .

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();

Réponse mise à jour:

Dans ECMAScript 6 , vous pouvez créer des fonctions statiques à l'aide du staticmot clé:

class Foo {

  static bar() {return 'I am static.'}

}

//`bar` is a property of the class
Foo.bar() // returns 'I am static.'

//`bar` is not a property of instances of the class
var foo = new Foo()
foo.bar() //-> throws TypeError

Les classes ES6 n'introduisent aucune nouvelle sémantique pour la statique. Vous pouvez faire la même chose dans ES5 comme ceci:

//constructor
var Foo = function() {}

Foo.bar = function() {
    return 'I am static.'
}

Foo.bar() // returns 'I am static.'

var foo = new Foo()
foo.bar() // throws TypeError

Vous pouvez attribuer à une propriété de Foocar en JavaScript les fonctions sont des objets.

L'exemple et l'explication suivants sont tirés du livre Professional JavaScript for Web Developers 2nd Edition de Nicholas Zakas. C'est la réponse que je cherchais donc j'ai pensé qu'il serait utile de l'ajouter ici.

(function () {
    var name = '';
    Person = function (value) {
        name = value;
    };
    Person.prototype.getName = function () {
        return name;
    };
    Person.prototype.setName = function (value) {
        name = value;
    };
}());
var person1 = new Person('Nate');
console.log(person1.getName()); // Nate
person1.setName('James');
console.log(person1.getName()); // James
person1.name = 'Mark';
console.log(person1.name); // Mark
console.log(person1.getName()); // James
var person2 = new Person('Danielle');
console.log(person1.getName()); // Danielle
console.log(person2.getName()); // Danielle

Le Personconstructeur de cet exemple a accès au nom de la variable privée, tout comme les méthodes getName()et setName(). En utilisant ce modèle, la variable de nom devient statique et sera utilisée parmi toutes les instances. Cela signifie que l'appel setName()à une instance affecte toutes les autres instances. L'appel setName()ou la création d'une nouvelle Personinstance définit la variable de nom sur une nouvelle valeur. Cela oblige toutes les instances à retourner la même valeur.

Si vous utilisez la nouvelle syntaxe de classe, vous pouvez maintenant effectuer les opérations suivantes:

    class MyClass {
      static get myStaticVariable() {
        return "some static variable";
      }
    }

    console.log(MyClass.myStaticVariable);

    aMyClass = new MyClass();
    console.log(aMyClass.myStaticVariable, "is undefined");

Cela crée effectivement une variable statique en JavaScript.

Si vous voulez déclarer des variables statiques pour créer des constantes dans votre application, j'ai trouvé que l'approche la plus simpliste était la suivante

ColorConstants = (function()
{
    var obj = {};
    obj.RED = 'red';
    obj.GREEN = 'green';
    obj.BLUE = 'blue';
    obj.ALL = [obj.RED, obj.GREEN, obj.BLUE];
    return obj;
})();

//Example usage.
var redColor = ColorConstants.RED;

À propos de l' classintroduction par ECMAScript 2015. Les autres réponses ne sont pas totalement claires.

Voici un exemple montrant comment créer un var statique staticVaravec le ClassName. varsynthax:

class MyClass {
    constructor(val) {
        this.instanceVar = val;
        MyClass.staticVar = 10;
    }
}

var class1 = new MyClass(1);
console.log(class1.instanceVar);      // 1
console.log(class1.constructor.staticVar); // 10

// New instance of MyClass with another value
var class2 = new MyClass(3);
console.log(class1.instanceVar);      // 1
console.log(class2.instanceVar);      // 3

Pour accéder à la variable statique, nous utilisons la .constructorpropriété qui renvoie une référence à la fonction de constructeur d'objet qui a créé la classe. On peut l'appeler sur les deux instances créées:

MyClass.staticVar = 11;
console.log(class1.constructor.staticVar); // 11
console.log(class2.constructor.staticVar); // 11 <-- yes it's static! :)

MyClass.staticVar = 12;
console.log(class1.constructor.staticVar); // 12
console.log(class2.constructor.staticVar); // 12

Il existe d'autres réponses similaires, mais aucune d'entre elles ne m'a séduit. Voici ce que j'ai fini avec:

var nextCounter = (function () {
  var counter = 0;
  return function() {
    var temp = counter;
    counter += 1;
    return temp;
  };
})();

En plus du reste, il existe actuellement un projet (proposition de l' étape 2 ) sur les propositions de l'ECMA qui introduit static les domaines publics dans les classes. ( les champs privés ont été pris en compte )

En utilisant l'exemple de la proposition, la staticsyntaxe proposée ressemblera à ceci:

class CustomDate {
  // ...
  static epoch = new CustomDate(0);
}

et être équivalent à ce que d'autres ont souligné:

class CustomDate {
  // ...
}
CustomDate.epoch = new CustomDate(0);

Vous pouvez ensuite y accéder via CustomDate.epoch.

Vous pouvez suivre la nouvelle proposition dans proposal-static-class-features.

Actuellement, babel prend en charge cette fonctionnalité avec le plugin de propriétés de classe transform que vous pouvez utiliser. De plus, bien que toujours en cours, V8il le met en œuvre .

Vous pouvez créer une variable statique en JavaScript comme ci-dessous. Voici countla variable statique.

var Person = function(name) {
  this.name = name;
  // first time Person.count is undefined, so it is initialized with 1
  // next time the function is called, the value of count is incremented by 1
  Person.count = Person.count ? Person.count + 1 : 1;
}

var p1 = new Person('User p1');
console.log(p1.constructor.count);   // prints 1
var p2 = new Person('User p2');
console.log(p2.constructor.count);   // prints 2

Vous pouvez affecter des valeurs à la variable statique à l'aide de la Personfonction ou de l'une des instances:

// set static variable using instance of Person
p1.constructor.count = 10;         // this change is seen in all the instances of Person
console.log(p2.constructor.count); // prints 10

// set static variable using Person
Person.count = 20;
console.log(p1.constructor.count); // prints 20

Si vous vouliez créer une variable statique globale:

var my_id = 123;

Remplacez la variable par la suivante:

Object.defineProperty(window, 'my_id', {
    get: function() {
            return 123;
        },
    configurable : false,
    enumerable : false
});

La chose la plus proche en JavaScript d'une variable statique est une variable globale - c'est simplement une variable déclarée en dehors de la portée d'un littéral de fonction ou d'objet:

var thisIsGlobal = 1;

function foo() {
    var thisIsNot = 2;
}

L'autre chose que vous pourriez faire serait de stocker des variables globales dans un objet littéral comme celui-ci:

var foo = { bar : 1 }

Et puis accéder aux variabels comme ceci: foo.bar.

Pour condenser tous les concepts de classe ici, testez ceci:

var Test = function() {
  // "super private" variable, accessible only here in constructor. There are no real private variables
  //if as 'private' we intend variables accessible only by the class that defines the member and NOT by child classes
  var test_var = "super private";

  //the only way to access the "super private" test_var is from here
  this.privileged = function(){
    console.log(test_var);
  }();

  Test.test_var = 'protected';//protected variable: accessible only form inherited methods (prototype) AND child/inherited classes

  this.init();
};//end constructor

Test.test_var = "static";//static variable: accessible everywhere (I mean, even out of prototype, see domready below)

Test.prototype = {

 init:function(){
   console.log('in',Test.test_var);
 }

};//end prototype/class


//for example:
$(document).ready(function() {

 console.log('out',Test.test_var);

 var Jake = function(){}

 Jake.prototype = new Test();

 Jake.prototype.test = function(){
   console.log('jake', Test.test_var);
 }

 var jake = new Jake();

 jake.test();//output: "protected"

});//end domready

Eh bien, une autre façon de jeter un coup d'œil aux meilleures pratiques dans ces domaines est de simplement voir comment coffeescript traduit ces concepts.

#this is coffeescript
class Test
 #static
 @prop = "static"

 #instance
 constructor:(prop) ->
   @prop = prop
   console.log(@prop)

 t = new Test('inst_prop');

 console.log(Test.prop);


//this is how the above is translated in plain js by the CS compiler
  Test = (function() {
    Test.prop = "static";

    function Test(prop) {
     this.prop = prop;
     console.log(this.prop);
    }

    return Test;

  })();

  t = new Test('inst_prop');

  console.log(Test.prop);

En JavaScript, les variables sont statiques par défaut. Exemple :

var x = 0;

function draw() {
    alert(x); //
    x+=1;
}

setInterval(draw, 1000);

La valeur de x est incrémentée de 1 toutes les 1000 millisecondes.
Il imprimera 1,2,3 ainsi de suite

Il existe une autre approche, qui a résolu mes exigences après avoir parcouru ce fil. Cela dépend exactement de ce que vous voulez réaliser avec une "variable statique".

La propriété globale sessionStorage ou localStorage permet aux données d'être stockées pour la durée de la session, ou pour une période indéfinie plus longue jusqu'à ce qu'elles soient explicitement effacées, respectivement. Cela permet de partager des données entre toutes les fenêtres, cadres, onglets, fenêtres contextuelles, etc. de votre page / application et est beaucoup plus puissant qu'une simple "variable statique / globale" dans un segment de code.

Il évite tout problème avec la portée, la durée de vie, la sémantique, la dynamique, etc. des variables globales de niveau supérieur, c'est-à-dire Window.myglobal. Je ne sais pas à quel point c'est efficace, mais ce n'est pas important pour des quantités modestes de données, accessibles à des taux modestes.

Facilement accessible en tant que "sessionStorage.mydata = n'importe quoi" et récupéré de manière similaire. Voir «JavaScript: The Definitive Guide, Sixth Edition», David Flanagan, ISBN: 978-0-596-80552-4, chapitre 20, section 20.1. Ceci est facilement téléchargeable au format PDF par simple recherche, ou dans votre abonnement O'Reilly Safaribooks (qui vaut son pesant d'or).

Les classes / fonctions n'autorisent qu'un seul constructeur pour sa portée d'objet. Function Hoisting, declarations & expressions

• Les fonctions créées avec le constructeur Function ne créent pas de fermetures à leurs contextes de création; ils sont toujours créés dans la portée globale.

    var functionClass = function ( ) {
          var currentClass = Shape;
          _inherits(currentClass, superClass);
          function functionClass() { superClass.call(this); // Linking with SuperClass Constructor.
              // Instance Variables list.
              this.id = id;   return this;
          }
      }(SuperClass)

Fermetures - les copies de fermeture fonctionnent avec des données préservées.

• Les copies de chaque fermeture sont créées dans une fonction avec leurs propres valeurs ou références libres. Chaque fois que vous utilisez une fonction dans une autre fonction, une fermeture est utilisée.

• Une fermeture en JavaScript revient à conserver une copie de toutes les variables locales de sa fonction parente par les fonctions internes.

    function closureFun( args ) {
          // Local variable that ends up within closure
          var num = args;
          num++;
          return function() { console.log(num); }
      }
      var closure1 = closureFun( 5 );
      var closure2 = closureFun( 777 );
      closure1(); // 5
      closure2(); // 777
      closure2(); // 778
      closure1(); // 6

Classes de fonctions ES5 : utilise Object.defineProperty (O, P, Attributes)

La méthode Object.defineProperty () définit une nouvelle propriété directement sur un objet ou modifie une propriété existante sur un objet et renvoie l'objet.

Créé quelques méthodes en utilisant `` , afin que chaque fois puisse comprendre facilement les classes de fonctions.

'use strict';
var Shape = function ( superClass ) {
    var currentClass = Shape;
    _inherits(currentClass, superClass); // Prototype Chain - Extends

    function Shape(id) { superClass.call(this); // Linking with SuperClass Constructor.
        // Instance Variables list.
        this.id = id;   return this;
    }
    var staticVariablesJOSN = { "parent_S_V" : 777 };
    staticVariable( currentClass, staticVariablesJOSN );

    // Setters, Getters, instanceMethods. [{}, {}];
    var instanceFunctions = [
        {
            key: 'uniqueID',
            get: function get() { return this.id; },
            set: function set(changeVal) { this.id = changeVal; }
        }
    ];
    instanceMethods( currentClass, instanceFunctions );

    return currentClass;
}(Object);

var Rectangle = function ( superClass ) {
    var currentClass = Rectangle;

    _inherits(currentClass, superClass); // Prototype Chain - Extends

    function Rectangle(id, width, height) { superClass.call(this, id); // Linking with SuperClass Constructor.

        this.width = width;
        this.height = height;   return this;
    }

    var staticVariablesJOSN = { "_staticVar" : 77777 };
    staticVariable( currentClass, staticVariablesJOSN );

    var staticFunctions = [
        {
            key: 'println',
            value: function println() { console.log('Static Method'); }
        }
    ];
    staticMethods(currentClass, staticFunctions);

    var instanceFunctions = [
        {
            key: 'setStaticVar',
            value: function setStaticVar(staticVal) {
                currentClass.parent_S_V = staticVal;
                console.log('SET Instance Method Parent Class Static Value : ', currentClass.parent_S_V);
            }
        }, {
            key: 'getStaticVar',
            value: function getStaticVar() {
                console.log('GET Instance Method Parent Class Static Value : ', currentClass.parent_S_V);
                return currentClass.parent_S_V;
            }
        }, {
            key: 'area',
            get: function get() {
                console.log('Area : ', this.width * this.height);
                return this.width * this.height;
                }
        }, {
            key: 'globalValue',
            get: function get() {
                console.log('GET ID : ', currentClass._staticVar);
                return currentClass._staticVar;
            },
            set: function set(value) {
                currentClass._staticVar = value;
                console.log('SET ID : ', currentClass._staticVar);
            }
        }
    ];
    instanceMethods( currentClass, instanceFunctions );

    return currentClass;
}(Shape);

// ===== ES5 Class Conversion Supported Functions =====
function defineProperties(target, props) {
    console.log(target, ' : ', props);
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}
function staticMethods( currentClass, staticProps ) {
    defineProperties(currentClass, staticProps);
};
function instanceMethods( currentClass, protoProps ) {
    defineProperties(currentClass.prototype, protoProps);
};
function staticVariable( currentClass, staticVariales ) {
    // Get Key Set and get its corresponding value.
    // currentClass.key = value;
    for( var prop in staticVariales ) {
        console.log('Keys : Values');
        if( staticVariales.hasOwnProperty( prop ) ) {
            console.log(prop, ' : ', staticVariales[ prop ] );
            currentClass[ prop ] = staticVariales[ prop ];
        }
    }
};
function _inherits(subClass, superClass) {
    console.log( subClass, ' : extends : ', superClass );
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, 
            { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });
    if (superClass)
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

L'extrait de code ci-dessous consiste à tester Chaque instance a sa propre copie des membres d'instance et des membres statiques communs.

var objTest = new Rectangle('Yash_777', 8, 7);
console.dir(objTest);

var obj1 = new Rectangle('R_1', 50, 20);
Rectangle.println(); // Static Method
console.log( obj1 );    // Rectangle {id: "R_1", width: 50, height: 20}
obj1.area;              // Area :  1000
obj1.globalValue;       // GET ID :  77777
obj1.globalValue = 88;  // SET ID :  88
obj1.globalValue;       // GET ID :  88  

var obj2 = new Rectangle('R_2', 5, 70);
console.log( obj2 );    // Rectangle {id: "R_2", width: 5, height: 70}
obj2.area;              // Area :  350    
obj2.globalValue;       // GET ID :  88
obj2.globalValue = 999; // SET ID :  999
obj2.globalValue;       // GET ID :  999

console.log('Static Variable Actions.');
obj1.globalValue;        // GET ID :  999

console.log('Parent Class Static variables');
obj1.getStaticVar();    // GET Instance Method Parent Class Static Value :  777
obj1.setStaticVar(7);   // SET Instance Method Parent Class Static Value :  7
obj1.getStaticVar();    // GET Instance Method Parent Class Static Value :  7

Les appels de méthode statique sont effectués directement sur la classe et ne sont pas appelables sur les instances de la classe. Mais vous pouvez réaliser les appels de membres statiques à l'intérieur d'une instance.

Utilisation de la syntaxe:

   this.constructor.staticfunctionName();

class MyClass {
    constructor() {}
    static staticMethod() {
        console.log('Static Method');
    }
}
MyClass.staticVar = 777;

var myInstance = new MyClass();
// calling from instance
myInstance.constructor.staticMethod();
console.log('From Inside Class : ',myInstance.constructor.staticVar);

// calling from class
MyClass.staticMethod();
console.log('Class : ', MyClass.staticVar);

Classes ES6: Les classes ES2015 sont un simple sucre sur le modèle OO basé sur un prototype. Le fait d'avoir un seul formulaire déclaratif pratique facilite l'utilisation des modèles de classe et encourage l'interopérabilité. Les classes prennent en charge l'héritage basé sur des prototypes, les super appels, les méthodes et constructeurs d'instance et statiques.

Exemple : référez-vous à mon post précédent.

Il existe 4 façons d'émuler des variables statiques locales fonctionnelles en Javascript.

Méthode 1: utilisation des propriétés d'objet fonction (prise en charge dans les anciens navigateurs)

function someFunc1(){
    if( !('staticVar' in someFunc1) )
        someFunc1.staticVar = 0 ;
    alert(++someFunc1.staticVar) ;
}

someFunc1() ; //prints 1
someFunc1() ; //prints 2
someFunc1() ; //prints 3

Méthode 2: à l'aide d'une fermeture, variante 1 (prise en charge dans les anciens navigateurs)

var someFunc2 = (function(){
    var staticVar = 0 ;
    return function(){
        alert(++staticVar) ;
    }
})()

someFunc2() ; //prints 1
someFunc2() ; //prints 2
someFunc2() ; //prints 3

Méthode 3: à l'aide d'une fermeture, variante 2 (également prise en charge dans les anciens navigateurs)

var someFunc3 ;
with({staticVar:0})
    var someFunc3 = function(){
        alert(++staticVar) ;
    }

someFunc3() ; //prints 1
someFunc3() ; //prints 2
someFunc3() ; //prints 3

Méthode 4: à l'aide d'une fermeture, variante 3 (nécessite la prise en charge d'EcmaScript 2015)

{
    let staticVar = 0 ;
    function someFunc4(){
        alert(++staticVar) ;
    }
}

someFunc4() ; //prints 1
someFunc4() ; //prints 2
someFunc4() ; //prints 3

Vous pouvez définir des fonctions statiques en JavaScript à l'aide du staticmot clé:

class MyClass {
  static myStaticFunction() {
    return 42;
  }
}

MyClass.myStaticFunction(); // 42

Au moment d'écrire ces lignes, vous ne pouvez toujours pas définir de propriétés statiques (autres que des fonctions) au sein de la classe. Les propriétés statiques sont toujours une proposition de l'étape 3 , ce qui signifie qu'elles ne font pas encore partie de JavaScript. Cependant, rien ne vous empêche d'affecter simplement à une classe comme vous le feriez pour tout autre objet:

class MyClass {}

MyClass.myStaticProperty = 42;

MyClass.myStaticProperty; // 42

Remarque finale: soyez prudent lorsque vous utilisez des objets statiques avec héritage - toutes les classes héritées partagent la même copie de l'objet .

En JavaScript, il n'y a pas de terme ou de mot-clé statique, mais nous pouvons mettre ces données directement dans l'objet fonction (comme dans tout autre objet).

function f() {
    f.count = ++f.count || 1 // f.count is undefined at first
    alert("Call No " + f.count)
}

f(); // Call No 1

f(); // Call No 2

J'utilise beaucoup de variables de fonction statiques et c'est vraiment dommage que JS n'ait pas de mécanisme intégré pour cela. Trop souvent, je vois du code où les variables et les fonctions sont définies dans une portée externe, même si elles ne sont utilisées que dans une seule fonction. C'est moche, sujet aux erreurs et demande juste des ennuis ...

J'ai trouvé la méthode suivante:

if (typeof Function.prototype.statics === 'undefined') {
  Function.prototype.statics = function(init) {
    if (!this._statics) this._statics = init ? init() : {};
    return this._statics;
  }
}

Cela ajoute une méthode «statique» à toutes les fonctions (oui, détendez-vous), lorsqu'elle est appelée, elle ajoute un objet vide (_statics) à l'objet fonction et le renvoie. Si une fonction init est fournie, _statics sera défini sur init () result.

Vous pouvez alors faire:

function f() {
  const _s = f.statics(() => ({ v1=3, v2=somefunc() });

  if (_s.v1==3) { ++_s.v1; _s.v2(_s.v1); }
} 

En comparant cela à un IIFE qui est l'autre bonne réponse, cela a l'inconvénient d'ajouter une affectation et une si à chaque appel de fonction et d'ajouter un membre '_statics' à la fonction, mais il y a quelques avantages: les arguments sont là à le haut pas dans la fonction interne, l'utilisation d'un 'statique' dans le code de la fonction interne est explicite avec un '_s'. préfixe, et il est globalement plus simple à regarder et à comprendre.

Sommaire:

Dans ES6/ ES 2015, le classmot clé a été introduit avec un staticmot clé accompagné . Gardez à l'esprit qu'il s'agit de sucre syntaxique par rapport au modèle d'héritage prototypique qu'incarne javavscript. Le staticmot-clé fonctionne de la manière suivante pour les méthodes:

class Dog {

  static bark () {console.log('woof');}
  // classes are function objects under the hood
  // bark method is located on the Dog function object
  
  makeSound () { console.log('bark'); }
  // makeSound is located on the Dog.prototype object

}

// to create static variables just create a property on the prototype of the class
Dog.prototype.breed = 'Pitbull';
// So to define a static property we don't need the `static` keyword.

const fluffy = new Dog();
const vicky = new Dog();
console.log(fluffy.breed, vicky.breed);

// changing the static variable changes it on all the objects
Dog.prototype.breed = 'Terrier';
console.log(fluffy.breed, vicky.breed);

J'ai utilisé le prototype et ça a fonctionné ainsi:

class Cat extends Anima {
  constructor() {
    super(Cat.COLLECTION_NAME);
  }
}

Cat.COLLECTION_NAME = "cats";

ou en utilisant un getter statique:

class Cat extends Anima {
  constructor() {
    super(Cat.COLLECTION_NAME);
  }

  static get COLLECTION_NAME() {
    return "cats"
  }
}

Les variables au niveau de la fenêtre sont en quelque sorte des statiques dans le sens où vous pouvez utiliser une référence directe et elles sont disponibles pour toutes les parties de votre application

Il n'y a pas de variable statique en Javascript. Ce langage est orienté objet basé sur des prototypes, il n'y a donc pas de classes, mais des prototypes d'où les objets se "copient".

Vous pouvez les simuler avec des variables globales ou avec du prototypage (en ajoutant une propriété au prototype):

function circle(){
}
circle.prototype.pi=3.14159

En travaillant avec les sites Web MVC qui utilisent jQuery, j'aime m'assurer que les actions AJAX dans certains gestionnaires d'événements ne peuvent être exécutées qu'une fois la demande précédente terminée. J'utilise une variable d'objet jqXHR "statique" pour y parvenir.

Étant donné le bouton suivant:

<button type="button" onclick="ajaxAction(this, { url: '/SomeController/SomeAction' })">Action!</button>

J'utilise généralement un IIFE comme celui-ci pour mon gestionnaire de clics:

var ajaxAction = (function (jqXHR) {
    return function (sender, args) {
        if (!jqXHR || jqXHR.readyState == 0 || jqXHR.readyState == 4) {
            jqXHR = $.ajax({
                url: args.url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify($(sender).closest('form').serialize()),
                success: function (data) {
                    // Do something here with the data.
                }
            });
        }
    };
})(null);

Si vous souhaitez utiliser un prototype, il existe un moyen

var p = function Person() {
    this.x = 10;
    this.y = 20;
}
p.prototype.counter = 0;
var person1 = new p();
person1.prototype = p.prototype;
console.log(person1.counter);
person1.prototype.counter++;
var person2 = new p();
person2.prototype = p.prototype;
console.log(person2.counter);
console.log(person1.counter);

En faisant cela, vous pourrez accéder à la variable de compteur à partir de n'importe quelle instance et tout changement dans la propriété sera immédiatement reflété !!