Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6: Applying function as class method

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.

like image 897
Steven Avatar asked Jan 28 '15 10:01

Steven


People also ask

What does apply () do in JS?

The apply() method calls the specified function with a given this value, and arguments provided as an array (or an array-like object).

What is the difference between using call () and apply () to invoke a function with multiple arguments?

The Difference Between call() and apply() The difference is: The call() method takes arguments separately. The apply() method takes arguments as an array. The apply() method is very handy if you want to use an array instead of an argument list.

How do you call a class function in JavaScript?

The call() allows for a function/method belonging to one object to be assigned and called for a different object. call() provides a new value of this to the function/method. With call() , you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

Does JavaScript support class like inheritance?

JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not have static types. When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its prototype.


1 Answers

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.

like image 180
alexpods Avatar answered Oct 11 '22 12:10

alexpods