具有 ES6 类和模块系统的范围答案

【问题标题】：Scope with ES6 classes and module system具有 ES6 类和模块系统的范围
【发布时间】：2016-08-23 15:51:32
【问题描述】：

由于范围/提升/加载顺序，我遇到了问题。在下文中，Auth0Lock 是在第 6 行的 if 块内定义的，但不是直接在它之外，也不是在类内。有谁知道为什么？？

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
}

【问题讨论】：

因为写它的人没有写出有效的javascript代码。试着问他。
@TamasHegedus 啊！你也见过锁上的那个虫子！对了，对不起，我以为你在说我！ :D
是的，他的代码确实有效。如果您将 var 更改为 let 它的块范围为 if 大括号...

标签： reactjs ecmascript-6 es6-module-loader

【解决方案1】：

let 关键字是块作用域：https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/let

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

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

【讨论】：

【解决方案2】：

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

这样做有两个大问题：

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

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

【讨论】：