ES6 classes have inner names

[2016-01-09] dev, javascript, esnext
(Ad, please don’t block)

This blog post explains that classes have lexical inner names, just like named function expressions.

The inner names of function expressions  

You may know that function expressions have lexical inner names:

const fac = function me(n) {
    if (n > 0) {
        // Use inner name `me` to
        // refer to function
        return n * me(n-1);
    } else {
        return 1;
    }
};
console.log(fac(3)); // 6

The name me of the named function expression becomes a lexically bound variable that is unaffected by which variable currently holds the function.

The inner names of classes  

Interestingly, ES6 classes also have lexical inner names that you can use in methods (constructor methods and regular methods):

class C {
    constructor() {
        // Use inner name C to refer to class
        console.log(`constructor: ${C.prop}`);
    }
    logProp() {
        // Use inner name C to refer to class
        console.log(`logProp: ${C.prop}`);
    }
}
C.prop = 'Hi!';

const D = C;
C = null;

// C is not a class, anymore:
new C().logProp();
    // TypeError: C is not a function

// But inside the class, the identifier C
// still works
new D().logProp();
    // constructor: Hi!
    // logProp: Hi!

(In the ES6 spec the inner name is set up by the dynamic semantics of ClassDefinitionEvaluation.)

Acknowledgement: Thanks to Michael Ficarra for pointing out that classes have inner names.


Most popular (last 30 days)

Loading...