J'essaie de déterminer s'il y a une différence lors de la définition de fonctions à l'intérieur ou à l'extérieur d'une classe en JavaScript. Pourquoi choisirais-je de le faire dans un sens plutôt que dans l'autre ? (Remarquez mon getName [à l'intérieur de la classe] et getName2 [à l'extérieur de la classe]).

class TestClass {
    constructor(myName) {
        this.name = myName;
    }

    getName() {
        return this.name;
    }
}

TestClass.getName2 = function() {
    //won't actually print the name variable set since not associated with an instance of the class?
    console.log(this.name);
};

var test = new TestClass("Joe");

console.log(test.getName());

///////////////

TestClass.getName2();

Production:

Joe
TestClass

La seule différence que je peux vraiment voir jusqu'à présent dans mes tests ici est que je ne peux pas accéder à this.name dans mon getName2 car je pense qu'il n'est associé à aucune instance de TestClass. Donc mon getName2 est presque comme une fonction de classe statique où il n'est pas associé à une instance de la classe ?? S'il vous plaît, aidez-moi à clarifier cela et pourquoi je choisirais d'implémenter une fonction dans un sens plutôt que dans l'autre.

12
Birdman 17 mars 2019 à 08:19

2 réponses

Meilleure réponse

À partir de la doc MDN :

Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement du sucre syntaxique par rapport à l'héritage existant basé sur des prototypes de JavaScript. La syntaxe de classe n'introduit pas de nouveau modèle d'héritage orienté objet dans JavaScript.

Donc ça...

class TestClass {
  constructor(myName) {
    this.name = myName;
  }

  getName() {
    return this.name;
  }

  static getName2() {
    return 'getName2 result';
  }
}

...est exactement équivalent à ceci :

const TestClass = function(myName) {
  this.name = myName;
}

TestClass.prototype.getName = function() {
  return this.name;
}

TestClass.getName2 = function() {
  return 'getName2 result';
}

Donc, que vous utilisiez l'ancienne syntaxe de prototype ou la nouvelle syntaxe ES6 class n'est qu'une question de préférence personnelle, et comme vous vous en doutez, définir des méthodes directement sur un class équivaut exactement à créer un static méthode de classe.

12
Brian Adams 17 mars 2019 à 06:44

Je ne pense pas qu'il y ait une raison pour laquelle tu le ferais un jour

TestClass.getName2 = function() {

Si vous voulez une fonction autonome, faites-en une fonction autonome.

Par exemple.

export function getName2() {...};
export TestClass;

Si vous souhaitez étendre une classe existante, vous feriez

TestClass.prototype.getName2 = function() {

Qui vous permettra d'y accéder.

0
jeznag 17 mars 2019 à 05:37