ES6：访问从 Mixin 创建的类中的静态成员变量

Question

我根据 MDN 的官方示例创建了一个 class(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

这是我的代码

class A {
}

const Mixer = BaseClass => class extends BaseClass {
    static val = 10;
}

class B extends Mixer(A) {
    myMethod() {
    // Need some way to access the static member "val"
    }
}

如何访问 "val"？

如果没有 mixin（即 class B 扩展 A，并且 val 在 class A 中是静态的）我可以做到 "A.val".

在这种情况下，Mixer.val 不起作用，根据我的理解，B 从匿名 class 扩展而来，因此无法通过名称访问超级 class。

编辑：我问错了。我真正的问题是在 Mixer 本身中访问 val。正如我的答案所指出的那样，在 B 中访问 val 非常简单。

例如

const Mixer = BaseClass => class extends BaseClass {
    static val = 10;
    myMethod2() {
        // log the val member
    }
}

Answer 1

那是因为class字段是not yet in the ECMAScript standard. Your code works perfectly fine if you compile it with BabelJS然后粘贴到浏览器控制台。

class B extends Mixer(A) {
    myMethod() {
        console.log(B.val); // logs 10
    }
}

如果您需要使用 ES2015，一个快速的技巧是使用 setter 和 getter。

class A {
}

var val = 10;
const Mixer = BaseClass => class extends BaseClass {
    static get val() {
      return val;
    }

    static set val(newVal) {
      val = newVal;
    }
}

class B extends Mixer(A) {
    myMethod() {
    // Need some way to access the static member "val"
    }
}

// Use it
B.val; // 10
B.val = 15;
B.val; // 15

Answer 2

es6 不支持 static attribute，我不知道 babel 对 static val 做了什么，但事实是你测试的不是基于 es6 规范。所以你可以使用 static function 来做测试

Answer 3

这已经在 SO 上讨论过无数次，但是这个案例可能需要一些解释。通常，可以通过 this.constructor:

从实例方法访问静态属性和方法

class B extends Mixer(A) {
    myMethod() {
      console.log(this.constructor.val);
    }
}

其中 this.constructor === B，但这在继承自 B 的 class 中并非如此。

没有理由在B中直接引用父匿名class，因为val是通过原型链继承自它的。这就是class继承的目的。

ES6：访问从 Mixin 创建的类中的静态成员变量

ES6: Accessing static member variables in classes created from Mixin

javascript

ecmascript-6

ecmascript-next

es6-class

ES6：访问从 Mixin 创建的 类 中的静态成员变量

ES6: Accessing static member variables in classes created from Mixin

javascript

ecmascript-6

ecmascript-next

es6-class

ES6：访问从 Mixin 创建的类中的静态成员变量