Javascript 用'；定义的变量'；以名义

今天我在使用webpack和

DefinePlugin

时发现了一些奇怪的东西

假设我的

webpack.config.js

包含以下内容：

new webpack.DefinePlugin({
    'foo.bar': JSON.stringify('hello world'),
    'baz': JSON.stringify({bar: 'I am in baz.bar'}),
})

和我的全球环境。ts：

declare var foo: object
declare var baz: object

现在，我在主脚本文件中执行以下操作：

console.log(foo.bar)     // hello world
console.log(foo['bar'])  // hello world
console.log(baz.bar)     // I am in baz.bar
console.log(baz['bar'])  // I am in baz.bar

这很好，但现在乐趣开始了：

console.log(foo)  // ReferenceError: foo is not defined
console.log(baz)  // { bar: 15 }

为什么它认为

foo

没有定义，但我确实可以通过

和

[]

访问

栏

我最初的怀疑是，这类似于使用一个对象作为另一个对象的键，并强制使用字符串：

const a = {}
const b = {}
const b[a] = 15  // {'[object Object]': 15}

所以

foo.bar

相当于

globals['foo.bar']

，那么

foo

单独未定义和

foo[bar]

也是有意义的。除非它不是，而且如上所述，您可以正常使用

foo.bar

和

foo['bar]

，就像

foo

是一个常规对象一样

---

这里发生了什么？

console.log（baz.bar）//我在baz.bar

vs

console.log（baz.bar）//[Object]

您有完全相同的语句返回不同的内容，这让人怀疑我们是否在寻找整个故事。检查捆绑源代码并查看Web包实际发出的代码是很容易的。@Mark\n对不起，我的意思是

console.log（baz）

而不是

console.log（baz.bar）