Javascript ES6 class definition not accessible in window global

by

To get a reference on the window object, you’ll need to do that explicitly:

window.Foo = class Foo { ... }

Read more about classes not being properties of the window object in this answer, which also quotes the ECMA2015 Specification, Section 8.1.1.4: Global Environment Records:

A global Environment Record is logically a single record but it is specified as a composite encapsulating an object Environment Record and a declarative Environment Record. The object Environment Record has as its base object the global object of the associated Realm. This global object is the value returned by the global Environment Record’s GetThisBinding concrete method. (E.g., the global object referenced by window on browsers — T.J.) The object Environment Record component of a global Environment Record contains the bindings for all built-in globals (clause 18) and all bindings introduced by a FunctionDeclaration, GeneratorDeclaration, or VariableStatement contained in global code. The bindings for all other ECMAScript declarations in global code are contained in the declarative Environment Record component of the global Environment Record.

Using a dedicated object

It would be better not to use the global object for this, and dedicate a specific object to contain your classes and base your event managing library on that object, as illustrated in this simplified snippet:

(function () {
    var classes = {
        Foo: class Foo {
            static pageChange() {
                console.log('The page changed');
            }
        }
    }

    /////////////
    var events = [{
        className: 'Foo',
        fnName: 'pageChange'
    }];
    for(var event of events) {
        classes[event.className][event.fnName].apply();
    }
}());

More Related Contents:

  1. Private properties in JavaScript ES6 classes
  2. ES6 class variable alternatives
  3. ES6 modules: Export single class of static methods OR multiple individual methods
  4. Call static methods from regular ES6 class methods
  5. How to extend a class without having to use super in ES6?
  6. Declaring static constants in ES6 classes?
  7. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  8. ES6 classes : what about instrospection?
  9. “This” within es6 class method [duplicate]
  10. ES6 Dynamic class names
  11. Override a setter, and the getter must also be overridden
  12. Getting a list of statics on an ES6 class
  13. What are getters and setters for in ECMAScript 6 classes?
  14. Why aren’t methods of an object created with class bound to it in ES6?
  15. How to add mixins to ES6 javascript classes?
  16. ES6 – declare a prototype method on a class with an import statement
  17. When should I use a return statement in ES6 arrow functions
  18. “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
  19. Using Node.js require vs. ES6 import/export
  20. Convert a string to a template string
  21. ES6 destructuring function parameter – naming root object
  22. What is “function*” in JavaScript?
  23. Why is let slower than var in a for loop in nodejs?
  24. Why doesn’t instanceof work on instances of Error subclasses under babel-node?
  25. then() callback firing before promise is resolved in node.js [duplicate]
  26. ECMAScript 6: what is WeakSet for?
  27. How can I mock the imports of an ES6 module?
  28. Replace element at specific position in an array without mutating it
  29. Is it possible to export Arrow functions in ES6/7?
  30. ES6 module syntax: is it possible to `export * as Name from …`?

Leave a Comment