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

这样一行代码看看会执行成什么样

node中运行
这是在node中运行的，我们可以看出来不管是全局还是局部的undefined都被我们重新赋值了，我们再来看看浏览器中的结果 image

好样的，这样看来浏览器是有自己的结界的，但是我们如果不输出全局的呢？

image

完蛋，结界被破了，这下我们得出来一个结论
浏览器环境中的局部作用域中是可以更改undefined的值，而在node环境全局和局部都可以更改undefined的值，究其原因，因为undefined在JavaScript中既不是关键字也不是保留字，所以很容易被污染
证据：

《JavaScript高级程序设计》 《JavaScript高级程序设计》

以上都是摘自《JavaScript高级程序设计》

underscore中的使用

那undefined的值这么容易就被人改变，但像我们这种菜鸡当然不会用严谨的方式去取的undefined的值，但是想一些开源库，力求严谨的态度，让他们会使用void(0)这种方法去获取undefined的值

underscore中的实践
上面只是我截取的underscore中的部分代码，但从中我们就可以发现，他们确实是使用void 0去获取undefined的值

但是令我费解的是😲，师出同门的Lodash却没有使用这种方法。。。。。为啥？？

就这些吧

以上就是我目前对void这个东西的理解了。。。也不知道理解到什么程度。。尴尬

今天就先这样吧，有人催我更新，不是我不想更，实在是没有时间呢最近，中午午休的时间总结一下最近看的void。干活啦，公司这次的项目感觉会很牛逼。

参考链接

1. 《MDN web docs》
2. 《菜鸟教程》
3. 《谈谈Javascript中的void操作符》
4. 《(void 0)与undefined之间的小九九》
5. 《为什么用「void 0」代替「undefined」》
6. 《javascript:void(0)和javascript:;的用法》

---

我是前端战五渣，一个前端界的小学生。