具有扩展 class 和模块的 es6 变量范围

Question

为什么 es6 不允许这样做？我知道 message 只在 alert 模块中定义，而在 base 模块中未定义，但我（显然错误地）想象既然 alert class 可以访问它，那么所有 class 都应该。 .. 想法？

//file component.js
import Base from './base';
const message = "hello";
class Alert extends Base {
    initialize() {
        this.render();
    }
}
export default Alert;

和

//file base.js
class Base {
    render() {
        alert(message);
    }
}
export default Base;

Answer 1

这不起作用，因为 JavaScript 有 lexical scope，不是动态范围。

词法作用域是指变量是否可访问取决于它们在源文本中出现的位置，它不取决于运行时信息。

简化示例：

function foo() {
  var bar = 42;
  baz();
}

function baz() {
  console.log(bar); // error because bar is not in the scope of baz
}

注意：这对类或 ES6 来说不是新的，一直都是这样。

Answer 2

Base class 及其方法无法访问 component 模块中的任何变量，后者有自己的作用域。如果导入模块，它可以获得对导出值的访问权限，但不能访问本地 message 变量。

我想你会想在这里使用 class 的静态属性，Base 方法在 Alert 实例上调用时可以访问这些属性：

import Base from './base';
export default class Alert extends Base {
    initialize() {
        this.render();
    }
}
Alert.message = "hello"; // not constant, though; you'd need to use
                         // Object.defineProperty(Alert, "message", {value: …} for that

export default class Base {
    render() {
        alert(this.constructor.message);
    }
}
Base.message = "";

_{另请参阅 es6 call static methods 以了解 this.constructor.… 的工作原理。}

具有扩展 class 和模块的 es6 变量范围

es6 variable scope with extended class and modules

javascript

class

ecmascript-6

node-modules