前端战五渣学JavaScript——void 运算符

最近有点忙，公司有个新项目要尽快上线，因此工做时间很长，没有太多的时间去学习和总结，因此博客也没空更新了。可是充足的工做量让本身以为很充足，沉淀的知识也有了用武之地，还不错。今天就写写这两天忽然想到的一个小问题吧，感受不是很重要，了解一下就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中运行的，咱们能够看出来不论是全局仍是局部的 undefined都被咱们从新赋值了，咱们再来看看浏览器中的结果

好样的，这样看来浏览器是有本身的结界的，可是咱们若是不输出全局的呢？

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

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

underscore中的使用

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

上面只是我截取的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:;的用法》

---

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