Classes JavaScript

quoi à ce sujet :

var Foo = (function() {
    //"private" variables 
    var _bar;

    //constructor
    function Foo() {};

    //add the methods to the prototype so that all of the 
    //Foo instances can access the private static
    Foo.prototype.getBar = function() {
        return _bar;
    };
    Foo.prototype.setBar = function(bar) {
        _bar = bar;
    };

    return Foo;
})();

Et maintenant, nous avons l'instanciation, l'encapsulation et l'héritage.

Mais, il y a toujours un problème. Le private variable est static parce qu'il est partagé entre toutes les instances de Foo. Démonstration rapide :

var a = new Foo();
var b = new Foo();
a.setBar('a');
b.setBar('b');
alert(a.getBar()); //alerts 'b' :(    

Une meilleure approche pourrait être à l'aide de conventions pour les variables privées : toute variable privée doit commencer par un caractère de soulignement. Cette convention est bien connu et largement utilisé, de sorte que quand un autre programmeur utilise ou modifie votre code et voit une variable de départ avec un trait de soulignement, qu'il sache que c'est privé, pour un usage interne seulement et il ne sera pas le modifier.

Voici la réécriture à l'aide de la présente convention :

var Foo = (function() {
    //constructor
    function Foo() {
        this._bar = "some value";
    };

    //add the methods to the prototype so that all of the 
    //Foo instances can access the private static
    Foo.prototype.getBar = function() {
        return this._bar;
    };
    Foo.prototype.setBar = function(bar) {
        this._bar = bar;
    };

    return Foo;
})();

Maintenant, nous avons l'instanciation, héritage, mais nous avons perdu notre encapsulation en faveur de conventions :

var a = new Foo();
var b = new Foo();
a.setBar('a');
b.setBar('b');
alert(a.getBar()); //alerts 'a' :) 
alert(b.getBar()); //alerts 'b' :) 

mais le privé vars sont accessibles :

delete a._bar;
b._bar = null;
alert(a.getBar()); //alerts undefined :(
alert(b.getBar()); //alerts null :(

Fermetures sont à votre ami!

Il suffit d'ajouter le suivant minuscule fonction de votre haut niveau de l'espace de noms et vous êtes prêt à la programmation orientée objet, complet avec

• d'encapsulation, de l'électricité statique et de l'instance, privé et public, les variables
  et les méthodes
• héritage
• au niveau de la classe d'injection (par exemple. pour singleton services)
• pas de contraintes, pas de cadre, juste un bon vieux Javascript

---

function clazz(_class, _super) {
    var _prototype = Object.create((_super || function() {}).prototype);
    var _deps = Array.isArray(_class) ? _class : [_class]; _class = _deps.pop();
    _deps.push(_super);
    _prototype.constructor = _class.apply(_prototype, _deps) || _prototype.constructor;
    _prototype.constructor.prototype = _prototype;
    return _prototype.constructor;
}

La fonction ci-dessus simplement les fils jusqu'à la classe de prototype et de l'éventuelle constructeur parent, et renvoie le résultant constructeur, prêt au moment de l'instanciation.

Vous pouvez maintenant le plus naturellement déclarer vos classes de base (ie. qui s'étendent {}) dans les quelques lignes de code, compléter avec de la statique, de l'instance, publiques et privées, propriétés et méthodes:

MyBaseClass = clazz(function(_super) { //class closure, 'this' is the prototype
    //local variables and functions declared here are private static variables and methods
    //properties of 'this' declared here are public static variables and methods
    return function MyBaseClass(arg1, ...) { //or: this.constructor = function(arg1, ...) {
        //local variables and functions declared here are private instance variables and methods
        //properties of 'this' declared here are public instance variables and methods
    };
});

Extension d'une classe? D'autant plus naturel que de bien:

MySubClass = clazz(function(_super) { //class closure, 'this' is the prototype
    //local variables and functions are private static variables and methods
    //properties of this are public static variables and methods
    return function MySubClass(arg1, ...) //or: this.constructor = function(arg1, ...) {
        //local variables and functions are private instance variables and methods
        _super.apply(this, arguments); //or _super.call(this, arg1, ...)
        //properties of 'this' are public instance variables and methods
    };
}, MyBaseClass); //extend MyBaseClass

En d'autres termes, passer le parent le constructeur de la classe à la clazz fonction et ajouter _super.call(this, arg1, ...) à l'enfant de la classe de constructeur, qui appelle les parents de la classe de constructeur avec les arguments requis. Comme avec n'importe quel standard de succession, le constructeur parent d'appel doit venir en premier dans l'enfant du constructeur.

Noter que vous êtes libre soit explicitement le nom du constructeur avec this.constructor = function(arg1, ...) {...}, ou this.constructor = function MyBaseClass(arg1, ...) {...} si vous avez besoin d'un accès simple à l'constructeur du code dans le constructeur, ou même tout simplement de retourner le constructeur avec return function MyBaseClass(arg1, ...) {...} comme dans le code ci-dessus. Selon ce que vous sentez le plus à l'aise avec.

Simplement d'instancier des objets de ces classes comme vous le feriez normalement à partir d'un constructeur: myObj = new MyBaseClass();

Remarquez comment les fermetures de bien encapsuler l'ensemble de la classe fonctionnalités, y compris son prototype et constructeur, ce qui procure une espace de noms pour la statique et de l'instance, privé et public, des propriétés et des méthodes. Le code dans une classe de fermeture est complètement libre de toutes contraintes. Pas de cadre, pas de contraintes, juste un bon vieux Javascript. Les fermetures de règle!

Oh, et si vous voulez injecter singleton dépendances (par exemple. les services) dans votre classe (ie. prototype), clazz va le faire pour vous à la AngularJS:

DependentClass = clazz([aService, function(_service, _super) { //class closure, 'this' is the prototype
    //the injected _service dependency is available anywhere in this class
    return function MySubClass(arg1, ...) //or: this.constructor = function(arg1, ...) {
        _super.apply(this, arguments); //or _super.call(this, arg1, ...)
        //the injected _service dependency is also available in the constructor
    };
}], MyBaseClass); //extend MyBaseClass

Que le code ci-dessus tente d'illustrer, à injecter des singletons dans une classe, il suffit de placer la classe de fermeture de la dernière entrée dans un tableau avec toutes ses dépendances. Également ajouter des paramètres correspondant à la classe de fermeture à l'avant de la _super paramètre et dans le même ordre que dans le tableau. clazz permettra d'injecter les dépendances à partir du tableau comme arguments dans la classe de fermeture. Les dépendances sont alors disponibles n'importe où dans la classe de fermeture, y compris le constructeur.

En fait, depuis les dépendances sont injectés dans le prototype, ils sont disponibles pour les méthodes statiques avant même que tout objet est instancié à partir de la classe. C'est très puissant pour le câblage de vos applications ou de l'unité et de bout en bout tests. Il supprime également la nécessité d'injecter des singletons dans les constructeurs, qui, autrement, inutilement clobbers le constructeur du code.

Vérifier ce violon: http://jsfiddle.net/5uzmyvdq/1/

Commentaires et suggestions bienvenus!

Classes JavaScript sont introduits dans ECMAScript 6 et sont syntaxique de sucre sur du JavaScript prototype existant à base d'héritage. La classe syntaxe n'est pas l'introduction d'un nouvel objet-orienté modèle d'héritage en JavaScript. Classes JavaScript fournir un moyen beaucoup plus simple et plus claire de la syntaxe pour créer des objets et de les traiter avec l'héritage.

Vous pouvez voir plus de ce lien Communauté Mozilla

Github

Un problème avec beaucoup de JS classes là, c'est qu'ils ne sont pas sûr de leurs champs et de méthodes qui signifie que n'importe qui de l'utiliser risquez de remplacer une méthode. Par exemple le code:

function Class(){
var name="Luis";
var lName="Potter";
}
Class.prototype.changeName=function(){
this.name="BOSS";
console.log(this.name);
};
var test= new Class();
console.log(test.name);
test.name="ugly";
console.log(test.name);
test.changeName();
test.changeName=function(){
console.log("replaced");
};
test.changeName();
test.changeName();

sera de sortie:

ugly
BOSS
replaced 
replaced 

Comme vous pouvez le voir le changeName fonction est surchargée. Le code suivant les méthodes de la classe et les champs, et les getters et setters serait utilisé pour accéder à leur rendre cela plus d'un "régulier" class trouvé dans d'autres langues.

function Class(){
var name="Luis";
var lName="Potter";
function getName(){
console.log("called getter"); 
return name;
};
function setName(val){
console.log("called setter"); 
name = val
};
function getLName(){
return lName
};
function setLName(val){
lName = val;
};
Object.defineProperties(this,{
name:{
get:getName, 
set:setName, 
enumerable:true, 
configurable:false
},
lastName:{
get:getLName, 
set:setLName, 
enumerable:true, 
configurable:false
}
});
}
Class.prototype.changeName=function(){
this.name="BOSS";
};   
Object.defineProperty(Class.prototype, "changeName", {
writable:false, 
configurable:false
});
var test= new Class();
console.log(test.name);
test.name="ugly";
console.log(test.name);
test.changeName();
test.changeName=function(){
console.log("replaced")
};
test.changeName();
test.changeName();

Ce sorties:

called getter
Luis
called setter 
called getter 
ugly 
called setter 
called setter 
called setter 

Maintenant vos méthodes de la classe ne peut pas être remplacé par des valeurs aléatoires ou des fonctions et du code dans les getters et setters toujours exécuter lors de la tentative de lecture ou d'écriture sur le terrain.