阅读 1102

(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,那要是表达式执行的结果是2、3、8、毛主席万岁,也是返回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