web-dev-qa-db-fra.com

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

J'utilise les cours ES6. Je veux pouvoir faire ceci:

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

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

Où obtenir de la couleur est une fonction exportée. Je veux pouvoir importer une fonction à partir d'un fichier externe et le définir en tant que méthode prototype sur la classe ES6. C'est le genre de syntaxe dont je parle:

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

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

Est-ce faisable?

javascriptclassimportprototypeecmascript-6
25
SheedySheedySheedy

Vous pouvez toujours attacher une méthode sur un prototype classe '; après tout, les classes ne sont que du sucre syntaxique sur un "objet fonctionnel", qui était l'ancienne façon d'utiliser une fonction pour construire des objets.

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

Effort minimal, en utilisant le prototype:

import getColor from 'path/to/module';

class Car {
    ...
}

Car.prototype.getColor = getColor;

Comme vous pouvez le constater, vous utiliserez toujours la propriété prototype pour attacher une méthode, si vous le souhaitez.

Appeler le module dans une méthode de classe:

Si vous ne souhaitez pas utiliser la propriété prototype, vous pouvez toujours demander à votre méthode de renvoyer la fonction depuis le module:

import getColor from 'path/to/module';

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

Utiliser un Getter

Vous pourriez aussi être un peu difficile et utiliser un "getter" pour y parvenir de 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 dans un usage plus sémantique d'un getter:

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

// ...

const color = myInstanceOfCar.color;

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

ES2016 Classe Propriétés

Si vous êtes utilisez Babel pour transpiler } (et que vous êtes à l'aide de propositions expérimentales ), et que vous souhaitez utiliser un certain { ES2016, vous pouvez utiliser la syntaxe suivante) en gardant à l'esprit que cela applique directement la méthode à l'objet et ne la définit pas sur le prototype):

import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}

Liaison facultative avec propriétés de classe

Si vous utilisez la syntaxe abrégée pour définir une propriété, vous n'aurez pas à lier la méthode (définir comme une propriété change ce que "this" fait référence, la liant automatiquement), mais vous pouvez certainement vous choisissez de (comme si vous souhaitez lier autre chose):

getColor = getColor.bind(this);
28
ndugger

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

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

Cependant, cela rend la méthode énumérable, par opposition aux méthodes créées à partir de la syntaxe de classe. Donc, vous voudrez peut-être utiliser Object.defineProperty à la place.

3
Felix Kling

Si cela vous intéresse, j'ai développé un petit module permettant de lier des fonctions avec un grand nombre de paramètres à des méthodes de classe: https://github.com/ngryman/to-method .

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

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

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