es6 переменная область с расширенным классом и модулями

Question

Почему es6 не разрешает это? Я понимаю, что сообщение определено только в модуле оповещений и не определено в базовом модуле, но я (видимо, ошибочно) предполагаю, что, поскольку класс предупреждения имеет к нему доступ, весь класс должен ... Мысли?

//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 и его методы не имеют доступа ни к одной из переменных в модуле 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.… работает.}