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

前言

原文链接

源码地址

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

1. 下划线源码中通篇可见这样的判断obj === void 0,初次看这样的写法完全不知道什么意思，所以想整明白它。

2. 决定写一个系列把下划线分析完整，希望由浅入深，柿子捡软的捏，先从简单的开始入手(?)

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

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

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

void 0是个啥

void 0是个啥，为毛它可以直接代替undefined关键字来做判断呢？我们可以看下mdn上的解释

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

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

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

undefined又是啥

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

首先我们来看这一段断码

var undefined = 'qianlongo'
alert(undefined)

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

ie7

ie8

ie9

测试结果为undefined

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