ES6 - déclarer une méthode de prototype sur une classe avec une instruction import

Je suis en utilisant ES6 classes. Je veux être capable de faire cela:

function Car(color) {
  this.color = color;
};

Car.prototype.getColor = require('./getColor');

Où obtenir la couleur est une fonction exportée. c'est à dire je veux être en mesure d'importer une fonction à partir de l'extérieur par un fichier et l'ensemble est comme un prototype de la méthode sur l'ES6 Classe. C'est le genre de syntaxe, je suis en train de parler:

class Car {
  constructor(color) {
    this.color = color;
  }

  getColor() {} //I want to import this function from './getColor', as above
}

Est-ce faisable?

InformationsquelleAutor SheedySheedySheedy | 2015-09-21
  1. 32

    Vous pouvez toujours joindre une méthode sur un classe' prototype; après tout, les classes ne sont qu'sucre syntaxique sur un "objet fonctionnel", qui est l'ancienne manière d'utiliser une fonction pour construire des objets.

    Puisque vous souhaitez utiliser ES6, je vais utiliser une ES6 importation.

    Un minimum d'effort, en utilisant le prototype:

    import getColor from 'path/to/module';

class Car {
    ...
}

Car.prototype.getColor = getColor;

    Comme vous pouvez le voir, vous utilisez toujours la propriété prototype de joindre une méthode, devrait vous choisissez d'.

    D'appeler le module à l'intérieur d'une méthode de la classe de:

    Alternativement, si vous ne voulez pas utiliser le prototype de la propriété, vous pouvez toujours avoir votre méthode de retour de la fonction à partir du module:

    import getColor from 'path/to/module';

class Car {
    getColor () {
        return getColor.call(this);
    }
}

    À l'aide d'un Getter

    Vous pourriez aussi être un peu délicate, et l'utilisation d'un "getter" afin d'y parvenir d'une manière différente.

    import getColor from 'path/to/module';

class Car {
    get getColor () { return getColor.bind(this) }
}

    Vous pouvez ensuite l'utiliser simplement en appelant, myInstanceOfCar.getColor()

    Ou lors d'une sémantique de l'utilisation d'un getter:

    class Car {
    get color () { return getColor.call(this) }
}

//...

const color = myInstanceOfCar.color;

    Garder à l'esprit que les getters/setters ne peut pas avoir le même nom que les propriétés que vous définissez dans le constructeur. Vous allez vous retrouver dépasser la durée maximale de la pile des appels avec une récursion infinie lorsque vous essayez d'utiliser le setter pour définir la même propriété. Exemple: set foo (value) { this.foo = value }

    ES2016 des Propriétés de la Classe

    Si vous êtes à l'aide de Babel à transpile (et sont à l'aide de propositions expérimentales), et que vous voulez utiliser certains ES2016, vous pouvez utiliser la syntaxe suivante (mais gardez à l'esprit que cela s'applique la méthode à l'objet directement, et ne le placez pas sur le prototype):

    import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}

    De fixation en option w/propriétés de la classe

    Si vous utilisez le raccourci syntaxe pour définir une propriété, vous n'aurez pas à lier la méthode (le réglage est comme la modification d'une propriété de quoi "ce" désigne, essentiellement automatiquement la liaison), mais vous pouvez certainement, si vous choisissez de vous (si vous le souhaitez lier à autre chose):

    getColor = getColor.bind(this);
    • Non, vous n'avez pas besoin de lier la fonction. C'est encore l'invocation de la méthode qui définit this.
    • Il semble que vous avez raison. Je vais modifier.
    • Pour tous ceux qui se heurte à des problèmes de liaison avec l'ajout du prototype, ceux-ci doivent être régulièrement function déclarations. Ce qui signifie que vous ne peut pas être importés à l'aide de la flèche fonctions.
    • C'est pour cette raison que je crois personnellement que les flèches doivent être réservés pour les rappels, où le lexique de liaison fait réellement sens. Autonome function déclarations doivent être utilisés partout ailleurs (mais c'est juste ma préférence personnelle)
    InformationsquelleAutor ndugger
  2. 3

    Oui. Le class syntaxe est juste (très sophistiqué) sucre syntaxique pour les fonctions constructeur. Donc Car sera toujours une fonction avec une prototype propriété et vous pouvez faire exactement la même chose:

    import getColor from './getColor';
//...
Car.prototype.getColor = getColor;

    Cependant, qui rend la méthode énumérable, par opposition aux méthodes créé à partir de la classe de la syntaxe. Vous pouvez donc les utiliser Object.defineProperty à la place.

    • Merci pour votre réponse. Je comprends que je peux le faire. J'ai probablement n'est pas claire à partir de la question que je tiens à maintenir la nouvelle syntaxe pour les importations dans l'ES6, et aussi l'ES6 classes manière de déclarer une méthode de prototype (comme ci-dessus). Est-ce possible?
    • FWIW, je n'ai utilisé que require ici pour des raisons de simplicité. Rien ne vous empêche d'utiliser import pour obtenir de la valeur. Comme pour la classe de syntaxe, non, ES6 ne fournit pas un moyen de le faire (à l'exception des solutions de contournement que délégué à la fonction, comme indiqué dans la réponse). Il y a un ES7 stade 0 proposition pour la classe de propriétés, où vous pouvez écrire class Foo { getColor = require('./getColor'); }, mais encore une fois, il n'y a rien de tel dans l'ES6.
    • Si vous souhaitez un ES6 l'importation, voir ma réponse. Les importations sont hissés, alors vous devez les déclarer à la très haut.
    • Je me demande, pourquoi alors les méthodes statiques. N'est-il pas leur but de superset le prototype (ne fonctionne pas sur l'instance) méthodes hm...
    • cette solution ne fonctionne pas à réagir s'il vous plaît examiner cette stackoverflow.com/questions/40603632/...
    InformationsquelleAutor Felix Kling
  3. 0

    Si vous êtes intéressé, j'ai développé un petit module pour lier des fonctions avec un divers nombre de paramètres pour les méthodes de la classe: https://github.com/ngryman/to-method.

    const toMethod = require('to-method');

function Car(color) {
  this.color = color;
}

toMethod(Cat, { getColor: require('./getColor') });
    InformationsquelleAutor ngryman