昨天晚上看到微信群里有人发了张截图，表示自己遇到了变量名获取失败的问题：
这里可以看到，我们用document.querySelector()获取类名为.tab的HTML元素，并将其保存在top变量中，并输出top。按理来说我们应当获取到一个element对象，可当我们打开了控制台，却发现我们竟然获取到window对象？！ 可以肯定错误出现在这里：
确定导致错误的代码 可这又是哪里写错了呢，这里不是只有变量名可以修改嘛？相信大家和昨天的我一样疑惑。 我的第一反应是变量名top是保留字，可是在查阅文档后发现top并不是JS的关键字或保留字。我的直觉告诉我，肯定是top这个变量名出了问题。于是我打开了百度：
果然！问题就出在top这里！！！
原来，top是window对象的属性，所以在后面的console.log输出时，获取到的就是window对象啦。知乎和腾讯云给出的回答是这样的：
在JS的顶层有一个全局对象window，凡是window上的属性和方法就是全局的属性和方法，name和top属性已经被window对象使用。
（引自：注意了！！JS中name和top坑 - 知乎 (zhihu.com)）
在浏览器中，top指代一个对象，始终指向最高层框架，也就是浏览器窗口。
1. 当页面中存在框架时，从top出发，可以帮助很快得找到想要引用的框架。
2. 如果页面不包含框架，即最外层window就是唯一的window窗口，此时top是window的一个属性，指向window本身。
javascripttop == window.top;//true
top == window;//true
window == window.top;//true
然而我们是可以给top赋值的，虽然这样的操作是无效的，原来top引用的窗口对象并不会被覆盖，但是浏览器也并不会报错！（所以其实能让浏览抛出异常的错误一般来说是比较好修正的，因为提示的错误信息已经能指明问题所在了。）
（引自：页面中千万不要给变量起名top！一次艰难的Debug之路_JavaScript - UCloud云社区）
当我们对变量名进行修改后，发现果然能够正确地获取到对象：
所以，我们在给变量命名的时候，一定要留个心眼：除了不能将变量名设置为关键字保留字，我们还应该养成不将属性名作为变量名的好习惯。 问题解决！Debug Over！
欢迎大家来我的个人博客来逛逛，一起学习，一起coding！
