今天在webapck搭建的es6环境下学习var、let区别时,无意间踩到一个坑。
var a = 1;
console.log(window.a) // undefined
为什么?正常情况下上述定义方式,a应该是全局变量,即window的属性。怎么会找不到,打印出undefined。
于是随便写了个html测试(不在webpack环境下),正常打印。
百思不得其解。于是上网搜索,原来
1.使用webpack做模块化,每个文件内的作用域是封闭的,var a = 1 这种定义是局部的,只对这个文件内有效,并没有挂载到window作用域下。如果不用module.exports等导出的话,无法访问。
2.想定义全局的话,只能手动window.a = 1 这样其他模块才能访问这个a变量。不过既然使用了webpack模块化,肯定使用导出的方法最好。
实际往深处想,既然webpack模块化,模块内定义的变量肯定是封闭的。所以自然而然也挂载不了全局window上,究其原因,还是自己理解的不够深刻,特此记录下。