JavaScript中void 0的作用

发表于 分类于 阅读次数： Valine：

原文：What Does void 0 Do in JavaScript?

JavaScript中的void运算符是一个普遍的难点，它很少出现在教程中，但它有一些方便的用途。本文展示了void运算符最常见的一些用途。

JavaScript的void运算符对表达式进行计算然后返回undefined。乍一看，这个运算符没什么用，但在实践中有3种情况会用到void运算符。以下是3个主要的用途：

禁止覆盖undefined

一个令人吃惊的事实：undefined是一个合法的JavaScript变量名。以下代码会打印test两次。

1
2
3
4
5
6
7
8
9
10
11
12
const undefined = 'test';

function foo() {
  return undefined;
}

function bar(undefined) {
  return undefined;
}

console.log(foo());
console.log(bar('test'));

而void是一个运算符，如果尝试以void命名变量，JavaScript会抛出以下异常。

1
SyntaxError: Unexpected token void

一些JavaScript项目使用void 0来替代undefined，避免意外创建以undefined命名的变量。甚至ESLint为了这个原因，专门设定了一个规则，禁止使用undefined变量。

无操作<a>标签

void运算符另一个用途，是<a>标签的URI设为javascript:void(0)，点击时不做任何事。<a>标签如果没有name或href属性，是无效的HTML元素。使用javascript:void(0)是常见的技巧，可以不写入真实的链接，使<a>标签也能正常渲染。

1
<a href="javascript:void(0)">Click Here</a>

以上HTML效果如下：

Click Here

立即调用函数表达式（IIFE）

声明一个函数并在同一个语句执行函数，一般需要用圆括号括起来，强制JavaScript将函数声明作为表达式进行处理。

1
(function() { console.log('Hello, World'); })(); // 打印 "Hello, World"

有时候void运算符可以替代圆括号。void是一元运算符，JavaScript将它之后的函数声明作为表达式处理，因此以下代码打印“Hello, World”。

1
void function() { console.log('Hello, World'); }();

二者的区别是，圆括号的IIFE仍然会返回一个值，而void的IIFE始终返回undefined。

1
2
3
(function() { return 42; })(); // 42

void function() { return 42; }(); // undefined