(void 0) 与 undefined 之间的小九九

前言

原文连接

源码地址

这是underscore.js源码分析的第一篇文章，为何选择写这篇文章呢？其实主要有两点

1. 下划线源码中通篇可见这样的判断obj === void 0,初次看这样的写法彻底不知道什么意思，因此想整明白它。
2. 决定写一个系列把下划线分析完整，但愿由浅入深，柿子捡软的捏，先从简单的开始入手(😀)

写完这篇文章但愿达到什么样的效果呢？

1. 说明白为何用(void 0)代替undefined

2. (void 0)的一些简单应用

https://user-gold-cdn.xitu.io/2017/5/9/ee6837151ae5b8737445980b3841cdce

void 0是个啥

void 0是个啥，为毛它能够直接代替undefined关键字来作判断呢？咱们能够看下mdn上的解释

The void operator evaluates the given expression and then returns undefined.

void 运算符 对给定的表达式进行求值，而后返回 undefined

啥？去执行了一段表达式，最后却获得undefined，那要是表达式执行的结果是二、三、八、毛主席万岁，也是返回undefined吗？答案是：对的。他就是这么个东西，无论你表达式里写的是个啥，我最后就是给你个undefined。

黑人问号

undefined又是啥

undefined是js原始类型值之一，也是全局对象window的属性，在部分低级别的浏览器中能够被修改，在局部做用域中也能够被修改。

首先咱们来看这一段断码

var undefined = 'qianlongo'
alert(undefined)复制代码

最后console出来的是啥呢？undefined : qianlongo,
没图你说个js，接下来截取部分浏览器运行后的截图

ie7

ie7

ie8

ie8

ie9

测试结果为undefined

ie10

ie10

chrome

在最新的版本58.0.3029.81测试结果为undefined

firefox

在最新的版本52.0.2测试结果为undefined

欧朋浏览器

在最新的版本39.0.2256.48测试结果为undefined

你看ie老版本中就是那么任性，在全局做用域中能够直接改写undefined，也就是说当你想知道一个变量是否是等于undefined的时候直接这样判断已经不安全了。

if (obj === undefined) {
  // xxx
}复制代码

接下来咱们再看一段js

var testUndefined = function () {
  var obj = {}
  var undefined = 'underscore'
  var window = {
    'undefined': 'qianlongo'
  }
  console.log(window) // {'undefined': 'qianlongo'}
  console.log(undefined) // underscore
  console.log(window.undefined) // qianlongo
  console.log(obj.name === undefined) // false
  console.log(obj.name === window.undefined) // false
  console.log(obj.name === (void 0)) // true
}

testUndefined()复制代码

能够得出，window，undefined自己在局部做用域中是能够被重写掉的，一样的道理，若是你在局部做用域中一样用如下代码来判断obj是否是undefined，是有风险的。

if (obj === undefined) {
  // xxx
}复制代码

为啥要用void 0来代替undefined

为啥要用void 0来代替undefined，基于以上介绍，缘由就在这里了，void 0不管什么时候何地，后面跟了什么，结果都获得undefined，这正好是咱们须要的。因此将上面的判断改写一下

固然了还要另外一个缘由void 0 比undefined短

if (obj === void 0) {
  // xxx
}复制代码

void 0的一些其余应用

1. 填充a标签的href

<div style="height: 10000px;"></div>
<a href="#">xxxx</a>
<script>
  console.log('xxxx')
</script>复制代码

上面这段代码使用一个#号来填充a标签的href属性，这实际上是有一些弊端的，好比用户点击的时候，页面会回到顶部(网上有人说会刷新页面，可是本身试了好像不会)，试想我好不容易滚啊滚啊滚到xxxx这几个文字的地方，一不留神手贱点了一下，瞬间页面又回到顶部了，是否是要哭死😭。

因此常见的解决方法是

<div style="height: 10000px;"></div>
<a href="javascript:void(0)">xxxx</a>
<script>
  console.log('xxxx')
</script>复制代码

1. What's the valid way to include an image with no src?,在这个问题中提到用void 0去替代image标签的空src属性会减小页面请求(是否属实有待考证)

结尾

第一篇暂时写完了，欢迎你们吐槽和提意见。

参考文章连接：

What does “javascript:void(0)” mean?

difference between “void 0 ” and “undefined”

void operator