模拟jQuery $选择器时调用返回undefined的问题排查

首先，你遇到的TypeError: $(...) is undefined错误，核心原因是你自己写的$函数没有返回任何值！

看一下你的原函数：

function $(a) { b = document.querySelectorAll(a); [].forEach.call(b, function(d) { return d }); }

这里你虽然用document.querySelectorAll获取了匹配的元素集合，但整个函数没有return语句，所以调用$(".tobered,#illbered")时，默认返回undefined，自然就没法访问.style属性了。而且里面的forEach遍历完全是多余的——它只是逐个返回元素，但没有把结果传递出去。

为什么简化后的函数能正常工作？ #

你后来写的：

var $ = document.querySelectorAll.bind(document)

这个写法其实是把document.querySelectorAll方法的上下文绑定到document上，调用$(selector)就等价于直接调用document.querySelectorAll(selector)，而这个方法本身会返回一个NodeList（元素集合），所以你可以通过[0]访问集合里的第一个元素，再设置它的样式。

额外补充：给所有匹配元素设置样式 #

如果你的需求是给所有匹配.tobered和#illbered的元素都加上红色边框，只取[0]只能修改第一个元素。你可以把函数改成返回数组，方便遍历操作：

function $(a) {
  // 把NodeList转成数组，方便使用数组的forEach方法
  return Array.from(document.querySelectorAll(a));
}

// 调用方式：遍历所有元素设置样式
$(".tobered,#illbered").forEach(el => {
  el.style.border = '1px solid #f00';
});

这样就能一次性给所有匹配的元素应用样式啦～

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