ES6 导出默认,多个函数相互引用

IT技术 javascript ecmascript-6
2021-03-19 12:01:46

在 es6 中,您可以定义这样的功能module

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,它终于起作用了

3个回答

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

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

export default funcs

现在很明显,module的作用域中没有foo,barbaz函数。但是有一个命名的对象funcs(尽管实际上它没有名称)包含这些函数作为其属性,并将成为module的默认导出。

因此,要修复您的代码,请在不使用快捷方式的情况下重新编写它,并引用foobar作为以下属性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 指出的那样

另一种选择(也是我通常更喜欢的选择)是在module范围内声明这些函数。这允许直接引用它们:

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'在一个对象中获取所有命名导出。

@chrs,请在您的问题下查看我的评论。您需要替换expireTokentokenManager.expireToken.
2021-04-27 12:01:46
@chrs 我快了一分钟 ;) 但我不介意,我喜欢这里的最后一个建议 ( export default { foo, bar, baz }) 并且可能会自己使用它。
2021-05-03 12:01:46
如果您想要默认导出的便利性和单独导入项目的能力” - 那么您不应该将对象文字重新导出为默认值,而只需编写import * as util from './util'. 这正是命名空间导入的目的。
2021-05-08 12:01:46
我试过这个,但无法让它工作。我用真实的代码编辑了这个问题。你能看出这里出了什么问题吗?
2021-05-14 12:01:46

一种替代方法是更改​​您的module。通常,如果您要导出带有一堆函数的对象,则导出一堆命名函数会更容易,例如

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';
这绝对是最好的解决方案。使用命名导出而不是默认对象。
2021-05-09 12:01:46

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尝试在未定义的外部范围内的某个地方调用foobar定义。但是this.fooandthis.bar将解析为exports['default']object 中定义的键因此,引用其自己的方法的默认导出看起来像这样:

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

请参阅babel repl 转译代码

当我像你上一个例子那样做的时候,我仍然得到TypeError: Cannot read property 'foo' of undefined- 我错过了什么?
2021-05-03 12:01:46