javascript:void()函数方法的解释

void 这个术语在编程中使用时,指的是“无”的返回 – 可以说是“空值”。当函数为空时,意味着该函数不返回任何内容。这类似于 JavaScript 中undefined显式返回的函数,如下所示:

function und() {
  return undefined
}
und()

或隐含地,像这样:

function und() {
}
und()

无论上述函数中的表达式和语句如何,都没有返回结果。

那么,什么是 javascript:void(0) 呢?

如果我们把它分开,我们有javascript:void(0)。让我们更详细地看一下每个部分。

javascript:

这称为伪 URL。当浏览器接收到此值作为href锚标记上的值时,它会解释冒号 (:) 后面的 JS 代码,而不是将该值视为引用路径。

例如:

<a href="javascript:console.log('javascript');alert('javascript')">Link</a>

单击“链接”时,结果如下:

 

如上所示,浏览器不会将其href视为引用路径。相反,它将其视为一些 JavaScript 代码,以“javascript:”开头并以分号分隔。 

void(0)

void 运算符计算给定的表达式并返回undefined

例如:

const result = void(1 + 1);
console.log(result);
// undefined

1 + 1被评估但undefined被返回。为了证实这一点,这是另一个例子:

<body>
  <h1>Heading</h1>
  <script>
        void(document.body.style.backgroundColor = 'red',
             document.body.style.color = 'white'
        )
  </script>
</body>

上面代码的结果是:

这是另一个例子:

console.log(void(0) === undefined)
// true

结合javascript:void(0)

有时,你不希望链接导航到另一个页面或重新加载页面。使用javascript:,你可以运行不会更改当前页面的代码。

这与void(0)一起使用,什么都不做- 不要重新加载,不要导航,不要运行任何代码。

例如:

<a href="javascript:void(0)">Link</a>

“链接”一词被浏览器视为链接。例如,它是可聚焦的,但它不会导航到新页面。

0是一个传递给void的参数,它什么都不做,什么都不返回。

JavaScript 代码(如上所示)也可以作为参数传递给void方法。这使得链接元素运行一些代码,但它维护相同的页面。

例如:

<a id='link' href="javascript:void(
  document.querySelector('#link').style.color = 'green'
)">Link</a>

单击按钮时,结果如下:

 

使用void,它告诉浏览器不要返回任何东西(或 return undefined)。

带有javascript:void(0)引用的链接的另一个用例是,有时链接可能会在后台运行一些 JavaScript 代码,而导航可能是不必要的。在这种情况下,表达式将用作传递给void的参数。

结论

在这篇简化的文章中,我们了解了void运算符是什么、它是如何工作的,以及它如何与链接属性的javascript:伪 URL一起使用href。

这可确保页面在单击时不会导航到另一个页面或重新加载当前页面。 

您可能对以下文章也感兴趣

  • jQuery实例:单击按钮后使用val()方法更改按钮文字
  • jQuery find(“#id”)与find(“.class”)实例分析与比较
  • JQuery使用append()函数动态创建和应用CSS样式