为什么该锚点说“搜索不是函数”？ [英] Why does this anchor say "search is not a function"?

问题描述

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

 < script>函数search（）{console.log（ Searching）; }< / script>< a href =＃ onclick = search（）;>点击此处< / a>  

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

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

我尝试记录搜索以查看为什么引发该错误：

 < a href = ＃ onclick = console.log（search）>点击此处< / a> 
  

 < script>函数search（）{console.log（ Searching）; }< / script>< a href =＃ onclick = console.log（search）;>点击此处< / a>  

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

因此，我想知道单击事件被触发时以及在什么时候定义 search 时会发生什么？

解决方案

事实证明，搜索实际上是指 a 元素的 search 属性，它是控制搜索参数的属性，在这种情况下，它恰好是一个空字符串。这是因为使用 HTMLAnchorElement 时，它很特殊，因为它用于创建超链接并导航到其他地址，从而搜索属性用于控制超链接的搜索参数（类似于 位置 ）对象。设置锚元素的 search 属性将依次设置全局 Location 实例的窗口.location.search 。这会导致命名冲突，并且因为空字符串不是函数，所以会引发错误。

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

 < script> 
 function search（）{
 alert（ foo）; 
} 
< / script> 
< div onclick = search（）;>点击我！< / div> 
  

I wrote a function named search that I expected to be called when the link was clicked, as the code snippet below shows:

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

However, the code does not work as I expected, which causes this error (in Chrome) when the link is clicked:

Uncaught TypeError: search is not a function

I tried logging search to see why the error was thrown:

<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>

This time, the console logged an empty string each time the link is clicked. What puzzles me is that search is actually defined somewhere else as an empty string, making my function definition useless.

So I want to know what happens when a click event is triggered, and when is search here defined?

解决方案

It turns out search actually is referring to to the a element's search property which is a property that controls search parameters, which happens to be an empty string in this case. This is because with an HTMLAnchorElement, it is special as it is used to create hyperlinks and navigate to other addresses, and thus the search property is used to control parameters of searches by hyperlinks (similar to that of the Location) object. Setting the search property of an anchor element will then in turn set the global Location instance's window.location.search. This creates a naming conflict and because an empty string is not a function the error is thrown.

Use a different name for the function to remove this conflict. Note that if you don't use an a, you'll see it work just fine:

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

这篇关于为什么该锚点说“搜索不是函数”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！