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

Arno 发布于2019-08-20 16:25 / 2995人阅读

摘要：又是啥是原始类型值之一，也是全局对象的属性，在部分低级别的浏览器中可以被修改，在局部作用域中也可以被修改。所以常见的解决方法是在这个问题中提到用去替代标签的空属性会减少页面请求是否属实有待考证结尾第一篇暂时写完了，欢迎大家吐槽和提意见。

前言

原文链接

源码地址

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

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

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

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

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

(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的一些其他应用

填充a标签的href


xxxx

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

所以常见的解决方法是


xxxx

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

云服务器 GPU云服务器大数据与共享经济之间的联系 undefined与null区别 centos与主机之间复制粘贴 linux之间的访问

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82919.html

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

摘要：又是啥是原始类型值之一，也是全局对象的属性，在部分低级别的浏览器中可以被修改，在局部作用域中也可以被修改。所以常见的解决方法是在这个问题中提到用去替代标签的空属性会减少页面请求是否属实有待考证结尾第一篇暂时写完了，欢迎大家吐槽和提意见。前言原文链接源码地址这是underscore.js源码分析的第一篇文章，为什么选择写这篇文章呢？其实主要有两点下划线源码中通篇可见这样的判断...

novo 2019-08-29 12:34 评论0 收藏0
面向对象的小九九

摘要：由构造函数返回的对象就是表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤创建的对象。运算符返回一个布尔值，表示对象是否为某个构造函数的实例。面向对象本人能力有限，有误请斧正本文旨在复习面向对象(不包含es6) 本文学习思维创建对象的方式，获取对象属性构造函数,构造函数的new 做了什么原型与原型对象原型链继承(借用构造继承、原型继承、组合继承、寄生组合继承)...

时飞 2019-08-22 18:16 评论0 收藏0
教你认清这8大杀手锏

摘要：但纵使如此，我也要技术这条路上一路走到黑。接下来你想不想一起看下下划线是怎么实现的。这个迭代传递个参数和迭代的或者和最后一个引用的整个是从右侧开始组合的元素的函数使用案例我们来看一下上面的执行过程是怎样的。希望这篇文章对大家有点作用。前言 underscore.js源码分析第三篇,前两篇地址分别是那些不起眼的小工具？ (void 0)与undefined之间的小九九本篇原文链接 ...

Elle 2019-08-29 12:35 评论0 收藏0
教你认清这8大杀手锏

摘要：但纵使如此，我也要技术这条路上一路走到黑。接下来你想不想一起看下下划线是怎么实现的。这个迭代传递个参数和迭代的或者和最后一个引用的整个是从右侧开始组合的元素的函数使用案例我们来看一下上面的执行过程是怎样的。希望这篇文章对大家有点作用。前言 underscore.js源码分析第三篇,前两篇地址分别是那些不起眼的小工具？ (void 0)与undefined之间的小九九本篇原文链接 ...

alin 2019-08-22 11:04 评论0 收藏0