前端战五渣学JavaScript——void 运算符-CSDN博客

最近有点忙，公司有个新项目要尽快上线，所以工作时间很长，没有太多的时间去学习和总结，所以博客也没空更新了。但是充足的工作量让自己觉得很充足，沉淀的知识也有了用武之地，还不错。今天就写写这两天突然想到的一个小问题吧，感觉不是很重要，了解一下就ok了

时常见到`void`或者`void(0)`

在我刚接触前端的时候，在那个前端还没有从蛮荒时代走出来的时候，很多时候方法和属性都是直接写在标签上的，类似下面⬇️

  <div onclick="aaa"></div>
  <p onmouseenter="bbb"></p>
  <a href="https://www.alibaba.com/"></a>
复制代码

绝大多数的时候我发现很多a标签的href写的不是个地址，或者#等各种锚点，而是⬇️

  <a href="javascript:void(0);"></a>
复制代码

像上面这种写法，我估计很多前端的小伙伴也都见过，并且可能知道这么写是为了让a标签没有作用，不会跳转页面，也不会跳转锚点，但是为什么要这么写，我也是前几天突然想到的，就找了找资料看了一下。

认识`void`

void运算符对给定的表达式进行求值，然后返回undefined;————《MDN web docs》

理解一下上面的解释能执行包含的代码，然后再返回undefined;

立即调用的函数表达式

void可以完成如下的骚操作⬇️

(function () {
  console.log(123)
})(); // 123

void function () {
  console.log(321)
}(); // 321

function b() {
  console.log('error')
}(); // 报错
复制代码

第一种方法我们很清楚是一个自执行的函数，而第二种方法我们在一个方法前面写上void并且在函数末尾写上执行的括号，这个函数也变成了一个自执行的函数，而三种的方法只是为了证实我们不写void的时候，这种写法是不会执行，并且报错的。

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

就是说void会识别后面为自执行的函数，而不是仅仅声明一个函数

函数表达式和声明函数不明白的可以查看函数表达式

javascript URIs & javscript:void(0)；

我们首先要知道，我们开头提到的在a标签的href属性上写javascript:URI 的时候，它会执行URI中的代码，然后用返回的值替换页面内容，除非返回的值是undefined，而void()恰巧可以返回undefined。
我们先来看看javascript URIs是如何执行代码的。

<a href="javascript: alert('我被执行了');">弹出弹框</a> <!-- 点击页面我们可以看见alert弹框被弹出来了 -->
复制代码

上面的代码我们可以看出来javascript URIs确实可以再href中被执行。
下面我们来看加入void运算符的结果⬇️

<!-- 以下操作请用火狐浏览器操作，chrome不会有变化，所以可以看出有些方法至今各大浏览器的解析策略还是不一样的 -->
<a href="javascript: 0;">替换页面为0</a> <!-- 这个a标签在页面中点击以后，页面会被替换成0 -->
<a href="javascript: void(0);">替换页面为0</a> <!-- 而这个a标签在页面中点击以后，页面没有任何反应，因为void(0)返回的是0，所以不做处理 -->
复制代码

上面的代码我们能发现加入了void()以后，页面无动于衷，也没有被0替换。

`href="#"`和`href="javascript: void(0)"`

经过上面的章节我们已经知道了href="javascript: void(0)"是让点击a标签没有任何效果，但是我们前端的小伙伴有时候为了阻止这种情况发生，会href="#"这么写。这么写的意思是什么呢？执行的时候会默认执行href="#top"，页面的滚动条会滚动到页面的最上面，所以，这自然不是我们想要的。（而且地址栏的地址后面会跟上一个井号，多难看啊）

JavaScript中使用`void`

既然我们知道了void的作用，那在实际的JS编程中有什么作用呢。来，上代码⬇️

let undefined = '我是全局的undefined，我被人修改了';

function print() {
  let undefined = '我是局部的undefined，我被人修改了';
  console.log(undefined)
}

print();
console.log(undefined);
复制代码