return !function() 与 return function() ? false : true 含义一样吗？

Question

学习 《JavaScript DOM编程艺术 第2版》（中文）时候遇到的问题

links[i].onclick = function() {
    return !showPic(this); // showPic(this) ? false : true
}

我自己试了试，两者结果一样，这两种方法在执行效率上有什么区别吗？

Answer 1

这两种方式都是使用最基本的操作符，效率应该是一样的。

写了一段脚本实测了一下：

var t1 = Date.parse(new Date());                                                    
var a = true;                                                                       
function set_a(p) {                                                                 
  var tmp = !p;                                                                     
  return tmp;                                                                       
}                                                                                   
for (var i=0; i<1000000000; i++) {                                                  
  a = a ? false : true;                                                             
}                                                                                   
var t2 = Date.parse(new Date());                                                    
console.log(t2-t1);                                                                 
                                                                                    
                                                                                    
for (var i=0; i<1000000000; i++) {                                                  
  a = !a;                                                                           
}                                                                                                                                                                                           
var t3 = Date.parse(new Date());                                                    
console.log(t3-t2);

Result:

[root@iZ94dn8i2nsZ js]# node answer.js 
2000
2000

两种方式分别运行了十亿此，使用了2000ms，也就是分别跑了2秒钟时间。

效率一样。

Answer 2

额，这点写法上的不同，实际运行中根本无需care，一般解释器都会帮你做优化的。像三目运算符这种常用的语法糖，如果会引起额外的副作用，各种教科书早就在介绍它的时候把它批判一番。

何况在这个业务场景下，函数更不会同时被调用个几万次，在这种程度下，两者几乎可以看作是相同开销的。

所以放心用好了。

作为程序员，你更需要关心的是: 这段代码，哪一种写法 可读性 更高。

当然，明显前者比后者的可读性要更高。

如果showPic并没有被复用，只在这里先执行，再返回值做判断的话，建议把回调写成

function () {
  return hidePic(this)
}

语义会更清晰一些。

当然在这个代码中，onClick以后，并没有后续的操作来接收return后的返回值吧，所以甚至连return都可以不加？

function () {
  showPic(this)
}