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

[qianlongo]

前言

原文链接

源码地址

这是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>

2. 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

[pobusama]

顶一个

[badmarillo]

写的很好 通俗易懂