我将大量运行 document.querySelectorAll() ，并且想要一个速记别名。
var queryAll = document.querySelectorAll
queryAll('body')
TypeError: Illegal invocation
不起作用。然而：
document.querySelectorAll('body')
仍然如此。我怎样才能使别名工作？
为 document.querySelectorAll 制作一个短别名
IT技术
javascript
native-methods
2021-02-24 14:27:10
6个回答
这似乎有效：
const queryAll = document.querySelectorAll.bind(document);
bind返回一个与函数相同的新函数querySelectorAll，其中方法this内部的值querySelectorAll绑定到document对象。
绑定功能仅在 IE9+（和所有其他浏览器）中受支持 - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
更新：事实上，您可以创建一系列文档方法的快捷方式，如下所示：
const query = document.querySelector.bind(document);
const queryAll = document.querySelectorAll.bind(document);
const fromId = document.getElementById.bind(document);
const fromClass = document.getElementsByClassName.bind(document);
const fromTag = document.getElementsByTagName.bind(document);
一个常见的答案是使用$and $$for querySelectorand querySelectorAll。这个别名模仿了 jQuery 的别名。
例子：
$ = document.querySelector.bind(document)
$$ = document.querySelectorAll.bind(document)
$('div').style.color = 'blue'
$$('div').forEach(div => div.style.background = 'orange')div {
margin: 2px;
}<div>
test
</div>
<section>
<div>
hello
</div>
<div>
foo
</div>
</section>JavaScript 解释器抛出错误，因为querySelectorAll()应该在文档上下文中调用。
当您尝试调用console.log()aliased时，会抛出相同的错误。
所以你需要像这样包装它：
function x(selector) {
return document.querySelectorAll(selector);
}
我的解决方案涵盖以下四个用例：
- document.querySelector(...)
- document.querySelectorAll(...)
- element.querySelector(...)
- element.querySelectorAll(...)
代码：
let doc=document,
qsa=(s,o=doc)=>o.querySelectorAll(s),
qs=(s,o=doc)=>o.querySelector(s);
在参数方面，选择器s是必须的，而容器元素对象o是可选的。
用法：
qs("div"): 查询整个文档的第一个div，返回那个元素qsa("div"): 查询所有 div 的整个文档，返回所有这些元素的 nodeListqs("div", myContainer): 仅在 myContainer 元素内查询第一个 div，返回该元素qsa("div", myContainer): 只在 myContainer 元素内查询所有 div，返回所有这些元素的 nodeList
为了使代码更短（但效率不高），qs可以将代码编写如下：
let qs=(s,o=doc)=>qsa(s,o)[0];
上面的代码使用 ES6 特性（let、箭头函数和默认参数值）。ES5 等效项是：
var doc=document,
qsa=function(s,o){return(o||doc).querySelectorAll(s);},
qs=function(s,o){return(o||doc).querySelector(s);};
或等效的更短但效率较低的 ES5 版本qs：
var qs=function(s,o){return qsa(s,o)[0];};
下面是一个工作演示。为了确保它适用于所有浏览器，它使用 ES5 版本，但如果你打算使用这个想法，请记住 ES6 版本更短：
这会起作用，您需要使用call()或apply()使用适当的上下文来调用别名。
func.call(context, arg1, arg2, ...)
func.apply(context, [args])
var x = document.querySelectorAll;
x.call(document, 'body');
x.apply(document, ['body']);