【辟邪剑法】探秘javascript中你所不知道的 void

和辟邪剑法同样，欲练此功必先……

void是什么

导读

public class Test {
	public static void main(String[] args) {
		for(int i=0;i<args.length;i++) {
			System.out.println(args[i]);
		}
	}
}
复制代码

很差意思，放错了，咱们换一个

<a href="javascript:void(0);">
</a>
复制代码

这下是否是就不陌生了呢

void定义

MDN说明

void expression

这个运算符能向指望一个表达式的值是undefined的地方插入会产生反作用的表达式。

void 运算符一般只用于获取 undefined的原始值，通常使用void(0)（等同于void 0）。在上述状况中，也可使用全局变量undefined 来代替（假定其还是默认值）。

ES5说明

The production UnaryExpression : void UnaryExpression is evaluated as follows:

1. Let expr be the result of evaluating UnaryExpression.
2. Call GetValue(expr).
3. Return undefined.

怎么理解

• 运算符：void 是一元运算符，出如今操做数以前，操做数是任意类型。void 0；
• 返回值：any -> undefined;
• 有反作用的表达式：也就是说后面的表达式会照常计算，此表达式可能产生反作用。

表达式反作用

大部分表达式没有反作用。 有关表达式的反作用的概念通常说计算一个表达式的值须要引用一些变量，在表达式求值过程当中，须要提取这些变量的值，但并不改变这些变量的值，这样的表达式称为无反作用的表达式．从传统意义上讲，表达式的做用就是计算，它除了产生一个计算结果外，不该该改变参与计算过程的任何变量的值或产生其它的效应。

举个例子

var a = 1;
var b = a++; //有反作用
var c = a+1; //无反作用
复制代码

这也向咱们解释了一个问题既然返回永远是undefined，那么GetValue有啥用?(知乎问题)

由于JavaScript的表达式是能够有反作用（side effect）的，void会对其后的运算数做取值操做，所以若属性有个getter函数，那么就会调用getter函数（产生反作用）

var num = 0;
var test = {
    get plus() {
        num++;
    },
    get num() {
        return num;
    }
};

void test.plus; //调用了plus的get方法 而delete就不会触发（不取值）
console.log(test.num); // 1
复制代码

为何不直接用undefined

void是关键字，而undefined并非！！！

先看这段代码

let undefined = 123;
console.log(123 === undefined)//true
复制代码

我只在浏览器端用，并且是现代浏览器是否是就没问题了

function test() {
  let undefined = 123;
  console.log(123 === undefined)
}

test(); //true
复制代码

在IE5.5~8中咱们能够将undefined看成变量那样对其赋值、node环境全局和局部环境均可以、浏览器环境中的局部做用域中也是能够得，所以很容易被污染

因此通常严谨的库的判断都是使用void 0;来做为undefined的值

let undefined = 123;
console.log(123 === void 0)//false
复制代码

拓展

下面这些方法也能够用来生成纯粹的undefined

• 未赋值的变量 var test；
• 无返回值的函数 var test = function(){};
• 未定义的属性 var test = {}[''];
• 未赋值实参

(function(window, document, undefined) {
    return undefined;
})(window, document);
复制代码

void用途

用做定义或者判断undefined

再也不赘述

当即执行函数

(function () {
  console.log(123)
})(); 

void function () {
  console.log(321)
}(); 
复制代码

在使用当即执行的函数表达式时，能够利用void运算符让JavaScript引擎把一个function关键字识别成函数表达式而不是函数声明（语句）。

URIs

保证点击以后不会跳转

<a href="javascript:void(0);">
  这个连接点击以后不会作任何事情
</a>
<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个连接会让页面背景变成绿色。
</a>
<a href="javascript:void(0);" onclick="document.body.style.backgroundColor='green'">猜一下会发生什么？
</a>
复制代码

或许能够这样

function middleware(next) {
    somethingAsync((err, value) => {
            // 在错误的时候调用next,可是不使用next()的返回值
            // 区别于 next(err)
            if (err) {
                next(err)
                return; 
            } else {
                //dosomething
            })
    }
}

//写成这样
function middleware(next) {
    somethingAsync((err, value) => {
            if (err) {
                return void next(err)
            } else {
                //dosomething
            })
    }
}
复制代码

必定有人会问，既然都是返回undefined，为何使用void 0;而不是void其余呢？

答案很简单啦：觉得0比较短~（不要笑，在不少打包及代码压缩过程当中都会把undefined转成void 0;就是由于它比较短）