javascript - 为什么这个 anchor 说 "search is not a function"？

Question

我编写了一个名为 search 的函数，我希望它在单击链接时被调用，如下面的代码片段所示:

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

但是，代码并没有像我预期的那样工作，这会在单击链接时导致此错误(在 Chrome 中):

Uncaught TypeError: search is not a function

我尝试记录 search 以查看抛出错误的原因:

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

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

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

所以我想知道当点击事件被触发时会发生什么，这里的search是什么时候定义的？

Answer 1

原来 search 实际上是指 a 元素的 search 属性，它是一个控制搜索参数的属性，恰好在这种情况下是一个空字符串。这是因为对于 HTMLAnchorElement，它是特殊的，因为它用于创建超链接和导航到其他地址，因此 search 属性用于控制搜索参数超链接(类似于 Location )对象。设置 anchor 元素的 search 属性将依次设置全局 Location 实例的 window.location.search。这会造成命名冲突，并且由于空字符串不是函数，因此会引发错误。

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

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