ES6 – declare a prototype method on a class with an import statement

by

You can still attach a method on a class‘ prototype; after-all, classes are just syntactic sugar over a “functional object”, which is the old way of using a function to construct objects.

Since you want to use ES6, I’ll use an ES6 import.

Minimal effort, using the prototype:

import getColor from 'path/to/module';

class Car {
    ...
}

Car.prototype.getColor = getColor;

As you can see, you still use the prototype property to attach a method, should you choose to.

Calling the module within a class’ method:

Alternatively, if you don’t want to use the prototype property, you can always have your method return the function from the module:

import getColor from 'path/to/module';

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

Using a Getter

You could also be a bit tricky and use a “getter” to achieve this in a different manner.

import getColor from 'path/to/module';

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

You could then use it simply by calling, myInstanceOfCar.getColor()

Or in a more semantic usage of a getter:

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

// ...

const color = myInstanceOfCar.color;

Keep in mind that getters/setters cannot have the same name as properties that you set in the constructor. You will end up exceeding the maximum call-stack with infinite recursion when you try to use the setter to set that same property. Example: set foo (value) { this.foo = value }

ES2016 Class Properties

If you’re using Babel to transpile (and are using experimental proposals), and want to use some ES2016, you can use the following syntax (but keep in mind that this applies the method to the object directly, and does not set it on the prototype):

import getColor from 'path/to/module';

class Car {
    getColor = getColor;
}

Optional binding w/ class properties

If you use the shorthand syntax for setting a property, you won’t have to bind the method (setting is as a property changes what “this” refers to, essentially automatically binding it), but you certainly can, should you choose to (like if you’d like to bind something else):

getColor = getColor.bind(this);

More Related Contents:

  1. When should I use curly braces for ES6 import?
  2. Private properties in JavaScript ES6 classes
  3. Javascript object members that are prototyped as arrays become shared by all class instances
  4. ES6 class variable alternatives
  5. ES6 modules: Export single class of static methods OR multiple individual methods
  6. Call static methods from regular ES6 class methods
  7. How to extend a class without having to use super in ES6?
  8. ES6 arrow functions not working on the prototype?
  9. Declaring static constants in ES6 classes?
  10. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  11. ES6 classes : what about instrospection?
  12. Javascript ES6 class definition not accessible in window global
  13. How to use code from script with type=module [duplicate]
  14. “This” within es6 class method [duplicate]
  15. ES6 Dynamic class names
  16. es6 import for side effects meaning
  17. Override a setter, and the getter must also be overridden
  18. Getting a list of statics on an ES6 class
  19. Web Workers – How To Import Modules
  20. What are getters and setters for in ECMAScript 6 classes?
  21. Importing javascript file for use within vue component
  22. Why aren’t methods of an object created with class bound to it in ES6?
  23. ‘this’ is undefined in JavaScript class methods
  24. How to add mixins to ES6 javascript classes?
  25. Create object from class name in JavasScript ECMAScript 6
  26. React Native: require() with Dynamic String?
  27. Destructuring and rename property
  28. How do I persist a ES6 Map in localstorage (or elsewhere)?
  29. How to test if an object is a Proxy?
  30. Chrome console already declared variables throw undefined reference errors for let

Leave a Comment