文章目录
  1. 1. 疑问?
  2. 2. 规范是这么说的
  3. 3. 用处
    1. 3.1. 替换undefined
    2. 3.2. 填充a标签href、image标签的src
  4. 4. GetValue 是什么鬼?
  5. 5. 总结

疑问?

我们经常看见<a href="javascript:void(0);">超链接</a>href里填写javascript:void(0);,取消点击跳转,可是为啥这么搞?

规范是这么说的

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操作符

产生式 UnaryExpression : void UnaryExpression 按如下流程解释:

  • 令 expr 为解释执行UnaryExpression的结果。
  • 调用 GetValue(expr).
  • 返回 undefined.
    注意:GetValue一定要调用,即使它的值不会被用到,但是这个表达式可能会有副作用(side-effects)。

重点在于:无论void后的表达式是什么,void操作符都会返回undefined。

用处

替换undefined

因为undefined在javascript中不是保留字。换言之,你可以写出:

1
2
3
4
5
function joke() {
var undefined = "hello world";
console.log(undefined); //会输出"hello world"
}
joke()

对的,你可以在一个函数上下文内以undefined做为变量名,于是在这个上下文写的代码便只能通过从全局作用域来取到undefined,如:

1
2
window.undefined //浏览器环境
GLOBAL.undefined //Node环境

但要注意的是,即便window, GLOBAL仍然可以在函数上下文被定义,故从window/GLOBAL上取undefined并不是100%可靠的做法。如:

1
2
3
4
5
6
7
8
9
10
11
12
function x() {
var undefined = 'hello world',
f = {},
window = {
'undefined': 'joke'
};
console.log(undefined);// hello world
console.log(window.undefined); //joke
console.log(f.a === undefined); //false
console.log(f.a === void 0); //true
}
x();

于是,采用void方式获取undefined便成了通用准则。如underscore.js里的isUndefined便是这么写的:

1
2
3
_.isUndefined = function(obj) {
return obj === void 0;
}

除了采用void能保证取到undefined值以外,还有其它方法吗?有的,还有一种方式是通过函数调用。如AngularJS的源码里就用这样的方式:

1
2
3
(function(window, document, undefined) {
//.....
})(window, document);

通过不传参数,确保了undefined参数的值是一个undefined。

填充a标签href、image标签的src

  • <a href="javascript:void(0)">test</a>
  • <image src="javascript:void(0)">

GetValue 是什么鬼?

注意:GetValue一定要调用,即使它的值不会被用到,但是这个表达式可能会有副作用(side-effects)。

(关于js中void,既然返回永远是undefined,那么GetValue有啥用?)[https://www.zhihu.com/question/22210634]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var happiness = 10;
var girl = {
get whenMarry() {
happiness--;
return 1/0; //Infinity
},
get happiness() {
return happiness;
}
};

console.log(girl.whenMarry); //调用了whenMarry的get方法
console.log(girl.happiness); // 9

void girl.whenMarry; //调用了whenMarry的get方法
console.log(girl.happiness); // 8

delete girl.whenMarry; //没有调用whenMarry的get方法
console.log(girl.happiness); //还是8

上述代码定义了一个大龄文艺女青年,每被问到什么时候结婚呀(whenMarry),happiness都会减1。从执行情况可以看出,无论是普通访问girl.whenMarry,还是void girl.whenMarry都会使她的happiness–。而如果把void换成delete操作符写成delete girl.whenMarry,她的happiness就不会减了,因为delete操作符不会对girl.whenMarry求值。

总结

void(0) 有如下作用:

转自:谈谈Javascript中的void操作符

文章目录
  1. 1. 疑问?
  2. 2. 规范是这么说的
  3. 3. 用处
    1. 3.1. 替换undefined
    2. 3.2. 填充a标签href、image标签的src
  4. 4. GetValue 是什么鬼?
  5. 5. 总结