Les Variables d'Instance dans les Classes Javascript

Plupart du temps, je code en PHP et Java, mais je vais parfois à travailler sur l'extrémité avant d'un projet et l'utilisation de JavaScript. J'ai l'habitude de créer des objets différemment ci-dessous, mais je suis tombé sur cela et il a attiré mon intérêt étant que la syntaxe est similaire à ce que j'ai l'habitude de programme.

J'ai été fouiller, essayer 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 l'ensemble de ces variables et l'ajout de = null;, mais encore des messages d'erreurs dans ma console. Les erreurs sont principalement my-file.js:2 Uncaught SyntaxError: Unexpected identifier. Je suis juste essayer de mettre ma variable d'instance, par le biais de mon constructeur.

Comment puis-je 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);
}
Utiliser le this mot-clé : this._name = name;
Vous n'avez pas à déclarer les propriétés; il suffit de définir this._name = name;.
Comment puis je accéder à la variable d'instance dans mon écouteur d'événement? this._name seulement les rendements undefined.

OriginalL'auteur aCarella | 2016-11-17

  1. 11

    C'est encore un proposition et il se présenterait comme suit:

    class A {
   property = "value";
}

    BTW, quand vous voulez accéder à une propriété de classe (c'est à dire une propriété de l'objet), vous aurez toujours besoin d'utiliser this.property:

    class A {
    property = "value";

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

    Si vous souhaitez utiliser cette syntaxe aujourd'hui, vous aurez besoin d'utiliser un transpiler comme Babel.

    OriginalL'auteur Matías Fidemraizer

  2. 6

    Vous ne déclarez pas les 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énement? this._name seulement les rendements undefined.

    Chaque appel de fonction* fonctionne avec ses propres this; votre écouteur d'événement est une fonction. Vous pouvez affecter var that = this; à l'extérieur de l'écouteur d'événement et l'accès that à l'intérieur:

    myFunction() {
  var that = this;

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

    Ou de créer une nouvelle fonction qui appelle toujours la vôtre avec le même this à l'aide de Function.prototype.bind:

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

    Ou de l'utilisation ES6, la flèche de fonctions, qui utilisent la valeur de this où ils ont été définis (lexicale this):

    myFunction() {
  document.getElementById("myElement").addEventListener("click", () => {
    console.log(this._name);
  });
}
    Super utile. Merci pour l'explication.

    OriginalL'auteur Ry-