javascript:void(0) 含义

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()
javascript:void func()

或者

void(func())
javascript:void(func())

尝试一下

const output = void 1;
console.log(output);
// Expected output: undefined

void console.log('expression evaluated');
// Expected output: "expression evaluated"

void function iife() {
  console.log('iife is executed');
}();
// Expected output: "iife is executed"

void function test() {
  console.log('test function executed');
};
try {
  test();
} catch (e) {
  console.log('test function is not defined');
  // Expected output: "test function is not defined"
}

描述

这个运算符允许在表达式执行完成时，产生（某些地方）期望获得的 undefined 值。

void 运算符通常只用于获取 undefined 的原始值，一般使用 void(0)（等同于 void 0）。在上述情况中，也可以使用全局变量 undefined 来代替。

需要注意考虑 void 运算符的优先级，以下加括号的表达式的例子可以帮助你清楚地理解 void 操作符的优先级：

void 2 === '2';   // (void 2) === '2'，返回 false
void (2 === '2'); // void (2 === '2')，返回 undefined

void 的作用

JavaScript URIs

如果有印象的同学是不是会发现，我们在阻止 a 标签的默认事件是会用到这个。

<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>
<p> 
  chrome中即使<a href="javascript:0;">也没变化，firefox中会变成一个字符串0 
</p>
<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个链接会让页面背景变成绿色。
</a>

注意，虽然这么做是可行的，但利用 javascript: 伪协议来执行 JavaScript 代码是不推荐的，推荐的做法是为链接元素绑定事件。

立即调用的函数表达式

在使用立即执行的函数表达式时，可以利用 void 运算符让 JavaScript 引擎把一个function关键字识别成函数表达式而不是函数声明（语句）。

void function iife() {
    var bar = function () {};
    var baz = function () {};
    var foo = function () {
        bar();
        baz();
     };
    var biz = function () {};

    foo();
    biz();
}();

在箭头函数中避免泄漏

箭头函数标准中，允许在函数体不使用括号来直接返回值。 如果右侧调用了一个原本没有返回值的函数，其返回值改变后，则会导致非预期的副作用。 安全起见，当函数返回值是一个不会被使用到的时候，应该使用 void 运算符，来确保返回 undefined（如下方示例），这样，当 API 改变时，并不会影响箭头函数的行为。

button.onclick = () => void doSomething();

确保了当 doSomething 的返回值从 undefined 变为 true 的时候，不会改变函数的行为。

void 优先级

由于 void 运算符的优先级比较高（14），高于普通运算符的优先级，所以在使用时应该使用小括号明确 void 运算符操作的操作数，避免引发错误。

在下面的示例代码中，由于第一行没有使用小括号，void 运算符优先计算，恒等于（ void 2）- 1，也就是 undefined - 1，结果为 NaN，在第二行代码中用括号包含了 (2-1)，所以优先于是先计算2-1，在处理 void，恒等于 void (1)，结果也就是 undefined。

console.log(void 2 - 1);  //返回NaN 
console.log(void (2 - 1));  //返回undefined

void 的执行

在 262 ECMA 中，对 void 有一个执行步骤的解释，大致的解读一下：

• 执行 UnaryExpression 并把返回值赋值给 expr
• 调用 GetValue(expr)
• 返回 undefined

href="#"与href="javascript:void(0)"的区别

包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

总结

通过 void xx 这种方式来获取 undefined，比直接使用 undefined 来的更加可靠安全，所以在很多的库、框架中都使用 void xx 这种方式来处理undefined ，保证使用到的是安全可靠的 undefined。这种方式我们在日常的项目开发或者的封装也可以借鉴起来。