La meilleure façon de créer de la classe des accesseurs/mutateurs en Javascript?

À venir à partir de C#/PHP, je voudrais avoir plein getters/setters sur les classes (fonctions) que j'ai créer avec Javascript.

Cependant, dans beaucoup de code Javascript que j'ai rencontrées, les accesseurs et mutateurs ne sont pas utilisés, plutôt simples variables publiques.

J'ai été heureux de trouver John Resig de l'article sur les getters et les setters, mais certains commentaires sur ce que certains navigateurs "ne prennent pas en charge les accesseurs et mutateurs" qui est source de confusion pour moi, car ils ne sont pas une "fonctionnalité" de Javascript, mais plus d'un modèle simple qui utilise la base de la syntaxe Javascript. Cet article a été écrit en 2007, de sorte qu'il pourrait être dépassée par maintenant.

Quel est l'état actuel des getters et setters en Javascript? Sont-ils vraiment "pris en charge" par tous les navigateurs d'aujourd'hui (quoi que cela signifie)? Sont-ils un modèle de programmation utiles pour Javascript ou sont classes Javascript (les fonctions) mieux avec les variables publiques? Est-il une meilleure façon de les mettre en œuvre que le suivant?

$(document).ready(function() {
    var module = new Module('idcode');
    module.set_id_code('new idcode');
    module.set_title('new title');
    $('body').html(module.get_id_code()+': '+module.get_title());
});

function Module(id_code, title) {
    var id_code = id_code;
    var title = title;

    //id_code
    this.get_id_code = function() {
        return id_code;
    }
    this.set_id_code = function(value) {
        id_code = value;
    }

    //title
    this.get_title = function() {
        return title;
    }
    this.set_title = function(value) {
        title = value;
    }
}
  • Pourquoi voulez-vous le code de ballonnements?
  • Exactement, je ne veux pas d'augmentation du code, mais je voudrais avoir la séparation du public et du privé, de l'accès à mes cours comme je le fais dans d'autres langages tels que PHP et C#. PHP a __get et __set méthodes magiques et C# a sa "syntaxe de la propriété" pour obtenir la séparation, sans le ballonnement de la syntaxe. Tout cela en Javascript?
  • A la ci-dessus morceau de code qui fonctionne dans internet explorer 7/8/9 ??
InformationsquelleAutor Edward Tanguay | 2010-12-15
  1. 15

    Firefox, Safari, Chrome et Opera (mais pas IE) ont tous le même non-standard getter et setter mécanisme. ECMAScript 5 comprend une syntaxe différente, c'est-à actuellement en train de faire son chemin dans les navigateurs et deviendra la norme dans l'avenir. IE 8 a déjà cette fonctionnalité, mais uniquement sur les nœuds DOM, ce n'est pas une native des objets JavaScript. C'est ce que la syntaxe ressemble à ceci:

    var obj = {};

Object.defineProperty(obj, "value", {
    get: function () {
        return this.val;
    },
    set: function(val) {
        this.val = val;
    }
});
    InformationsquelleAutor Tim Down
  2. 9

    Vous êtes à côté de la question, je pense. (Ou peut-être l'autre answerers manquent le point.) ECMAScript fournit une "derrière-le-scènes" getter/setter mécanisme, de sorte que 

    x.foo = 3;
y = x.foo;

    vraiment se traduit par (sorte de)

    x.PutValue("foo",3);
y = x.GetValue("foo");

    où PutValue et GetValue sont anonymes, ne sont pas directement accessibles fonctions pour les setters et getters pour les propriétés. (Voir la ECMAScript standard, 3ème ed., section 8.7.1. et 8.7.2) La 3ème édition ne semble pas de définition explicite de la façon dont les utilisateurs peuvent configurer des getters et des fonctions de définition. Mozilla mise en œuvre de Javascript a fait et le fait, par exemple (ce qui est en JSDB qui utilise Javascript 1.8):

    js>x = {counter: 0};
[object Object]
js>x.__defineGetter__("foo", function() {return this.counter++; });
js>x.foo
0
js>x.foo
1
js>x.foo
2
js>x.foo
3
js>x.foo
4

    La syntaxe est (ou au moins a été jusqu'à présent) spécifiques à chaque navigateur. Internet Explorer en particulier est absent, tout au moins selon cette SORTE de question.

    De la 5e édition du standard ECMAScript ne semblent standardiser sur ce mécanisme. Voir ce DONC, la question sur les getters et les setters.

    modifier: Un exemple, peut-être, à vos fins:

    function makePrivateObject()
{
   var state = 0;
   var out = {};
   out.__defineSetter__("foo", function(x) {});
   //prevent foo from being assigned directly
   out.__defineGetter__("foo", function() { return state; });
   out.count = function() { return state++; }
   return out;
}

js>x = makePrivateObject()
[object Object]
js>x.foo
0
js>x.foo = 33
33
js>x.foo
0
js>x.count()
0
js>x.count()
1
js>x.count()
2
js>x.foo
3
    • Qui peut être la façon dont ils sont gérés en interne, mais techniquement, ils sont toujours en public "variables" si je ne peux pas contrôler l'accès à eux. L'avantage de getters et setters pour moi est que je peux déterminer, par exemple, que le "Salaire" propriété ne peut être changé à l'intérieur, ou, par exemple, que lorsqu'il est changé, (a) la modification est enregistrée, (b) et l'événement est déclenché, etc. Sauf si j'ai de lecture/définition des méthodes accesseur je n'ai pas la possibilité de définir cette couche de fonctionnalités pour mes cours.
    • Ah -- mais il y a une subtilité ici; si vous avez la possibilité de personnaliser les getter/setter, vous ne. Je vais modifier ma réponse.
    InformationsquelleAutor Jason S
  3. 5

    Comment sur:

    function Module(id_code, title) {
    var id_code = id_code;
    var title = title;

    var privateProps = {};

    this.setProperty = function(name, value) {
      //here you could e.g. log something
      privateProps[name] = value;
    }

    this.getProperty = function(name) {
      return privateProps[name];
    }
}

    Les getter et setter ici d'agir sur un objet privé utilisé pour stocker des propriétés qui ne peuvent pas être accessible depuis n'importe quel autres méthodes. Afin de vous pourriez, par exemple, de mettre en œuvre un setter (ou de lecture) que les journaux ou ne ajax ou que ce soit, à chaque fois qu'une propriété est modifiée (l'un des buts de getter/setter).

    • Qui ne fournit pas de fonctionnalité utile. setProperty et getProperty sont des fonctions publiques, de sorte que cela ajoute juste un niveau d'indirection. Il n'ajoute pas la possibilité d'appeler privé de lecture et de définition des fonctions.
    • Il ajoute des propriétés qui ne peuvent être accessibles que par les getter et setter - exactement comme public les méthodes getter et setter sont utilisés pour modifier les membres privés dans d'autres langues. C'est une démonstration de ces méthodes pourrait faire bien d'autres choses encore.
    • juste assez-mais ajouter un crochet dans votre code pour le faire, ou y ajouter des commentaires dans votre code où le comportement peut être modifié. Oui c'est évident pour le vétéran des programmeurs javascript, mais pas pour les débutants.
    • S - Ajouté quelques explications.
    InformationsquelleAutor sje397
  4. 5

    Vous pouvez réellement définir les setters et getters en javascript et pas seulement imiter d'eux. Je pense qu'il fonctionne sur tous les navigateurs sauf IE8 et ci-dessous.

    $(document).ready(function() {
  var module = new Module('idcode');
  module.id = 'new idcode';
  module.title = 'new title';
  $('body').html(module.id + ': ' + module.title);
});

function Module(id, title) {
  return {
    id_code: id_code,
    _title: title,

    get id() {
      return id_code;
    },
    set id(value) {
      id_code = value;
    },

    get title() {
      return _title;
    },
    set title(value) {
      title = value;
    }
  }
};
    InformationsquelleAutor PuercoPop
  5. 2

    J'aime ceci :

    // Module
var Module = function() {

    //prive getter/setter value
    var __value;

    //private getter/setter method
    var _value = function() {
        if(!arguments.length) return __value;
        else __value = arguments[0];
    };

    //output/public     
    return {
        value: _value
    };
}
    InformationsquelleAutor jaegow
  6. 1

    Getters et setters ne sont pas des fonctions, mais des "design patterns" (augmentation du code dans ce cas) pour les langues qui ne supportent pas la syntaxe de la propriété.

    Depuis Javascript n'a pas besoin de getters et setters, vous ne voulez pas de les écrire. L'utilisation de la langue des fonctionnalités qui sont disponibles pour vous et les expressions idiomatiques que l'excellent travail dans l'une des langues ne fonctionnent pas si bien dans un autre.

    Une de mes citations préférées vient de Python de la communauté:

    Nous sommes tous des adultes consentants ici

    lors de la discussion pourquoi variables privées et se cacher de l'information n'est pas nécessaire.

    La citation peut être trouvé ici.

    Apprendre ce que la langue offre à vous et embrasser sa culture et ses règles.

    • -1 Propriété des mutateurs sont essentiels pour une bonne encapsulation. Permettant d'objets dans les entrailles d'un autre objet provoque d'horribles bugs! Il n'aurait aucun moyen de le garder en état interne cohérente. Aussi, la langue ne prend en charge les getters et les setters.
    InformationsquelleAutor darioo
  7. 0

    Fiable, sémantique, j'ai favorisé consiste à utiliser les setters et les accesseurs. Par exemple, j'ai créé l'objet suivant:

    var myComplexObject = {
  changelog: {},
  log: function(name, val) {
    console.log("set " + name + " to " + val);
    if (!this.changelog[name])
      this.changelog[name] = [];
    this.changelog[name].push(val);
  },
  set o (val) {
    this.log("o", val);
  },
  get o () {
    console.log("You will never know the true value!");
    return 42;
  }
}

    Ici, à chaque fois que vous lire ou de modifier la valeur de o, le comportement est personnalisé. Prenez, par exemple, la ligne suivante de code et de sa sortie de la console:

    myComplexObject.o = "oxygen";
    set o to oxygen

    Alors, dans cet exemple, la tentative de lecture de la valeur des résultats dans ce:

    var read = myComplexObject.o;
console.log(read);
    You will never know the true value!
42

    Et, dans cet exemple, chaque nouvelle valeur que vous avez définie est connecté:

    myComplexObject.o = "Oh no!";
console.log(myComplexObject.changelog.o);
    set o to Oh no!
["oxygen", "Oh no!"]
    InformationsquelleAutor Supuhstar