JavaScript中void的作用与用法解析

在JavaScript中，`void`操作符用于执行表达式，但始终返回`undefined`。其经典用法`void expression`，常见于早期通过`javascript:void(0);`阻止链接跳转。尽管如此，现代Web开发已逐渐摒弃这种做法，因为它将HTML与JavaScript行为耦合，降低了代码可维护性和可访问性。本文深入剖析了`void`操作符的原理，比较了`void(0)`与`void(expression)`的异同，并探讨了其在现代JavaScript中的应用场景，如在IIFE中确保返回`undefined`。更重要的是，本文强调了使用`event.preventDefault()`分离HTML结构和JavaScript行为的重要性，提倡采用更具语义化和可维护性的替代方案，以提升用户体验和代码质量。

JavaScript的void操作符用于执行表达式并返回undefined。其核心作用是确保表达式结果为undefined，常见于早期阻止链接跳转的场景，如href="javascript:void(0);"，但现代开发中已较少使用。1. void(expression)会执行表达式但返回undefined；2. 适用于需要明确结果为undefined的场景，如IIFE中忽略返回值；3. 不推荐在标签中使用，因其存在可维护性、可访问性和行为耦合问题；4. 现代替代方案是使用event.preventDefault()分离HTML与JavaScript逻辑，提高可维护性和可访问性。

JavaScript的 void 操作符是一个很有趣，甚至可以说有点“古老”的存在。简单来说，它会执行你给它的表达式，然后返回 undefined。它的主要作用，或者说最常见的场景，就是确保某个表达式的结果是 undefined，尤其是在你希望避免默认行为的时候。

解决方案

要理解 void 的用法，最直观的方式就是看它如何处理表达式。它的语法很简单：void expression。

最经典的用法，也是很多前端开发者第一次接触 void 的地方，就是在 标签的 href 属性里：

<a href="javascript:void(0);">点击这里什么也不发生</a>

这里 void(0) 的作用是，当用户点击这个链接时，JavaScript 会执行 0 这个表达式（它没有任何副作用），然后 void 操作符会返回 undefined。由于 undefined 不会导致浏览器导航到新的页面，所以点击链接后，页面会停留在原地。这在很多早期或者需要通过 JavaScript 动态处理链接行为的场景下非常常见。

当然，你也可以用 void 来处理任何表达式：

let result = void (1 + 2); // result 会是 undefined
console.log(result); // 输出: undefined

// 尽管表达式是 `alert('Hello');`，void 依然会返回 undefined
let funcResult = void alert('Hello');
console.log(funcResult); // 输出: undefined (在 alert 弹窗关闭后)

这里的核心在于，void 总是返回 undefined，而它后面的表达式会被求值，但其结果会被丢弃。这在某些特定场景下，比如你明确需要一个表达式的结果是 undefined，或者为了防止某些副作用（比如在 标签里阻止导航），就派上用场了。

void(0) 和 void(expression) 有什么区别？

说实话，从 void 操作符本身的机制来看，void(0) 和 void(expression) 在功能上并没有本质区别。void 操作符的唯一任务就是对紧随其后的表达式进行求值，然后，无论这个表达式的值是什么，它都会返回 undefined。所以，void(0) 只是 void 操作符的一个具体应用，其中 expression 被指定为数字 0。

为什么是 0 呢？因为 0 是一个简单的、没有副作用的表达式，它的求值成本极低，而且不会引起任何不必要的行为。你可以写 void(1)，void('hello')，甚至 void(console.log('hi'))，它们都会让 void 操作符返回 undefined。唯一的不同在于，void 会先执行括号里的表达式，如果这个表达式有副作用（比如 console.log），那么副作用会发生。

所以，区别不在于 void 本身的行为，而在于你选择的 expression 是否有副作用，或者你是否需要这个表达式被求值。在 href="javascript:void(0);" 的场景下，选择 0 是因为它最简洁、最无害，仅仅是为了触发 void 返回 undefined 的行为，从而阻止链接的默认跳转。

void 操作符在现代JavaScript中还有哪些实际用途？

坦白讲，在现代 JavaScript 开发中，void 操作符的直接使用场景已经大大减少了。很多它曾经解决的问题，现在都有了更优雅、更语义化的替代方案。

不过，它并非完全没有用武之地。有时候你会看到它出现在一些立即执行函数表达式（IIFE）的写法中：

// 这种写法确保整个表达式的结果是 undefined，即使 IIFE 内部有返回值
(function() {
    console.log('Hello from IIFE');
    return 123; // 这个返回值会被 void 丢弃
})(); // 这里的返回值是 123

void function() {
    console.log('Hello from void IIFE');
    return 123;
}(); // 这里的返回值是 undefined

在某些压缩代码或确保特定表达式求值为 undefined 的场景下，void 可能会被用到。例如，在某些模块化规范或特定库的设计中，为了确保一个表达式不会意外地返回一个非 undefined 的值，从而影响后续的逻辑或链式调用，void 可能会被作为一种防御性编程的手段。

但总的来说，随着 JavaScript 语言的发展和社区最佳实践的演变，我们更倾向于使用那些意图更明确、可读性更高的语法。void 更多地成了一种历史遗留和特定场景下的“奇技淫巧”。了解它很重要，因为它确实存在于代码库中，但主动去使用它，通常需要一个非常充分且难以替代的理由。

为什么不推荐在 标签中使用 javascript:void(0)？有什么更好的替代方案？

这是一个非常好的问题，也是现代前端开发中一个重要的共识。尽管 javascript:void(0) 曾是阻止链接跳转的常见做法，但在现代 Web 开发中，它通常不被推荐。

不推荐的原因主要有几点：

1. 混合内容与行为： href="javascript:..." 这种写法将 HTML（内容）和 JavaScript（行为）紧密耦合在一起。这违反了结构、样式、行为分离的原则，使得代码难以维护和理解。当你需要修改链接的行为时，你不得不去修改 HTML 结构，而不是在 JavaScript 文件中集中处理。
2. 可访问性问题： 对于依赖键盘导航或屏幕阅读器的用户来说， 标签通常意味着一个可点击并会导航的元素。使用 void(0) 可能会导致用户体验上的困惑，因为它看起来像链接，但点击后却没有任何视觉反馈或导航行为，这可能让辅助技术用户感到沮丧。
3. 不利于事件委托和性能优化： 当你有大量类似的链接需要阻止跳转时，为每个链接添加 onclick="javascript:void(0);" 会导致大量的重复代码。更好的做法是使用事件委托，将事件监听器添加到父元素上，然后统一处理子元素的点击事件，这样可以提高性能和代码的简洁性。

那么，更好的替代方案是什么呢？

最推荐和最标准的做法是使用 JavaScript 的事件处理机制，并在事件回调函数中使用 event.preventDefault() 方法。

<!-- HTML 结构保持干净，不包含 JS 逻辑 -->
<a href="#" id="myLink">点击这里阻止默认跳转</a>
<button id="myButton">点击我，我也不会提交表单</button>

<form id="myForm">
    &lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;
    <button type="submit">提交表单</button>
</form>

// JavaScript 文件中处理行为
document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认跳转行为
    console.log('链接被点击了，但没有跳转！');
    // 在这里执行你希望的 JavaScript 逻辑
});

document.getElementById('myButton').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止按钮的默认行为（例如表单提交）
    console.log('按钮被点击了，但没有默认行为！');
});

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    console.log('表单被提交了，但没有刷新页面！');
    // 在这里处理表单数据，例如通过 AJAX 提交
});

这种方式的优点显而易见：

• 分离关注点： HTML 负责结构，JavaScript 负责行为，代码更清晰。
• 更好的可维护性： 行为逻辑集中在 JavaScript 文件中，易于修改和调试。
• 更好的可访问性： href="#" 或 href="/some-path" 仍然可以作为备用方案，即使 JavaScript 未加载或失败，用户至少可以看到一个有效的链接目标，或者在事件监听器失败时，链接会尝试导航到 /#，而不是什么都不做。
• 更灵活： event.preventDefault() 可以阻止任何元素的默认行为，不仅仅是链接。

总之，void 操作符是 JavaScript 语言的一部分，了解它很重要，尤其是在阅读一些老旧代码时。但在新的项目或现代前端实践中，我们应该优先选择更符合最佳实践、更具语义化和可维护性的方法来处理交互逻辑。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript中void的作用与用法解析》文章吧，也可关注golang学习网公众号了解相关技术文章。