原文:JavaScript Void 0 – What Does javascript:void(0); Mean,作者:Dillion Megida

根据字典,void 这个词的意思是“完全空的空间”。这个词在编程中使用时,指的是返回 “无”——可以说是一个 "空值"。

void 关键字是什么?

当一个函数为空时,该函数没有返回任何东西。这与 JavaScript 中明确返回 undefined 的函数类似,例如:

function und() {
  return undefined
}
und()

或用隐含的方式返回,例如:

function und() {
}
und()

无论上述函数中的表达式和语句如何(将 2 个数字相加,求 5 个数字的平均值,等等),都没有返回结果。

现在我们知道 void 关键字是怎么回事了,那 javascript:void(0) 呢?

javascript:void(0) 是什么?

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

javascript:

这被称为“伪 URL”。当浏览器收到这个值作为锚点标签上的 href 值时,它会解释冒号(:)后面的 JS 代码,而不是把这个值当作一个引用的路径。

例如:

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

单击 “Link” 时,结果如下:

image-119

如上所述,浏览器并不把 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>

上面代码的结果是:

image-122

这是另一个例子:

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

结合 javascript: 和 void(0)

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

把这与 void(0) 一起使用,意味着,什么都不做——不重新加载、不导航、不运行任何代码。

比如:

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

浏览器将 “Link” 一词作为一个链接对待。例如,它是可获得焦点的,但它不会导航到一个新的页面。

0 是传递给 void 的一个参数,不做任何事情,也不返回任何东西。

JavaScript 代码(如上所示)也可以作为参数传给 void 方法,这使得 link 元素运行一些代码,但它保持着同一个页面。

比如说:

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

单击按钮时,结果如下:

image-121

void 告诉浏览器不要返回任何东西(或返回 undefined)。

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

总结

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

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