ES6 类和模块系统的作用域

Question

由于 scope/hoisting/load 订单，我遇到了问题。在下文中，Auth0Lock 是在第 6 行的 if 块内定义的，但不是立即在它的外部，也不是在 class 内。有谁知道为什么吗？？

import { EventEmitter } from 'events';
import { isTokenExpired } from './jwtHelper';

console.log('in');
const isClient = typeof window !== 'undefined';
if (isClient) {
  let Auth0Lock = require('auth0-lock').default;
  console.log('isClient');
  console.log('Auth0Lock inner', Auth0Lock);
}
  console.log('Auth0Lock outer', Auth0Lock);
export default class AuthService extends EventEmitter {
  constructor(clientId, domain) {
    super();
    console.log('happening');
    if (!isClient) {
      console.log('returning');
      return false;
    }
    // Configure Auth0
    this.lock = new Auth0Lock(clientId, domain, {});
    // Add callback for lock `authenticated` event
    this.lock.on('authenticated', this._doAuthentication.bind(this));
    // Add callback for lock `authorization_error` event
    this.lock.on('authorization_error', this._authorizationError.bind(this));
    // binds login functions to keep this context
    this.login = this.login.bind(this);
  }

 // curtailed
}

Answer 1

let 关键字是块范围的：https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/let

let x = "hey";
{ let x= "hi"; }

外部 let x 没有被覆盖，因为它在它自己的范围内。回来回答你的问题。您的 let Auth0Lock 仅存在于 if 块中。

Answer 2

该代码尝试确定它是否运行在浏览器中（typeof window === "object" 在浏览器中），如果是，它会尝试加载 'auth0-lock' 模块使用一些 CommonJS 风格的模块加载器。

这有两个大问题：

如果它也打算运行在 nodejs 端，模块将抛出一个 TypeError: Auth0Lock is not defined on the line 11，因为它没有真正定义。

如果在浏览器中是运行ning，还是会抛出TypeError，因为let关键字是块作用域的，所以在第11行还是没有定义。

ES6 类和模块系统的作用域

Scope with ES6 classes and module system

ecmascript-6

reactjs

es6-module-loader

ES6 类 和模块系统的作用域

Scope with ES6 classes and module system

ecmascript-6

reactjs

es6-module-loader

ES6 类和模块系统的作用域