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.
The apply() method calls the specified function with a given this value, and arguments provided as an array (or an array-like object).
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.
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.
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.
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:
Use getter:
class SomeView extends BaseView {
get triggerMethod() { return Marionette.triggerMethod }
}
Call Marionette.triggerMethod
from triggerMethod
of SomeView
class:
class SomeView extends BaseView {
triggerMethod() {
Marionette.triggerMethod.apply(this, arguments);
}
}
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
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With