Question

由于范围/提升/加载顺序，我遇到了问题。在下文中，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
}

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"），如果这样做，它会尝试使用某个CommonJS样式的模块加载器加载'auth0-lock'模块。

有两个大问题：

如果它也打算在nodejs端运行，那么模块将抛出TypeError: Auth0Lock未在第11行定义，因为它没有被定义为真实。

如果它在浏览器中运行，它仍然会抛出一个TypeError，因为let关键字是块作用域的，所以在第11行它仍未定义。

适用于ES6类和模块系统的范围

2 个答案: