Question

为什么会出现这种错误？基本上，我可以这样缩短我的代码。

const log = console.log;

那我们为什么不能拥有这个呢？

const _search = document.querySeletor;

Answer 1

querySelector可以在很多事情上被调用，而不仅仅是document，例如：

const outer = document.querySelector('#outer');
const inner = outer.querySelector('div'); // querySelector called on `outer`
console.log(inner);

<div id="outer">
  <div id="inner">
  </div>
</div>

querySelector方法必须具有一个要从中进行搜索的根元素，该根元素可以通过函数的调用上下文（在其中使用的this值）进行标识。在以上代码段中，outer.querySelector('div')选择一个div元素，该元素是outer的子元素。同样，使用document.querySelector，您可以在文档中的任意位置选择一个子元素（但不能，例如，在存在但未附加到文档中的元素中）。

但是在没有调用上下文的情况下（例如，如果您将querySelector分配给独立变量），则该方法不知道要从哪个根元素进行搜索，因此会引发错误。

您可以缩短它，方法是先.bind将函数添加到文档中，以便在调用时具有适当的调用上下文：

const qs = document.querySelector.bind(document);
console.log(qs('#inner'));

<div id="outer">
  <div id="inner">
  </div>
</div>

非法调用方法

1 个答案: