javascript：void(0) 中的 void 运算符返回什么值

在 JavaScript 中，void 运算符无论接收什么参数，其求值结果都恒定返回 undefined。因此，javascript:void(0) 中的 void(0) 运算得到的值就是 undefined。在早期网页开发中，这段代码常被写在 HTML 超链接的 href 属性中，目的是让链接被点击时执行脚本而不触发浏览器的页面刷新或跳转。

一、ECMAScript 规范中的 void 运算符

void 是 JavaScript 中的一元操作符（Unary Operator），其语法规范形式为：

void expression
void(expression)

规范对 void 的运算流程定义非常直接：先对后面的表达式 expression 进行求值，执行其中包含的所有副作用或计算逻辑，然后直接丢弃该计算结果，并始终返回原语值 undefined。

为了直观验证这一结论，可以在控制台直接运行以下表达式：

console.log(void 0);              // 输出: undefined
console.log(void(0));             // 输出: undefined
console.log(void "hello");        // 输出: undefined
console.log(void (1 + 1));        // 输出: undefined
console.log(typeof void 0);       // 输出: "undefined"

可以看到，不管后跟的操作数是数字、字符串还是复杂算式，void 运算的结果都是 undefined。

二、为什么早期代码青睐 javascript:void(0)

javascript: 是浏览器支持的一种伪协议（Pseudo-protocol）。当超链接的 href 属性被指定为 javascript:... 时，用户点击该链接并不会发起网络请求加载新网页，而是把冒号后的代码交给浏览器的 JavaScript 引擎执行。

然而，浏览器处理 javascript: 伪协议有一条特殊规则：

• 如果执行的代码返回了除 undefined 以外的任何有效值（如字符串、数字或对象），浏览器会把返回值转换成字符串，并用其内容直接覆盖替换当前整个文档页面。
• 如果执行的代码返回的是 undefined，浏览器则会静默终止导航，不改变当前页面，也不发生任何重新加载或滚动。

三、为什么参数偏偏写 0？写其他值可以吗？

很多人会疑问，为什么是 void(0) 而不是 void(1) 或其他内容？其实从语言标准来说，写 void 0、void 1、void "abc" 甚至 void false 的效果完全一致，都会返回 undefined。

选择 0 的核心原因主要有两个：

1. 极短的字符长度：在打包压缩工具尚未普及的早期前端时代，手写 0 是最短的有效 JavaScript 原语之一，有助于减少 HTML 行内文本体积。
2. 安全性与稳健性：在 ECMAScript 5 之前，全局环境下的变量 undefined 并非只读属性，而是可以被恶意或无意地重新赋值（例如 window.undefined = true）。一旦 undefined 被篡改，直接使用字面量 undefined 就会产生逻辑漏洞。而 void 属于关键字操作符，无论上下文如何，void 0 都会稳定无误地生成真正的原语 undefined。

四、超链接阻止跳转的实现方案演进

在前端交互开发中，开发者常常需要借助超链接的样式表现，但并不希望触发真正的页面路由。历史上曾出现过多种做法，它们的机制和优劣各不相同：

1. 为什么不建议在现代项目中使用 javascript:void(0)

尽管 javascript:void(0) 能解决跳转问题，但在现代前端开发中已被普遍列为不良实践（Anti-pattern）：

• 破坏 HTML 语义化与可访问性（a11y）：<a> 标签的语义是页面间的导航锚点。如果一个元素仅用来触发 JavaScript 操作（例如打开弹窗、提交数据），它在语义上是一个按钮。盲人屏幕朗读器会将 <a> 读作“链接”，若点击后并无页面导航，会给依赖辅助技术的用户造成严重困惑。
• 内容安全策略（CSP）冲突：为了防止 XSS 攻击，现代 Web 项目广泛启用了严格的 CSP 规则（如禁止 unsafe-inline）。包含 javascript: 伪协议的属性会被浏览器直接拦截报错。
• 键盘操作支持缺失：标准的 <button> 原生支持回车键（Enter）与空格键（Space）触发点击，而 <a> 默认仅响应回车键，空格键则会触发页面滚动，造成交互体验不一致。

2. 现代开发中的规范写法

如果当前操作属于页面功能按钮，应直接使用 <button type="button">，并通过 CSS 重置样式：

<!-- 语义化按钮推荐写法 -->
<button type="button" class="link-button" id="actionBtn">打开弹窗</button>

<script>
  document.getElementById('actionBtn').addEventListener('click', () => {
    // 纯粹的交互逻辑，无任何页面导航问题
    openModal();
  });
</script>

如果由于某些特殊原因必须保留 <a> 标签（例如兼顾右键在新标签页打开有效目标），则应在事件监听函数中调用 event.preventDefault()：

<!-- 通过事件对象显式阻止默认动作 -->
<a href="/target-fallback" id="navLink">查看详情</a>

<script>
  document.getElementById('navLink').addEventListener('click', (event) => {
    event.preventDefault(); // 阻止浏览器跳转
    doSomethingCustom();
  });
</script>

五、void 运算符在现代 JavaScript 中的其他用途

尽管 javascript:void(0) 在 HTML 属性中不再推荐使用，但 void 运算符本身作为 JavaScript 语言标准特性，在现代工程代码中依然有以下实用场景：

1. 立即执行函数表达式（IIFE）

在不使用多余括号包裹的情况下，可以使用 void 强行将函数声明转换为函数表达式并立即调用：

// 传统写法需要双层括号：(function(){ ... })();
void function init() {
  console.log("初始化完成");
}();

2. 箭头函数中避免泄露返回值

在单行箭头函数中，如果函数体后跟的是具有返回值的表达式，该值会被隐式作为箭头函数的返回值。在某些要求回调函数不得返回任何内容（或者 TypeScript 开启了严格返回类型检查）的场景下，可以使用 void 丢弃该值：

// 回调函数原本会返回 doTask() 的执行结果
const handleClick = () => void doTask();

// 在 React / TypeScript 事件回调中避免隐式返回值被误用
button.onclick = () => void asyncProcess();

六、全文总结

归结起来，javascript:void(0) 中的 void 运算符返回的值是且仅是 undefined。理解这一点不仅有助于阅读历史维护代码，更能帮助我们理清 JavaScript 表达式求值流程与浏览器导航机制的底层关联。