jQuery异常行为：未用选择器或变量赋值为何能输出sample？

嘿，这个问题其实是浏览器的一个「历史遗留小特性」在搞鬼！先看你贴的代码片段：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log(sample);
});
</script>
</head>
<body>
<p id="sample">If you click on me, I will disappear.</p>
<!-- 其他内容省略 -->
</body>
</html>

核心原因是：早期浏览器为了方便开发，加入了一个非标准但广泛支持的行为——页面中带有id属性的元素，会自动被浏览器挂载到全局的window对象上，变量名就是元素的id值。

换句话说，你页面里的<p id="sample">，浏览器会自动帮你创建window.sample这个全局变量，指向这个<p>元素。所以你在$(document).ready()里直接写console.log(sample)，本质上是在打印window.sample，自然能输出对应的DOM元素。

补充几个关键点：

• 这个特性和jQuery无关，就算你去掉jQuery的引入，直接写普通的window.onload里打印sample，结果也是一样的。
• 如果手动声明了同名的全局变量（比如var sample = 'test'），会覆盖浏览器自动生成的这个变量，此时打印的就是你自己定义的值了。
• 虽然这个特性方便，但不推荐依赖它——因为它是非标准的，而且容易和自定义全局变量冲突。正规的做法还是用document.getElementById('sample')或者jQuery的$('#sample')来主动选取元素。

内容的提问来源于stack exchange，提问作者Rahul Yadav