ES6 classes : what about instrospection?

by

In ES5, we could wheck the existence of a class on the window object

Only if the constructor function was a global, which is poor practice.

In ES6, according to this article, globally-declared classes are globals, but not properties of the global object…

Correct. (The same is true of let and const declarations at global scope.) This is defined in §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.

(My emphasis) So the things that used to go on the global object in ES5 and earlier still do (plus generators, because it would have been even more confusing if they didn’t), but the new things (let, const, and class declarations) don’t. They’re globals, but not properties of the global object.

Back to your question…

So if I can’t use if (window.MyClass), is there a way to do the same?

You could use

if (typeof MyClass === "function") {

…since typeof on an unresolvable symbol doesn’t throw a ReferenceError. This also has the advantage of checking whether MyClass is in scope for the code, even if it’s not global.

There’s a gotcha there though: If that code is in the same scope where MyClass is declared via class (or let or const) but it’s above MyClass in that scope, even the typeof check will throw a ReferenceError, because you can’t access the binding it creates at all (not even with typeof) before the class (or let or const).

E.g., this will throw:

if (typeof MyClass === "function") {  // ReferenceError here
    // Yup, it's defined
    // ...
}
// ...
class MyClass {
}

The space from the beginning of the scope to the class, let, or const line is called the temporal dead zone (TDZ) and you can’t access the variable binding at all. Consequently, you have to catch the ReferenceError:

let exists = false;
try {
    exists = typeof MyClass === "function";
} catch (e) {
}

Actually is there a proper way to do this without using window object ?

Until JavaScript modules make it to broad browser support, there are a couple of ways:

  1. Use an Asynchronous Module Definition library of some kind to handle loading your modules. Some examples: RequireJS, SystemJS, CommonJS

  2. Have a single global variable that you’ll use to refer to an object, and make your various application globals properties of that object. Here’s a typical way to do that:

    var MyApp = MyApp || {};
if (!MyApp.ThisModule) {                  // You can leave this `if` out
                                          // if there's no chance of the file
                                          // being loaded more than once
    MyApp.ThisModule = function(module) {
        module.MyClass = class MyClass {
            // ...class definition here...
        }
    }({});
}

This also gives you a handy scope (the anonymous function) in which to put any module-level globals.

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. Javascript ES6 class definition not accessible in window global
  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. What is destructuring assignment and its uses?
  18. Arrow function without curly braces
  19. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  20. How do I destructure all properties into the current scope/closure in ES2015?
  21. How can I mock an ES6 module import using Jest?
  22. Javascript ES6 export const vs export let
  23. How to use javascript proxy for nested objects
  24. How to call another function within the same object?
  25. What is the best general practice to timeout a function in promise [closed]
  26. Wrap long template literal line to multiline without creating a new line in the string
  27. React cannot read property map of undefined
  28. What is the technical definition of a Javascript iterable and how do you test for it?
  29. Re-export default in ES 6 modules
  30. gulp babel, exports is not defined

Leave a Comment