javascript - ES6: Applying function as class method

Question

I'm migrating a project from CoffeeScript to ES6 (using 6to5 and Browserify), and am running into possibly a limitation or maybe I just don't know the proper syntax. In CoffeeScript I could do this:

class SomeView extends BaseView
    triggerMethod: Marionette.triggerMethod

How do I express this in ES6 classes? I tried a couple of things, but it throws Unexpected token errors no matter what I try. This for example:

let { triggerMethod } = Marionette;

class SomeView extends BaseView {
    triggerMethod, // doesn't work
    triggerMethod: Marionette.triggerMethod // doesn't work
}

Now I can achieve this by setting it in the constructor (this.triggerMethod = Marionette.triggerMethod), but it feels a bit ugly to me (just a preference in coding style I guess). Any help would be appreciated.

Answer 1

You can't declare properties in ES6 classes, only methods and static methods (see here for syntax of class declaration, pay attention to ClassElement). So any of the following examples will be wrong:

class A {
    method1: B.someMethod  // wrong!
    method2: function() {} // wrong!
    method3: () => {}      // wrong!
}

You have several variants to handle your problem:

1. Use getter:

   class SomeView extends BaseView {
       get triggerMethod() { return Marionette.triggerMethod }
   }
   

2. Call Marionette.triggerMethod from triggerMethod of SomeView class:

   class SomeView extends BaseView {
       triggerMethod() { 
           Marionette.triggerMethod.apply(this, arguments);
       }
   }
   

3. Add triggerMethod to the prototype of SomeView after class declaration:

   class SomeView extends BaseView {
       //.. some class declaration
   }
   SomeView.prototype.triggerMethod = Marionette.triggerMethod;
   

   or with Object.assign:

   class SomeView extends BaseView {
       //.. some class declaration
   }
   
   Object.assign(SomeView.prototype, {
     triggerMethod: Marionette.triggerMethod
     // ... some another methods
   });
   

4. What you already did - add Marionette.triggerMethod to the this. But you must be aware that in that case triggerMethod will be kept in the object itself, not in its prototype. Example:

   class SomeView extends BaseView {
       constructor() {
         this.triggerMethod =  Marionette.triggerMethod
         // ...
       }
   }
   

That's all you can do. I think the first and second variants are the best choices for your case, but it's a matter of taste.