ES6解构语法可能出现的奇怪行为[重复]答案

【问题标题】：Possible strange behaviour with ES6 deconstruction syntax [duplicate]ES6解构语法可能出现的奇怪行为[重复]
【发布时间】：2017-04-03 04:46:16
【问题描述】：

我已经使用解构语法{ ...variable } 有一段时间了，但直到今天我才真正遇到过它，而我的大多数用例仍然按预期工作，这有点令人困惑我。

我有一个生成对象并将其导出的 JS 文件，例如：

var exports = {} 
...
export default exports;

没有任何嵌套对象，文件末尾是一个简单的 KVP。

当试图从这个文件导入时，我试图通过解构得到的任何对象都是未定义的。例如：

import { Foo, Bar } from './my-object';
Foo.bar(); // Cannot read property bar of undefined

但是，如果我像这样进一步分解它，一切都很好：

import MyObject from './my-object';
const { Foo, Bar } = MyObject;
Foo.bar(); // Works!

我尝试将 exports 更改为我想的不同的变量名，只是可能与 module.exports 冲突，但这不是问题。

过去每当我导出一个对象时都很简单：

 export default { ... }

我真的很困惑这次可能是什么问题，因为console.log(exports) 的结果是一样的：

{ Foo: foo, Bar: bar }

其中bar()是foo的函数变量

我还应该补充一点，试图破解它以获得正确的结果也不起作用，例如：

export default {
    Foo: { bar: () => {} },
    Bar: { foo: () => {} }
};

仍然抛出相同的Cannot read property __ of undefined

【问题讨论】：

标签： javascript ecmascript-6

【解决方案1】：

如果你使用的是 Babel，那是因为export default 语句大致翻译为：

var foo = {};
exports["default"] = foo;

而import MyObject from './my-object' 被翻译成：var MyObject = require('./my-object').default;。这就是您的第二个示例有效的原因。

但是，当你在做import { Foo, Bar } from './my-object'时，它会被翻译成var { Foo, Bar } = require('./my-object');

See this question for extra details.

在您的情况下，我建议只使用正常的导出语句。例如：

export class Foo {
  myMethod() {}
};

export const Bar = { a: '1' };

那你就可以import { Foo, Bar } from './my-object';了。

【讨论】：

很好的答案，很好的例子而且非常简洁！

【解决方案2】：

我认为你只是错过了基本概念。

在这种情况下，您导出的是单个对象而不是多个类，这就是为什么您的导入无法正常工作的原因。

当我们有一个文件说 sample.js 和

时语法有效

export var A = (function () {
    function A() {
    }
    return A;
}());

export var B = (function () {
    function B() {
    }
    return B;
}());

export var C = (function () {
    function C() {
    }
    return C;
}());

如果您使用以下方式导入其他文件：

从 './sample' 导入 { A, B, C };

我没有尝试过，但我认为它是这样工作的。

【讨论】：

【解决方案3】：

如果你想import { Foo, Bar} from './my-object'，你需要显式地导出 Foo 和 Bar。例如

export const Foo = { bar() {} };
export const Bar = { foo() {} };

【讨论】：