web-dev-qa-db-fra.com

Variables d'instance dans les classes Javascript

Je code principalement en PHP et Java, mais je vais occasionnellement travailler sur le front-end d'un projet et utiliser JavaScript. Je crée généralement des objets différemment que ci-dessous, mais je suis tombé sur cela et il a attrapé mon l'intérêt étant que la syntaxe est similaire à ce que je programme habituellement.

Je fouillais, essayant de comprendre comment utiliser les variables d'instance dans les classes JavaScript en utilisant la syntaxe ci-dessous. J'ai essayé de déclarer les variables d'instance par name;, ou _name;, ou var name;, ou toutes ces variables précédentes et en ajoutant = null;, mais toujours des erreurs dans ma console. Les erreurs sont principalement my-file.js:2 Uncaught SyntaxError: Unexpected identifier. J'essaie simplement de définir ma variable d'instance via mon constructeur.

Comment utiliser les variables d'instance en JavaScript, en utilisant la syntaxe ci-dessous?

class MyClass {
  var _name;

  constructor(name) {
    _name = name;
    alert("Hello world, from OO JS!");
    this.myFunction();
  }

  myFunction() {
    document.getElementById("myElement").addEventListener("click", function() {
        console.log("Ant's function runs. Hello!");
    });
  }
}

window.onload = function() {
  var person = "John Smith";
  var myClass = new MyClass(person);
}
javascriptclassoopconstructorinstance-variables
10
aCarella

Il s'agit toujours d'une proposition et cela ressemblerait à ceci:

class A {
   property = "value";
}

BTW, lorsque vous souhaitez accéder à une propriété de classe (c'est-à-dire une propriété d'objet propre), vous devrez toujours utiliser this.property:

class A {
    property = "value";

    constructor() {
        console.log(this.property);
    }
}

Si vous souhaitez utiliser cette syntaxe aujourd'hui, vous devrez utiliser un transpilateur comme Babel .

11
Matías Fidemraizer

Vous ne déclarez pas de propriétés; il suffit de définir this._name = name.

@Ryan Comment puis-je accéder à la variable d'instance dans mon écouteur d'événements? this._name donne juste undefined.

Chaque appel de fonction * s'exécute avec son propre this; votre écouteur d'événements est une fonction. Vous pouvez attribuer var that = this; en dehors de l'écouteur d'événements et accédez à that à l'intérieur:

myFunction() {
  var that = this;

  document.getElementById("myElement").addEventListener("click", function() {
    console.log(that._name);
  });
}

Ou créez une nouvelle fonction qui appelle toujours la vôtre avec le même this en utilisant Function.prototype.bind:

myFunction() {
  document.getElementById("myElement").addEventListener("click", function() {
    console.log(this._name);
  }.bind(this));
}

Ou utilisez les fonctions fléchées d'ES6, qui utilisent la valeur de this où elles ont été définies (lexical this):

myFunction() {
  document.getElementById("myElement").addEventListener("click", () => {
    console.log(this._name);
  });
}
8
Ry-