Question

为什么es6不允许这样？我知道该消息只在alert模块中定义，并且在基本模块中未定义，但我（显然是错误的）想象由于alert类可以访问它，所有类都应该......想法？

//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

Base类及其方法无法访问component模块中的任何变量，该变量具有自己的范围。如果它将导入模块，则可以访问导出的值，但不能访问本地message变量。

我想你会想在这里使用类的静态属性，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.…的工作原理。}

Answer 2

这不起作用，因为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来说并不新鲜，总是如此。

es6变量范围，具有扩展类和模块

2 个答案: