为什么此锚点说“搜索不是函数”？

Question

我编写了一个函数search，希望单击链接时会调用该函数，如下面的代码片段所示：

<script>
  function search() {
    console.log('Searching');
  }
</script>
<a href="#" onclick="search();">Click here</a>

但是，该代码无法按我预期的方式工作，当单击链接时会导致此错误（在Chrome中）：

未捕获的TypeError：搜索不是函数

我尝试记录日志search以查看为什么引发了错误：

<a href="#" onclick="console.log(search)">Click here</a>

<a href="#" onclick="console.log(search)">Click here</a>

这次，每次单击链接时，控制台都会记录一个空字符串。令我感到困惑的是，search实际上它在其他地方定义为空字符串，这使我的函数定义毫无用处。

所以我想知道单击事件被触发时发生什么情况，以及何时search定义？

Answer 1

事实证明，search实际上是指a元素的search属性，该属性是控制搜索参数的属性，在本例中恰好是一个空字符串。这是因为HTMLAnchorElement，它很特殊，因为它用于创建超链接并导航到其他地址，因此该search属性用于控制超链接搜索的参数（类似于Location）对象。设置search锚元素的属性将依次设置全局Location实例的window.location.search. 这会产生命名冲突，并且由于空字符串不是函数，因此会引发错误。

使用不同的函数名称来消除此冲突。请注意，如果您不使用 an a，您会发现它工作得很好：

<script>
  function search() { 
    alert("foo"); 
  }
</script>
<div onclick="search();">Click me!</div>