JavaScript中未显式定义的grid变量为何能正常运行？

这是浏览器保留的历史遗留DOM访问特性，不属于JavaScript本身的内置语法：

• 所有设置了id属性的HTML元素，浏览器都会自动在全局作用域（即window对象）上挂载一个同名属性，属性值就是对应DOM元素的引用。示例代码中表格标签写了<table id="grid">，因此直接访问grid时，实际拿到的就是这个表格DOM节点，效果和手动执行document.getElementById('grid')完全一致，不需要额外声明变量。
• 这个特性是早期浏览器为了简化DOM操作推出的，目前所有主流浏览器都保留了兼容实现，但它是非标准特性，生产环境不推荐依赖这种写法：很容易出现自定义变量和自动生成的全局DOM引用重名冲突的问题，标准写法始终是显式调用DOM选择器方法获取元素。

这段代码实现的是点击表头排序表格的效果：

• 给表格绑定全局点击事件，事件触发时首先判断点击的实际目标是不是<th>表头单元格，如果不是直接终止逻辑，不做任何处理。
• 如果点击的是表头，就获取当前被点击的表头元素，读取两个关键参数：cellIndex是当前表头所在的列序号（从0开始计数，第一列为0，第二列为1），dataset.type是表头data-type自定义属性上标记的该列数据类型（数字/字符串），把这两个参数传入排序函数sortGrid。
• sortGrid函数执行排序逻辑：
  • 先获取表格的<tbody>节点，把tbody下的所有表格行转成普通数组
  • 根据传入的列数据类型生成对应的排序比较函数：数字类型直接取两个单元格的数值做差，字符串类型按文本字典序比较大小
  • 用生成的比较函数对行数组排序，排完后把所有行重新追加到tbody中，完成DOM更新，实现列排序效果

内容的提问来源于stack exchange，提问作者Reham Ashraf