浅析从void 0 === undefined说起

　　在看《你不知道的JavaScript》的时候，看到了这个么一段代码：

function foo() {
　　var a  = arguments[0] !== (void 0 ) ? arguments[0] : 2;
　　return a; 
}

　　并且我们在使用 ?. 操作符，比如：let name = person?.name 会被编译成 let name = typeof person !== 'undefined' && person !== null ? person.name : void 0; 那么 void 0 到底是什么意思呢？运行得知 void 0 === undefined 为true。

　　那为什么不直接使用 undefined 呢？void 0和undefined意义一样吗？一元运算符 void 具体又有什么作用呢？

一、为什么使用 void 0 替换 undefined

1、undefined可以被重写

　　undefined在JavaScript中并不属于保留字/关键字，虽然 undefined 在 ES5 中已经是全局对象的一个只读（read-only）属性了，它不能被重写。

　　但是在局部作用域中，还是可以被重写的。

　　于是采用void方式获取undefined则成了通用准则。

2、为什么选择void 0 作为undefined的替代

　　MDN中对void有这么一段说明：

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

　　void 运算符能对给定的表达式进行求值，然后返回 undefined。也就是说，void 后面你随便跟上一个表达式，返回的都是 undefined，如 void (2), void (‘hello’)。并且void是不能被重写的。但为什么是void 0 呢，void 0 是表达式中最短的。用 void 0 代替 undefined 能节省3个字节。不少 JavaScript 压缩工具在压缩过程中，正是将 undefined 用 void 0 代替掉了。

　　除了防止被重写外，还可以减少字节，void 0代替undefined省3个字节。类似的还有很多常用的写法，看到别人这样写的时候就当是老司机的套路就行了。比如：

//取整
parseInt(a,10); //Before
Math.floor(a); //Before
a>>0; //Before
~~a; //After
a|0; //After

//四舍五入
Math.round(a); //Before
a+.5|0; //After

//内置值
undefined; //Before
void 0; //After, 快
0[0]; //After, 略慢

//内置值
Infinity;
1/0;

//布尔值短写法
true; //Before
!0; //After

false; //Before
!1; //After

二、一元运算符void的作用

　　void在ECMAScript 262规范如下：

The void Operator

The production UnaryExpression : void UnaryExpression is evaluated as follows:

Let expr be the result of evaluating UnaryExpression.

Call GetValue(expr).

Return undefined.

NOTE: GetValue must be called even though its value is not used because it may have observable side-effects.

　　void的行为特点为：

1、不管void后的运算数是什么，只管返回纯正的undefined；

void 0 === undefined          // true
void 1 === undefined          // true
void {} === undefined         // true
void 'hello' === undefined    // true
void void 0 === undefined     // true

2、void会对其后的运算数作取值操作，因此若属性有个getter函数，那么就会调用getter函数（因此会产生副作用）

var article = {
    _view: 0,
    get view(){
        console.log(this._view);
    　　return this._view++;
    }
};
var test = void article.view; // 显示0
console.log(test); // 显示undefined
console.log(article._view); // 显示1

　　通过与一元运算符delete做对比，delete的其中一个特点就是不对其运算数进行取值操作。

var article = {
    _view: 0,
    get view(){
    　　console.log(this._view);
    　　return this._view++;
    }
};
var ret = delete article.view;
console.log(ret); // 显示true
console.log(article._view); // 显示0

3、并且在链接中经常见到

　　下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

// 以下实例中，在用户点击链接后显示警告信息：
<a href="javascript:void(alert('Warning!!!'))">点我!</a>