如何在Firefox中使用javascript类？

Question

How do I code classes in Javascript that will work in Firefox? I am building a media storage website as a project, and, as part of the project, I have created a class that will hold media elements. The resulting class definition code works fine in Chrome but will not work in Firefox, where it triggers a "class is a reserved identifier" warning. Some googling confirmed that this is because firefox does not support classes.

How do I fix this? I'm guessing there's some workaround and the answer is not to just employ class-less code for Firefox.

Apologies (but also, thank you!) in advance, for what's probably a simple question. I am a new programmer.

Here's the code for the class if helpful:

class MediaElement {
    constructor(DemographicCategory,GenderCategory,Name,Link,Images,Blurbs,TypeofMedia,Summary,Rating){
        this.Name = Name;
        this.Link = Link;
        this.Image = Images;
        this.Blurbs = Blurbs;
        this.Summary = Summary;
        this.Rating = Rating;
    }
}

Answer 1

Browsers are just catching up with ES6 syntax. I think Firefox version 45 started to support the class syntax.

If you want your ES6 code to run on old browsers as well, you have to convert the code into ES5 - called transpiling - using babeljs or Google traceur. Then use it in the front end.

Answer 2

You can use Babel REPL to see how it would transpile to es5 code (specification full supported by firefox) and use that code on your app, but I highly recommend you to use some transpiler on your code as said by kra3 . Babel and google Traceur do a really great work on it

This is how your class will look after the transpilation

 "use strict"; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var MediaElement = function MediaElement(DemographicCategory, GenderCategory, Name, Link, Images, Blurbs, TypeofMedia, Summary, Rating) { _classCallCheck(this, MediaElement); this.Name = Name; this.Link = Link; this.Image = Images; this.Blurbs = Blurbs; this.Summary = Summary; this.Rating = Rating; };