ES6导出默认,具有相互引用的多个功能

Question

在es6中你可以定义一个像这样的函数模块

export default {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { foo(); bar() }
}

上面似乎是有效的代码,但如果我调用baz()它会抛出一个错误:

ReferenceError: foo is not defined

你如何foo从另一个功能打电话？在这种情况下baz

编辑

这是实际不起作用的代码.我已经简化了代码,所以它只是需要的核心

const tokenManager =  {
  revokeToken(headers) { 
    ... 
  },
  expireToken(headers) {
    ...
  },
  verifyToken(req, res, next) {
    jwt.verify(... => {
      if (err) {
        expireToken(req.headers)
      }
    })
  }
}

export default tokenManager 

而错误是

expireToken(req.headers);
        ^
ReferenceError: expireToken is not defined

编辑2

我只是想加入tokenManager之前expireToken最后和它的工作原理

Answer 1

该export default {...}建筑是只是像这样的快捷方式:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { foo(); bar() }
}

export default funcs

现在必须显而易见的是foo,模块范围内没有bar或没有baz功能.但是有一个名为funcs(虽然实际上它没有名称)的对象包含这些函数作为其属性,它将成为模块的默认导出.

因此,要修复代码,请在不使用快捷方式的情况下重新编写代码,foo并将其bar作为以下属性引用funcs:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { funcs.foo(); funcs.bar() } // here is the fix
}

export default funcs

另一种选择是使用this关键字来引用funcs对象,而不必像@pawel所指出的那样明确地声明它.

另一个选项(以及我通常喜欢的选项)是在模块范围内声明这些函数.这允许直接引用它们:

function foo() { console.log('foo') }
function bar() { console.log('bar') }
function baz() { foo(); bar() }

export default {foo, bar, baz}

如果您想要默认导出的便利性和单独导入项目的能力,您还可以单独导出所有功能:

// util.js

export function foo() { console.log('foo') }
export function bar() { console.log('bar') }
export function baz() { foo(); bar() }

export default {foo, bar, baz}

// a.js, using default export

import util from './util'
util.foo()

// b.js, using named exports

import {bar} from './util'
bar()

或者,正如@loganfsmyth建议的那样,您可以不使用默认导出,只需使用import * as util from './util'在一个对象中获取所有命名导出.

Answer 2

另一种方法是更改​​模块.通常,如果要导出一个带有大量函数的对象,则导出一堆命名函数会更容易,例如

export function foo() { console.log('foo') }, 
export function bar() { console.log('bar') },
export function baz() { foo(); bar() }

在这种情况下,您将使用名称导出所有函数,因此您可以这样做

import * as fns from './foo';

获取具有每个函数属性的对象,而不是您用于第一个示例的导入:

import fns from './foo';

Answer 3

TL;博士: baz() { this.foo(); this.bar() }

在ES2015中,这个结构:

var obj = {
    foo() { console.log('foo') }
}

等于这个ES5代码:

var obj = {
    foo : function foo() { console.log('foo') }
}

exports.default = {} 就像创建一个对象一样,您的默认导出转换为ES5代码,如下所示:

exports['default'] = {
    foo: function foo() {
        console.log('foo');
    },
    bar: function bar() {
        console.log('bar');
    },
    baz: function baz() {
        foo();bar();
    }
};

现在很明显(我希望)baz试图在外部范围内调用foo和bar定义,这是未定义的.但this.foo与this.bar将解决中定义的键exports['default']对象.因此,引用其自己的方法的默认导出如下所示:

export default {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { this.foo(); this.bar() }
}

请参阅babel repl transiled code.