web-dev-qa-db-fra.com

variable de classe en Javascript

Comment déclarer des variables de classe en Javascript.

function Person(){
    fname = "thisfname"; //What needs to be put here
 }
alert(Person.fname) //It should alert "thisFrame"

Je ne veux pas utiliser cette approche.

function Person(){

 }
Person.fname = "thisfname";
alert(Person.fname) //alerts "thisframe"
javascriptsyntax
23
alter

JavaScript n'a pas de classes comme d'autres l'ont dit. L'héritage est résolu par le biais d'un prototypage qui ne fait essentiellement que créer des références de propriété non supprimables sur un objet nouvellement créé. JavaScript propose également des alternatives pour les objets de données simples, à savoir les littéraux d'objet.

La variation d'une "classe" en JavaScript devrait être définie comme telle:

// I use function statements over variable declaration 
// when a constructor is involved.
function Person(name) {
    this.name = name;
}

// All instances of Person create reference methods to it's prototype.
// These references are not deletable (but they can be overwritten).
Person.prototype = {
    speak: function(){
        alert(this.name + ' says: "Hello world!"');
    }
};

var Mary = new Person('Mary');
Mary.speak(); // alerts 'Mary says: "Hello world!"'

La référence this pointe toujours vers le propriétaire de la function. Si vous appelez Person sans l'opérateur new, le propriétaire sera l'étendue globale (fenêtre). Si vous n'utilisez pas cette référence pour affecter des propriétés à votre instance, ces propriétés seront simplement déclarées en tant que variables. Si vous n'utilisez pas l'instruction var, ces déclarations créeront des variables globales mauvaises!

plus à ce sujet

L'utilisation de la référence this dans une fonction constructeur est extrêmement importante si vous souhaitez ajouter des propriétés à l'instance actuelle. Sans utiliser this, vous créez uniquement une variable (qui n'est pas identique à une propriété) et comme indiqué, si vous n'utilisez pas non plus l'instruction var, vous créez des variables globales.

function Person(){
    name = 'Mary'
}
var p = new Person();
alert(p.name); // undefined, did not use 'this' to assign it to the instance.
alert(name); // 'Mary', boo, it created a global variable!

Utilisez ceci!

function Person(){
    this.name = 'Mary'
}
var p = new Person();
alert(p.name); // 'Mary', yay!
alert(name);   // undefined, yay!

Notez que tout élément affecté à une instance par le constructeur de la fonction NE PEUT ÊTRE HÉRITÉ, à moins que vous ne l'affectiez au prototype et que vous l'écrasiez à nouveau dans le constructeur de la fonction pour en faire une propriété.

Lorsque vous créez une nouvelle instance via une fonction doublée en tant que constructeur, les événements suivants se produisent en réalité.

pseudo code:

   copy Person.prototype as person
   invoke Person function on person
   return person

En fait, c'est ce qui se produit dans toutes les langues classiques lorsque vous créez une instance de classe. Mais la principale différence en JavaScript est qu’il n’est pas encapsulé dans une déclaration Nice Class. À l'origine, JavaScript n'avait même pas de constructeur de fonction, mais il a été ajouté plus tard, car Sun exigeait qu'ils veuillent que JavaScript ressemble davantage à Java.

Littéraux d'objet

L'alternative pour les constructeurs de fonction pour les objets qui ne transportent que des données intrinsèques et aucune méthode n'est le littéral d'objet.

var Mary = {
    firstName: 'Mary',
    lastName: 'Littlelamb'
};

Quelle est la manière préférée de déclarer des objets intrinsèques plutôt que:

// do not ever do this!
var Mary = new Object();
Mary.firstName = 'Mary';
Mary.lastName = 'Littlelamb';

Avec des littéraux d'objet dans votre ensemble de compétences, vous pouvez créer un modèle d'usine pour des objets de données intrinsèques à l'aide de module pattern (qui est généralement utilisé pour des singletons).

var createPerson = function(firstName, lastName){
    return {
        firstName: firstName,
        lastName: lastName
    }
}
var Mary = createPerson('Mary', 'Littlelamb');

Cela permet une encapsulation confortable, mais ne peut être utilisé que pour des objets de données intrinsèques.

Une autre chose que vous pouvez faire avec les littéraux d'objet et JavaScript est la délégation, qui devrait être préférée.

var personMethods = {
    speak: function(){
        alert(this.firstName + ' says: "Hello world!"');
    }
};

var Mary = {
    firstName: "Mary",
    lastName: "Littlelamb"
};

var Peter = {
    firstName: "Peter",
    lastName: "Crieswolf"
};

personMethods.speak.apply(Mary); // alerts 'Mary says: "Hello world!"'
personMethods.speak.apply(Peter); // alerts 'Peter says: "Hello world!"'

Pourquoi cela devrait-il être préféré? Parce que vos objets restent minutieux et lisibles, même les références prototypiques consomment de la mémoire. Lorsque vous utilisez l'héritage et le "sous-classement", vous vous retrouvez avec des instances enfants contenant de nombreuses références de méthodes inutilisées. La délégation est toujours meilleure.

36
BGerrissen

La façon dont vous avez mentionné est de savoir comment définir les variables de classe, l'autre (à l'intérieur de function Person) est de définir les propriétés d'instance.

function Person(name){
    this.name = name;
}
Person.specie = "Human";

alert(Person.specie) //alerts "Human", a class variable.

var john = new Person('John');
alert(john.name); //alerts "John", an object property.
9
aularon

Il est important de comprendre qu’il n’existe pas de classes en JavaScript. Il existe certains frameworks qui simulent un modèle d'héritage classique, mais techniquement, tout se résume à fonctions de constructeur et prototypes .

Donc, vous voudrez peut-être faire quelque chose comme

PersonProto = { // the "class", or prototype
    fname: "thisfname"
};

function Person() { // the constructor function
    this.instanceVar = 'foo';
}

Maintenant, connectez le constructeur au prototype:

Person.prototype = PersonProto;

Et voilà:

var a = new Person();
alert(a.fname);
3
user123444555621

Vous pouvez également essayer cette approche:

      function name(){
            this.name;
            this.lastname;
        }
        name.prototype.firstName=function(name){
            this.name = name;
            alert(this.name);

        }
        var x = new name();
        x.firstName("Kartikeya");
0
Kartikeya Sharma
function Person(){
    this.fname = null;
    this.lname = null;
    this.set_fname = set_fname;
    this.set_lname = set_lname;
    this.get_name = get_name;
}
/* Another way
function Person(fname, lname){
    this.fname = fname;
    this.lname = lname;
    this.get_name = get_name;
}*/
function set_fname(fname){
    this.fname = fname;
}
function set_lname(y){
    this.lname = lname;
}
function get_name(){
    with (this) {
        return fname + ' ' + lname;
    }
}

person_obj = new Person();
person_obj.set_fname('Foo');
person_obj.set_lname('Bar');

// person_obj = new Person('Foo', 'Bar');

person_obj = get_name(); // returns "Foo Bar"

Je ne peux pas penser à un meilleur exemple.

0
simplyharsh

3 façons de définir une variable en classe JavaScript:

1) Pour définir les propriétés créées avec function (), utilisez le mot clé 'this'

function Apple (type) {
    this.type = type;
    this.color = "red";
}

Pour instancier un objet de la classe Apple, définissez certaines propriétés. Vous pouvez effectuer les opérations suivantes:

var Apple = new Apple('Macintosh');
Apple.color = "reddish";

2) Utilisation de la notation littérale

var Apple = {
type: "Macintosh",
La couleur rouge"

}

Dans ce cas, vous n'avez pas besoin (et ne pouvez pas) créer une instance de la classe, celle-ci existe déjà.

Apple.color = "reddish";

3) Singleton utilisant une fonction

var Apple = new function() {
    this.type = "Macintosh";
    this.color = "red";
}

Donc, vous voyez que cela ressemble beaucoup à 1 discuté ci-dessus, mais la façon d'utiliser l'objet est exactement comme dans 2.

Apple.color = "reddish";
0
sweets-BlingBling