0

I have a class for rendering a custom range slider. Inside the class I need to referrence a method which is triggered on mouse move event. Since I need to remove event listener on mouseup I have to reference it.

The structure of class look like this:

class RangeSlider {
    constructor(..){
        ...
    }
    setRangeValue = () => {
        ...
    }
}

All works fine form me in various browsers but I noticed in error logs that some users get error:

SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list.

I literally have no clue what can be wrong, because in general have no chance to check it out myself as for me in all browsers it works fine. Is there any other way how I can referrence it so I will be able to remove event listener on mouse up?

Igor Mizak
  • 1,088
  • 1
  • 11
  • 19
  • 1
    The syntax you are using is very new, and therefore not supported everywhere (probably won't change much, as e.g. IE won't ever get updated anymore). – ASDFGerte Feb 06 '20 at 04:50
  • That's quite new syntax, so it won't be supported in the majority of browers. – Jonas Wilms Feb 06 '20 at 04:50
  • Does this answer your question? [How to use arrow functions (public class fields) as class methods?](https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods) – Johnny Zabala Feb 06 '20 at 04:52

1 Answers1

2

TL;DR

class RangeSlider {
    constructor(..){
        ...
    }
    setRangeValue {
        ...
    }
}

What you can do right now

  1. Declare it as:
class Foo {
  someFunction () {
    ...
  }
}
  1. use prototype inheritance.
class Foo {
 ...
}
Foo.prototype.bar = function () {
  ...
}

Explanation

class Foo {
  bar = () => {}
}

The code snippet above creates a variable called bar in the class Foo, whose value is an anonymous function.

Right now, you can not declare variables within a class, ie the following code is not allowed.

class Foo {
  bar = 'baz'
}

It is in Stage 3 of TC39 proposal as of January 23, 2020. If you have to use it, you can use it with babel's plugin @babel/plugin-proposal-class-properties.

acagastya
  • 323
  • 2
  • 14